$ .mobile.loading отказывается не работать

Question

Как видно из названия, я хочу вызвать метод $ .mobile.loading, когда пользователь нажимает кнопку, чтобы подписать их. Теперь это работает хорошо 50+ раз вокруг веб-сайта, но по какой-то причине приведенный ниже код не открывает диалоговое окно $ .mobile.loading, но он запускает код. Не уверен, почему это происходит в этой конкретной ситуации.

<div id ="diaglogfacebookuserdetails" data-role="dialog" data-theme="a"> 
     <div data-role="header"> 
      <h3 class="headerdialog">Almost Done</h3> 
     </div> 
     <div data-role = "content"> 
      <center> 
      <div class="alert-message info"> 
        <div class="box-icon"><img src="css/images/info.svg"></div> 
        <div id="diaglogfacebookuserdetailsmessage"></div> 
      </div> 

      <input type="text" name="diaglogfacebookuserdetailscell" id="diaglogfacebookuserdetailscell" placeholder="Enter your Cell Number" /> 

      <select id="diaglogfacebookuserdetailsuni" class = "searchuniversity"> 
      </select> 
      <select name="diaglogfacebookuserdetailscampus" id="diaglogfacebookuserdetailscampus" class = "signupuniversitycampus"> 
      </select> 

      <input type="submit" id ="facebookuserdetailsbutton" name="facebookuserdetailsbutton" value="SUBMIT" data-theme="a"/> 
      </center> 
     </div> 
    </div> 

Вот JS:

$(document).on('pageinit',"#diaglogfacebookuserdetails", 

    function(){ 
    $("#facebookuserdetailsbutton").click(
       function() 
       { 
        $.mobile.loading('show', { 
         text: 'Signing you Up!', 
         textVisible: true, 
         theme: 'a', 
         html: "" 
        }); 

        //lots of Code 

        $.mobile.loading('hide'); 

    }); 
}); 

Answer 1

Потому что вы скрываете диалоговое нагрузка сразу после показывать его. Попробуйте задержать его закрытие (как в этом demo) или скрыть, когда данные успешно загружены на сервер.

setTimeout(function() { 
     $.mobile.loading('hide'); 
    }, 1000);