CODEWITHSUNDEEP
jquery-mobilecordova
Louis
Louis

Reputation: 2618

Jquery Mobile: display/hide loading animation on button click

I am trying to display JQM's loading gif when the user clicks on my reset button (because the process is kind of long). I've tried the following, but the loading animation doesn't show.

HTML :

<a id="resetbutton" class="ui-btn ui-btn-a ui-corner-all">Reset</a>

JS:

        $("#resetbutton").on("vclick",function(){
            $.mobile.loading( "show");
            var resetListsModelsOnDeferred = resetListsModelsOn(prodata,0, 0);
                    var highlightFunModelsDeferred = highlightFunModels(funfeatureOn, 0);
            addProImagesInSelect();
            addBrandImagesInSelect();
            $.when( resetListsModelsOnDeferred, highlightFunModelsDeferred ).then( function() {
                $.mobile.loading( "hide" );
            });
        });

Is the event binding the problem here ?

I am using Phonegap 3.3 too for this app.

Thanks

Upvotes: 0

Views: 586

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Change your code to this:

$(document).on("vclick","#resetbutton",function(){
    setTimeout(function(){
        $.mobile.loading( "show");
    }, 1);
    var resetListsModelsOnDeferred = resetListsModelsOn(prodata,0, 0);
            var highlightFunModelsDeferred = highlightFunModels(funfeatureOn, 0);
    addProImagesInSelect();
    addBrandImagesInSelect();
    $.when( resetListsModelsOnDeferred, highlightFunModelsDeferred ).then( function() {
    setTimeout(function(){
        $.mobile.loading( "hide" );
    }, 1);      
    });
});

First I can't see your HTML so I bound this event to document level, because of this app wont care if button exist or not. But before you do this add a alert to this event. If alert is show in your case the live it like this:

$("#resetbutton").on("vclick",function(){

Or if alert is still not shown then use it like this:

$(document).on("vclick","#resetbutton",function(){

Second thing, ajax loader is initialized/hidden using setTimeout function. This is a fix for web-kit browsers who can't initialize jQuery Mobile ajax loader without slight delay.

Update

Try this solution:

$(document).on("vclick","#resetbutton",function(){
    setTimeout(function(){
        $.mobile.loading( "show");
        var resetListsModelsOnDeferred = resetListsModelsOn(prodata,0, 0);
        var highlightFunModelsDeferred = highlightFunModels(funfeatureOn, 0);
        
        addProImagesInSelect();
        addBrandImagesInSelect();
        
        $.when( resetListsModelsOnDeferred, highlightFunModelsDeferred ).then( function() {
            setTimeout(function(){
                $.mobile.loading( "hide" );
            }, 1);      
        });     
    }, 1);
});

Upvotes: 1

Related Questions