Menu
I am building an app that uses Cordova/PhoneGap and JQuery Mobile.
I want to use JQuery within the app, but I cannot get it to work - nothing happens, even with simple code.
I believe I have the headers set correctly:
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/myscripts.js"></script>
<script type="text/javascript">
app.initialize();
</script>
As I get the JQuery Mobile style headers and back buttons etc.
But when I try something simple like:
document.addEventListener("deviceready", function(){
$('p').append("<strong>HEllO</strong>");
});
In the myscripts.js file I get nothing. Do I need to trigger the JQuery in a different way? Could anyone point me in the right direction?
EDIT:
I found this which mentioned putting it within the div. This actually worked for me, eg
<div class="normal" data-role="page" data-title="Program">
<script type="text/javascript">
$(".normal").on('pageinit', function() {
$('p').append("<strong>HEllO</strong>");
});
</script>
But surely theres a better way? There has to be a way to have these scripts all in there own external file?
PS: My HTML is:
<body>
<div data-role="page" data-title="Program">
<div id="programholder">
<div data-role="header">
<a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
<h1>HEADER</h1>
</div><!--HEADER-->
<div data-role="content">
<p>
Append here
</p>
</div><!--CONTENT-->
</div><!--HOLDER-->
</div><!--PAGE-->
</body>
988
jQuery is a DOM manipulating/traversing and AJAX JavaScript framework. It abstracts out a lot of the complexity between the different browsers automatically. There are countless jQuery plugins that simplify many task. jQuery Mobile is a UI framework geared to mobile applications that is built on jQuery.
Compatible with all major desktop browsers as well as all major mobile platforms, including Android, iOS, Windows Phone, Blackberry, WebOS, Symbian. Built on top of jQuery core so it has a minimal learning curve for people already familiar with jQuery syntax. Theming framework that allows creation of custom themes.
jQuery Mobile is no longer supported.
Once a project is initialized to use jQuery mobile three files will be moved into your Cordova project js directory: jquery.
To understand a problem you must understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
So if you want to have separated js files for every page you need to initialize them from the BODY because HEAD is going to be discarded.
Like this:
<body>
<script>
// Your javascript will go here
</script>
// And rest of your HTML content
</body>
Same thing goes for your LINK and STYLE tags.
If you want to find out more read my other article with examples regarding this topic: Why I have to put all the script to index.html in jquery mobile
Other thing, when working with jQuery Mobile, never use this kind of initialization:
document.addEventListener("deviceready", function(){
$('p').append("<strong>HEllO</strong>");
});
Nor should you use classic jQuery document ready. Bot of them will usually trigger before page is successfully loaded into the DOM. That is why jQuery Mobile has page evenets. And you were correct with using pageinit event but you did it in a wrong way. jQuery Mobile page event's should be binded like this:
$(document).on('pageinit', ".normal",function() {
$('p').append("<strong>HEllO</strong>");
});
If you want to find out more read my other answer regarding document ready vs page events difference: jQuery Mobile: document ready vs page events
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
