Thursday, November 28, 2013

How to load the server page in mobile application using jquery mobile

My application requirements is to show the dynamic pages on the mobile application using the jquery mobile.

Here is my approach
1) bind the pagebeforechange event.
2) Call the javascript function inside the pagebeforechange function.
3) Inside the function call the ajax and insert the content in the page.
4) Onsuccessfull ajax request trigger the pagechange event.


Here is sample code:
1) $(document).on('pagebeforechange', function (e, data) {
      if (typeof data.toPage === "string") {
           if (u.hash.search(/^#action_url/) !== -1) {

                populate_content(u, data.options);

                e.preventDefault();
            }  
     }
});


2) function populate_content(u, options) {
  
    $.ajax({url: remote_location_url,
                success: function (result) {
                      insert content here ............
                }
              
            });

            $.mobile.changePage($('#page_change'), options);

        } 

}

No comments: