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.
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.
I am developing android application using eclipse ADT phonegap, when i select date ,no calender popup. thank you in advance.........
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Your code is correct but basically is not working in Internet explorer and Mozilla . i try with chrome and it will work perfectly.and phone gap basically depend on browser.And I don't know about it so much. so sorry for that.
Phone Gap (Cordova) currently uses the standard Android WebView which is a stripped down version of a browser (based on a particular version of WebKit).
It can't really be the Chromium-based WebView yet, that was just made available as a component to third party developers only recently in Android 4.4.
And as of April 1st 2014, Android 4.4 (KitKat) constitutes only about 5.3% of all the Android versions (not to mention, this new Chromium-based WebView still seems to be a work in progress, so it will take a while for most third party developers to feel completely comfortable with it).
jsfiddle.net/4r9mopwr/embedded/result/
Open it with chrome
http://www.w3schools.com/jsref/dom_obj_date.asp
First of all, jQuery UI Datepicker widget combined with a 3rd party wrapper to make this work with jQuery Mobile, so you need to combine jquery-mobile-datepicker-wrapper js and css in your page from here https://github.com/arschmitz/jquery-mobile-datepicker-wrapper, then in html
<input type="text" class="date-input">
<script>
$(function(){
$( ".date-input" ).datepicker();
})
</script>
I am trying to make a JSONP call in my PhoneGap application. It works fine in my desktop browser, but not in the device. I thought it might be an issue with the jQuery Mobile, so I even tried disabling it, but doesn't help.
Android version: 3.0
This is my code:
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function cancelclicked() {
window.location.href="index.html";
}
function jsonp_call()
{
// The call request here
}
function parseRequest(response)
{
// Parse the response here
}
</script>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="fieldcontain">
<label for="name">Username:</label>
<input type="text" id="uname" />
</div>
<div data-role="fieldcontain">
<label for="name">Password:</label>
<input type="password" name="name" id="pass" />
</div>
<div data-role="fieldcontain">
<label for="name" id="invalidlogin"></label>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<button type="submit" onclick="return jsonp_call()" data-theme="e" rel="external">Login</button>
<!--</form>-->
<button type="submit" onclick="cancelclicked()" data-theme="d">Cancel</button>
</fieldset>
</div>
</div>
</div>
What am I missing here? It works fine on a browser, so I'm quite sure that the JSONP code is correct. It fails on the emulator and the device as well.
Did you add the domain name into the Cordova config file? It is under res/xml/config.xml
<access origin="bla.bla.domain.com" />
For me the access origin setting was already set.
But still i got the problem.
It turns out to be a couple of missing closing HTML tags.
(in my case closing A HREF tags )
When i only changed this, it was working again on Android.
Chome automatically fixed the missing closing tags.
Quite a headache, because i had no problems during testing in my webbrowser, and i thought it had to do with the jsonp implementation, or security/signing issues.
I am trying to integrate paypal donate button in my phonegap-jquery mobile application, but the button doesn't appear and not working. is there any way to display the button or any easy way to display the paypal inside my app?
Here is The App Code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="file:///C|/Program Files/Adobe/Adobe Dreamweaver CS5.5/Configuration/Third Party Source Code/jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="file:///C|/Program Files/Adobe/Adobe Dreamweaver CS5.5/Configuration/Third Party Source Code/jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="file:///C|/Program Files/Adobe/Adobe Dreamweaver CS5.5/Configuration/Third Party Source Code/jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
And Here is the Button Code -
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="me#example.com">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Test">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
when i add the button code in any page, a blank button will appear and don't show anything! Any Idea?
For one your script links won't work when compiled by Phonegap
<script src="file:///C|/Program Files/Adobe/Adobe Dreamweaver CS5.5/Configuration/Third Party Source Code/jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
That path is only available to your local computer. You would need to use a relative path, like jquery-mobile/jquery-1.5.min.js as the script src
The button looks like it's pulling it's images from the Internet, have you enabled access to that domain in Phonegap?
Another option is to download the image and use a relative link to it rather then the http:// link
If you want to use the first option, take a look at the guide on Whitelist domains
http://docs.phonegap.com/en/2.3.0/guide_whitelist_index.md.html
HI You will have use phonegap paypal plugin library depending on the phone you are targeting. here is the git repo and instructions you will need
https://github.com/phonegap/phonegap-plugins/tree/master/Android/PayPalPlugin
I have weird behaviour using regular HTML input type button with phonegap (android/eclipse). This is the HTML that is causing my headache:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<form>
<input type="button" value="Rest Call" onClick="restCall(); />
<button type="button" onClick="restCall();">Rest Call</button>
</form>
</body>
</html>
The result of this is two buttons with the correct label/value, "Rest Call". But, to the left of both buttons the same text is also shown. So the label/value is shown twice.
I have spent some time on this now, not finding a solution. Hope someone can help.
Cheers,
OMA
I just tried to create a PhoneGap 1.4.1 project with your HTML in it.
I couldn't reproduce the problem until I added :
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
I thought this was a problem with that specific file but then I remove
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
and it worked fine.
So I think there is a conflict between these two files.
I'm no jQuery/jQMobile expert but are you sure you need both these files (especially jQuery-1.7.1.js) ?
Why don't you change your code to :
<input type="button" value="Rest Call" name="hei" onClick="restCall();"/>
There is some conflict between the two scripts, I get the same behaviour as mentioned by TDeBailleul.
I am doing some ajax calls etc which needs jQuery-1.x.x.js. All the how-to's on using phonegap with jquery also says to do this.
I found now that I need to use a specific version of jquery mobile (jquery.mobile-1.0a4.1.min.js), which is weird. Thanks for pointing me in the right direction TDeBailleul.