Jquery mobile popup with loading spinner

Question

The popup delays a long time to load in device.

How can I show a loading spinner before display a popup in jquery mobile?

This is a simplified version of my code:

<div data-role="page" id="fixed_numbers">
    <div data-role="header">
        <a href="#" data-icon="back" data-rel="back" data-role="button">Back</a>
        <h1>Header</h1>                  
    </div>
    <div data-role="content">
        <div id="dlg_fix" data-role="popup" data-theme="a" data-overlay-theme="a"></div>
        <a href="#" id="fix_num_btn" data-value="test">Click Here!</a>
    </div>
</div>

$(document).on("pageinit", "#fixed_numbers", function() {

    $("#fixed_numbers").on("click", "#fix_num_btn", function(e) {
        e.preventDefault();
        // value receive a data from input hidden  
        var value = $(this).attr("data-value");
        $('#dlg_fix').html(value).popup('open');
    });
});

Thanks

Answer 1

$(document).on("pageinit", "#fixed_numbers", function() {

    $("#fixed_numbers").on("click", "#fix_num_btn", function(e) {

        $.mobile.showPageLoadingMsg();

        e.preventDefault();
        // value receive a data from input hidden  
        var value = $(this).attr("data-value");
        $('#dlg_fix').html(value).popup('open');

    });
});

see more page loading msg options from jQuery Mobile

Answer 2

Try this:

$("#fixed_numbers").on("click", "#fix_num_btn", function(e) {

    e.preventDefault();

    $.mobile.showPageLoadingMsg(); //Show  Sipnner
    var value = $(this).attr("data-value");
    $('#dlg_fix').html(value).popup('open');

});

Add a popupafteropen event listener, this will hide the spinner when the popup will be open.

$('#dlg_fix').on('popupafteropen', function (e) {
$.mobile.hidePageLoadingMsg();
});

live demo

for more popup events, check out JQM docs jqm docs - popup events