CODEWITHSUNDEEP
jqueryjquery-mobilebackbone.js
Dan
Dan

Reputation: 1295

jquerymobile with backbone showing loading spinner

I am using jQuery mobile with backbone

I have disabled the jquery mobile routing and use backbones which all works well

here is that config

define(['jquery'], function($){

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').live('pagehide', function (event, ui) {
        $(event.currentTarget).remove();
    });
});
});

then on my ajax calls for my views I use this code

     $.ajax({
            beforeSend: function() { $.mobile.showPageLoadingMsg(); },
            url: this.template,
            dataType: 'html',
            async: false,
            success: function(data) {
                compiled = _.template(data);
                $.mobile.hidePageLoadingMsg();
            }
        });

This shows the loader fine in firefox but does not work on chrome or my ios device?

can anyone help?

Thanks

Upvotes: 1

Views: 906

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Webkit browsers like Chrome/safari/android/iOS have a problem with jQM and async: false ajax call. They will get locked while ajax call is processing. Firefox don't have such problem, for whatever reason.

Change:

async: false,

to:

async: true,

If async: false is crucial to you app functionality and you want to prevent user interaction while ajax is working, display a transparent div overlay over whole app. Do it in beforesend state and remove it in a success or a failure state.

Upvotes: 1

Related Questions