I use Phonegap for development but in the android platform it runs slow what reason is this
This is I write two pages code:
login code:
<script type="text/javascript">
function verify()
{
var myurl = "main1.html" + "?"+ wifiConfig
if($("#devicePassword").val()==jsonObj.dockmatePassword){
window.location.assign(myurl);
}else{
alert("error");
}
}
</script>
<body onLoad="loadpage()">
<form data-role="controlgroup">
<br><label for="userpassword">密码:</label><br>
<input type="password" id="devicePassword" name="userpassword"/>
<input type="button" data-inline="true" value="确认" onClick="verify()"/>
</form>
</body>
mian1.html code:
<script type="text/javascript">
function getConfigInfo(){
var url = location.href;
var t=url.split("?")[1];
var tmp = t.split("$");
wifiConfig=decodeURI(tmp[0]);
}
}
</script>
<body onLoad="getConfigInfo()">
<li id="version"><a>版本<label id="versions"></label</a></li>
The best thing you can do is keeping away from Jquery Mobile for phonegap applications. Definitely jQuery Mobile is the best available mobile framework and may be suitable for mobile web sites. But for me, Jquery Mobile is the worst framework in performance for a phonegap application.
Make both pages in a single HTML file and use frameworks like JQTouch to make it effective as application pages.
If you use different HTML files in phonegap application, transition between pages will be slower.
Related
I am working on building an mobile application on apache cordova. I am using the latest version 9.0.0 (cordova-lib#9.0.1).
I have created the index.html
The code works great on cordova browser. But it do not run on android device. I have not checked the emulator, because my system do not support emulators (you can say hardware acceleration fails).
So I install the apk on my android phone. But the app do not work.
Here is my code:-
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/swipe.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>Swipe Left</h1>
</div>
<div data-role="content">
<p>Swipe Left to get to the next page.</p>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<h1>Swipe Right</h1>
</div>
<div data-role="content">
<p>Swipe Right to get to the next page.</p>
</div>
</div>
</body>
</html>
Below is my swipe.js
$(document).delegate("#firstpage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#secondpage", {
});
});
})
$(document).delegate("#secondpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#firstpage", {
});
});
});
Could any one would suggest how to achieve the page swipe in apache cordova.
What I want?
I want to go to next page(or div) by swiping my fingers on the mobile screen.
I have done searching all the web, but the code works in browser but not on android device.
Any help would be appreciated.
You should debug the app running on the phone with Chrome Device Inspector.
Anyway, try moving your JS and CSS resources to your local path in order to embed them with the app, probably their download is being blocked due to security policies.
So I have a basic cordova app created. I added jquery and am trying to make a request to a url.
The target is to post data, but I'm testing with a GET method.
The problem is that the response is "Failed to load resource: the server responded with a status of 404 (Not Found)", but when I open the url from a browser, the response is displayed.
I've been at this for a day and a half, I've gone through alot topics on the internet and tried different things, but couldn't get the job done. If you have any ideas it would be great!
My goal is to create an android app, in which you fill several fields with text, save them on the device, and when connected to wifi tap a button to push the data in the file to a server. So if you have any suggestions on what other I can use instead of cordova, I`d appreciate it.
EDIT - here is the code:
So as I said, plain app created with cordova.
This is the index.html and the default index.js at which end I added the ajax:
$.ajax({
type: 'GET',
url: 'url',
headers: {
'Access-Control-Allow-Origin': '*'
},
success: function(response) {
console.log(response);
},
error: function(req, err) {
console.log(req);
console.log(err);
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
jQuery provide a way to connect Server.(i.e)HTTP asynchronous HTTP (Ajax) request.All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
This is the simple method to connect your server.
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
use this method.No need to add headers in the client side. please add it in the back end to support cross platform issues(CORS).
[To know more please refer ][1]
http://api.jquery.com/jquery.ajax/
I am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
I am working on a PhoneGap application and am using jQuery Mobile. The last time I was working on the project it was looking great, but now jQuery Mobile stopped working. What's going on?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="content">
<h2>Login To Carpool Mobile</h2>
<p align="right">Don't have an account? →</p>
<form method="post" id="loginForm">
<label for="password">Email:</label>
<input class="required" type="text" name="username" id="username" placeholder="username#target.com">
<label for="password">Password:</label>
<input class="required" type="password" name="password" id="password" placeholder="password">
<input type="button" value="Login" id="submitButton" onClick="handleLogin()">
</form>
</div>
</div>
<script>
$(document).ready(function() {
checkPreAuth();
});
</script>
</body>
</html>
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!
You can't use below one with jQuery Mobile
$(document).ready(function() {
checkPreAuth();
});
You need to use custom jQuery Mobile specific events. You may have to change your code as below.
$('#page').live('pageshow', function(event){
checkPreAuth();
});
Check documentation for more relevant events.
From your code I can notice that you are using very old libraries of both jQuery and jQuery Mobile. I would recommend you to upgrade to the latest library which will enable you to use much more features than what you have in your current version.
Here is an example with latest framework from jsfiddle.
I don't have any problem with your code apart that checkPreAuth(); is not defined. You should also try to update your version of query and jquery mobile.
I will recommend that you download and include should include the JQuery mobile and Jquery files( script files) in your www project directory
Remove the $(document).ready(function() and keep checkPreAuth(); inside the deviceready event of PhoneGap.
I have been working on calling a simple web service in html5 from Android Browser(Android 2.2). Its not working on Android browser. But, it works if i run it on a PC. Nothing happens when i click the button. I have been on net for couple of weeks now. But, didn't get anything to work. Below is the code of the html page. please help.
<html>
<head>
<title>UseSwap</title>
<script language="JavaScript">
function InitializeService(){
service.useService("http://localhost:2913/WebServicesUsingCSharp/WebService.asmx?wsdl",
"GetAgeService");
}
var StrYear, StrMonth, StrDay;
function GetAge(){
StrYear = document.DemoForm.StringYear.value;
StrMonth = document.DemoForm.StringMonth.value;
StrDay = document.DemoForm.StringDay.value;
service.GetAgeService.callService("GetAge", StrYear, StrMonth, StrDay);
}
function ShowResult(){
alert(event.result.value);
}
</script>
</head>
<body onload="InitializeService()" id="service"
style="behavior:url(webservice.htc)" onresult="ShowResult()">
<form name="DemoForm">
Year : <input type="text" name="StringYear"/>
Month : <input type="text" name="StringMonth"/>
Day : <input type="text" name="StringDay"/>
<button onclick="GetAge()">Get Age</button>
</form>
</body>
</html>
Regards,
Parshant.
your html references a service on the same machine
http://localhost:2913
i dont think that you have the webservice running on your android phone.
replace localhost with the ip of your server