オープンイベントの前にjqueryダイアログを非表示にするには？

Question

私は以下のようにポップアップを引き起こすボタンを持っています。私はポップアップでそれを表示するためにサーバー側からいくつかの情報を引き出します。問題は、サーバー側の情報をプルアップするのに時間がかかり、ダイアログが空になってから1〜2秒後に情報が表示されることです。気に障る。サーバー側の情報が準備されているときだけダイアログを表示する方法はありますか？

function openPopup(id) 
    { 
     $("#divPopup").dialog({ 
      resizable: true, 
      height: 200, 
      width: 300, 
      modal: true, 
      title: 'Popup Title', 
      buttons: { 
       OK: function() {       
        //TODO 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      }, 
      open: function (event, ui) { 
       // Can I hide the dialog popup before the info is ready? 
       populateInfo(id); 
       addDialogBGConfirm($(this).parent().css('z-index') - 1); 
      }, 
      close: function (event, ui) { 
       removeDialogBGConfirm(); 
      } 
     }); 
    } 

    function populateInfo(id) 
    { 
     $.ajax({ 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      url: window.location.href + "/GetServerSideInfo", 
      data: "{'profileId': '" + id + "'}", 
      dataType: 'json', 
      success: function (res) { 
       // populate popup controls based on server side info 
       $('.pname').text(res.d[0]); 
       // ...       

      }, 
      error: function (data, textStatus) { 
       alert('Error in calling method'); 
      } 
     }); 
    } 

Answer 1

あなたのopenPopup(id)周りPromiseをラップしようとすることができます。例えば

あなたは、ローカルファイルを取得し、それがロードされた後、それはuseFileがfile.txtコンテンツを扱う関数であると

$.get("data/file.txt").then(useFile); 

のようになります。それを使用する場合。私は@yogiを示唆したものと、ポップアップ内のロードアニメーションを示すことによってこの問題を回避するために管理http://www.html5rocks.com/en/tutorials/es6/promises/

Answer 2

詳細情報について確認してください。それは単に私のポップアップHTMLで負荷のdivを作成し、$アヤックス成功メソッドの最後に以下を追加することによってです：ポップアップ内のロードアニメーションを示す

$('.loading').css("display", "none"); // loading animation div 
$('.InfoSection').css("display", "block"); // real content