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>
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