JqueryMobile Loader/spinner при загрузке другой страницы

Question

Искал почти 2 дня и не смог найти подходящий ответ.

Я разрабатываю страницу JQuery Mobile. В настоящее время у меня есть 2 мобильных страницы JQuery. Когда страница запустится, появится кнопка. Нажатие кнопки отправит запрос SOAP на сервер, чтобы получить ответ. После получения ответа отобразится вторая страница.

Запрос SOAP может занять от 3 до 5 секунд. В течение этого времени я хотел бы показать загрузчик/прядильщик в центре страницы, пока я не получу ответ с сервера. Как это сделать? Ниже приведен код, который я использую.

HTML файл, содержащий 2 страницы

<form name="frm_login" action="" method="post"> 
    <div id='pg_login' data-role="page"> 
    <div data-role="content"> 
     <input type="submit" name="btn_login_submit" id="btn_login_submit" value="Login" /> 
    </div> 
    </div> 

    <div id='pg_menu' data-role="page"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Welcome</h1> 
    </div> 
    </div> 
</form> 

Javascript кода, как показано ниже

$(document).ready(function() { 
    $('form').submit(function(e){ 
    e.preventDefault(); 
    var xmlRequest = getXmlRequest(); 
    loadingStart(); 
    $.soap({ 
     url: 'full wsdl url', 
     method: 'getUserName', 
     data: xmlRequest, 
     success: function(xmlResponse) { 
     loadingEnd(); 
     $.mobile.changePage('#pg_menu'); 
     }, 
     error: function(xmlResponse) { 
     } 
    }); 
    return false; 
    }); 
}); 

function loadingStart(){ 
    $.mobile.loading('show', { 
    text: "loading", 
    textVisible: true 
    }); 
} 

function loadingEnd(){ 
    $.mobile.loading("hide"); 
} 

Я также держать 5 секунд времени ожидания в функции WSDL для целей тестирования.

Загрузчик не отображается. Пожалуйста, дайте мне знать, что здесь происходит.

С уважением Малай

Answer 1

Проблема в том, что в SOAP плагин JQuery (http://plugins.jquery.com/soap/)

После меняю в родные AJAX вещи начали работать нормально с ниже код.

$(document).ajaxStart(function() { 
    $.mobile.loading('show', { 
    text: "loading...", 
    textonly: false, 
    textVisible: true, 
    theme: 'a', 
    html: "" 
    }); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
});