Should I use jQuery Ajax api in jQueryMobile?

Question

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.

Warping it? On purpose? – B. Clay Shannon-B. Crow Raven Mar 25 '14 at 21:52 — B. Clay Shannon-B. Crow Raven, Mar 25 '14 at 21:52

score 6 · Accepted Answer · edited May 23 '17 at 12:19

6

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.

edited May 23 '17 at 12:19

Community

1
1

answered Feb 22 '13 at 09:38

Gajotres

57,309
16
102
130

In my application, do I need to Include both jQuery, and jQueryMobile? Or jQueryMobile file, contains all the jQery Apis? – Lali Pali Feb 22 '13 at 09:47
NDakotaBE is correct, you need to use both of them, normally jQuery must be used first. Also you must understand not every jQuery version will be compatible with jQuery Mobile. For example, current stable jQuery Mobile 1.2 should be used with jQuery 1.8.3 and it will NOt work with version 1.9.1 and higher. – Gajotres Feb 22 '13 at 10:02
That is strange, do you know what is the reason behind that. When you mean use together, what is exactly that you mean? If I am making the UI with jQueryMobile and add the jQuery for ajax calls? – Lali Pali Feb 22 '13 at 10:19
You cant use jQuery Mobile without jQuery, basically jQuery Mobile has an dependency on jQuery. – Gajotres Feb 22 '13 at 10:20
You can event test this, open my jsFiddle example and unselect jQuery from screen top left corner. – Gajotres Feb 22 '13 at 10:24
Yea is true, it is like that. Do you have any idea as to why newer version of jQuery wont work with the Mobile version of jQuery. Can I consume any kind of data with ajax, e.g., photos, and so on. In case I need to upload a photo to my database through the web-service. – Lali Pali Feb 22 '13 at 12:10

Should I use jQuery Ajax api in jQueryMobile?

1 Answers1