Android + Phonegap + Jquery Validate - Not Firing

I'm using jQuery Mobile with jQuery Validate. I have multiple forms that post with ajax serialize once all pages have been completed. The 'next' button below works on iOS and Andro

Solution 1:

I believe that for jQuery Mobile, you'll need to use....

$(document).on('pageinit', function(){

instead of

$(document).ready(function(){

See: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event.

Solution 2:

My javaScript code was not being called when bundled into a phonegap app (on iOS in my case). I built a web app with multiple screens and buttons that are hidden or displayed depending on user interaction.

When using the iOS simulator bundled with XCode you can see the sourcecode of the generated web app in safari (under the "Develop" menu, developer tools have to be enabled in Safari preferences). In the source code I noticed that the all my apps html pages are merged into one and the only javascript included is from the first page (default index.html) - all other elements within the page were removed from the file. So I changed

    $(document).ready(function(){ 
       ...
    });

to

    $(document).on('pageinit', function(){
       ...
    });

(thanks Sparky, for your answer above) and added all the jquery js code from the following pages into index.html. As an example I added the following line to hide a div on one of the pages:

    $("#cancelButtonDiv").hide();

The code is now being executed and the methods specified on my buttons are being called properly.