I have an application developed on iOS & Android using phonegap 1.6.0 & JQM 1.1.0.
Now i have used the same code for blackberry. I am having many pages within a single HTML. I just keep on changing the pages. But the issue which i am facing is that, Device ready is fired everytime i perform a changePage(). This doesn't happen in iOS and Android... Why is it happening?
Below is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width,height=device- height,initial-scale=1.0,user-scalable=no">
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
//---------------------------------------------------------------------
// Cordova event listeners
//---------------------------------------------------------------------
function onDeviceReady() {
alert("Inside Device Ready");
}
// register Cordova event listeners when DOM content loaded
function init() {
console.log('init()');
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
<title>Cordova API Sample</title>
</head>
<body onload="init()">
<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>
<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>
About Me
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Back Home
</div>
</div>
</body>
</html>
In this you have to create one more js file for the on device ready.
To call your function in to this file
for new js file code i below.
//---------------------------------------------------------------------
// Cordova event listeners
//---------------------------------------------------------------------
function onDeviceReady() {
alert("Inside Device Ready");
}
// register Cordova event listeners when DOM content loaded
function init() {
console.log('init()');
document.addEventListener("deviceready", onDeviceReady, true);
}
call this script when you require.
like this
There was a bug in my 9800 simulator. I re-installed it and it worked.
Related
In this example,
http://jsfiddle.net/7Ev43/2/ the inclusion of the first <script> line (<script src="http://www.polymer-project.org/platform.js"></script>) causes the jQueryMobile events pagebeforecreate and pageinit events not to fire, in Safari and Firefox. However, it works in Chrome.
Any ideas on how to amend this?
Further investigation:
It appears that on Firefox and Safari, platform.js is overriding addEventListener
At this point I'm not sure how to proceed further, any suggestions would be most welcome.
full example:
<!DOCTYPE >
<html>
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).on('mobileinit', '#mainpage', function(){
console.log("mobileinit");
})
$(document).delegate("#mainpage", "pagebeforecreate", function(){
console.log("pagebeforecreate")
})
$(document).on("pageinit", '#mainpage', function()
{
console.log("pageinit")
});
console.log('end of script')
</script>
</head>
<body>
<div id="mainpage" data-role="page" data-theme="b">
</div>
</body>
</html>
I have an issue with vclick (or click) events when fired.
This is my html code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/estilo.css">
<script src="js/cordova-2.6.0.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/functions.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<div id="btn_comentar">
</div>
</div>
</div>
</body>
</html>
And this is my functions.js
$(document ).bind("mobileinit", function(){
$(document).bind("pageinit",function(){
$("#btn_comentar").bind("vclick",function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
});
}
When I click my #btn_comentar, the data that I want to retrieve from function list_comments (sending via ajax) is duplicated; I realized that it was sending twice, and finally that it was something about when I clicked on my button.
This is the output from the console (twice):
false
undefined
null
and also the alert message box (twice) "buttoon";
I have tried some solutions like:
jQuery Mobile : replace click event by vclick event
but without success, please need some help
This is my new code and how it is now working, but it seems that without jQuery Mobile's default configuration
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/estilo.css">
<script src="js/cordova-2.6.0.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/custom-mobile.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/functions.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" position="fixed">
<h1>Data</h1>
</div>
<div data-role="content">
<div id="btn_comentar">
</div>
</div>
</div>
</body>
</html>
custom-mobile.js
$(document ).bind("mobileinit", function(){
//$.mobile.allowCrossDomainPages = true;
});
functions.js
$(document).on("ready",function(){
$("#btn_comentar").bind("vclick",function(){
list_comments();
});
});
According to docs,
These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure using the mobileinit event.
So that's what you need to use mobileinit for. For setting defaults like this :
$(document).bind('mobileinit', function(){
$.mobile.defaultTransition = 'slideup';
});
If my understanding is right, mobileinit is included/fired before jQuery Mobile's js is included. Assuming you done that, your script order must look like this :
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
At this point of time (when custom-scripting.js is loaded), pageinit wouldnt be defined.
It would be wise to add your pageinit event AFTER jQM script.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
<script>
$(document).bind("pageinit", function(){
$(document).bind("vclick", "#btn_comentar" ,function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
});
</script>
use once on pageinit:
$(document).on('pageinit') {
$("#btn_comentar").on("vclick",function(e){
console.log(e.isDefaultPrevented());
console.log(e.result);
console.log(e.relatedTarget);
alert("buttooon");
list_comments();
});
}
this should work
Another cause of double-vclicks I've encountered is due to Chromium synthesizing both touch events in addition to mouse events. I confirmed this cause by running the app in desktop Chrome's developer "device mode" (where the mouse cursor changes into a circle), confirming the problem exists, then toggling off device mode, and confirming the problem is "fixed".
jblas discusses it, partial excerpt:
Note that vclick does NOT suppress the synthesized mouse/click events that are generated by the browser because it does not know what context it is being used in, AND form input elements require the mouse/click events to function normally.
If you use a joystick or mouse (desktop), the alert will fire on the normal mouse click event.
If you want to suppress the click event while using touch, you have to call event.preventDefault() in your vclick handler. This will queue the request to kill the click event that follows but due to the differences in the way device vendors implement their events, and some bugs within different android OS versions, this turns out to be very hard to do. We try a couple of methods to figure out whether or not to kill a click event ... one is based on the element the touch event was triggered, on, and another is the position of the touch event. This is necessary because The browser does not necessarily dispatch the mouse events to the same element that it used for the touch event.
I embedded phoneGap in my UIWebView, referenced to this doc:
http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_ios.md.html#Embedding%20Cordova%20WebView%20on%20iOS
And in the index.html, I write this sample code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
after the webview loaded, the "body" can be shown, but the alert can't be pop out. So the jquery.js is not loaded? Or something else is wrong?
Edit:
I added "http:" to the src, but not work.
Thanks!
change
alert(“jquery loaded”);
to
alert("jquery loaded");
or
alert('jquery loaded');
Add http or https to your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The above should work for you.
Did you add the Cordova file?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./cordova-2.3.0.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Also as much as phonegap uses HTML 5 it still requires a bit different style of writing your code. Everypage you make should all be in the same index page because Cordova loads at startup in your project. If you navigate away from the page Cordova needs to reload.
Did you copy jquery file at www forder (www/jquery.js). I use jquery too, mine is www/js/jquery.js
Try this!!!
I have implemented a basic example with phonegap for android in eclipse. Than i went with ios environment. I have downloaded the cordova plugin and created a new project. Then i replaced www folder with the www folder that i have created for android. The index html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=content-type content=text/html charset="utf-8">
<title>navigator.network.connection.type Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
// document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function helloworld() {
console.log('phone gap log...');
alert('Hello World');
}
</script>
<script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
</head>
<body background="login.png">
<img alt="" src="login_logo.png" STYLE="position:absolute;LEFT:25px">
<form STYLE="position:absolute;TOP:175px; LEFT:65px; WIDTH:100px; HEIGHT:50px" >
Kullanıcı Adı:<br> <input type="text" id="uname" ><br>
Şifre:<br> <input type="text" id="pword"><br>
</form>
<button type="submit" onclick="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
</body>
</html>
the style of the screen is same as with android. But when i pressed the submit button, i have got no action or no log in xcode or ios simulator. But it works on android and on eclipse. Why my simple code does not work on ios environment?
The onclick event isn't reliable in the Web View. You need to use ontouchstart or another event listener instead. The Apple Documentation lists the supported touch events.
So in your case you would have to change the button to something like this:
<button type="submit" ontouchstart="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
I've been trying to get a script that inserts a div of text after the first and second paragraph of an article to work in jQueryMobile. It works on the first pageload, but on the second it loads the content twice, and the third time it's loaded three times, and so on.
The jQueryMobile libraries and my script is loaded in the head:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="myscript.js">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
Then I have
<body id="mobile">
<div id="wrapper" data-role="page">
And then the content of the page
My script is executed as documented on jquerymobile.com
$("#wrapper").live('pageinit', function() {
Am I missing something? Any help will be deeply appreciated.
try adding data-dom-cache="false" it should look like this
<body id="mobile">
<div id="wrapper" data-role="page" data-dom-cache="false">
As Clarence commented, a better solution is to move the <script> tag outside of the <div> with data-role="page"
<body id="mobile">
<div id="wrapper" data-role="page">
<!-- stuff -->
</div>
<script>
$("#wrapper").live('pageinit', function() {
// more stuff
});
</script>
</body>