CODEWITHSUNDEEP
jqueryajaxcordovajquery-mobileweb
Lali Pali
Lali Pali

Reputation: 627

Should I use jQuery Ajax api in jQueryMobile?

I am making a Mobile web application, with HTML5, CSS3, JavaScript, and jQueryMobile and warping it with Phonegap.

I am new in all the web thing, and I was wondering, when I use the jQueryMobile for the UI, can I use the jQuery api for Ajax calls, or does jQueryMobile has it's own tools for that.

I need to use Ajax, to interact with an external web-service, I will be fetching(get) and updating(get/post) from a database.

In other words, does the jQueryMobile supports all the jQuery api, or do I have also to include the jQuery separately in my application.

Upvotes: 3

Views: 6987

Answers (1)

Gajotres
Gajotres

Reputation: 57309

jQuery function $.ajax is standard when creating an AJAX call with jQuery / jQuery Mobile.

Working jsFiddle example: http://jsfiddle.net/Gajotres/jLdFj/

$('#index').live('pagebeforeshow',function(e,data){ 
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});

Few things to consider:

  • $.ajax call should not be used during the page transition because possible page flickering
  • All data dynamically generated through AJAX call must be afterwards enhanced to a jQuery Mobile page markup, here's my blog ARTICLE regarding this topic. Or it can be found HERE.
  • When displaying dynamically generated content it must be appended during the correct page event, best one is pageboforeshow event. To find more about jQuery Mobile page events take a look at this ARTICLE.

Upvotes: 6

Related Questions