Как скрыть диалог jquery перед открытием?

У меня есть кнопка, которая запускает всплывающее окно следующим образом. Я вывожу некоторую информацию со стороны сервера, чтобы отобразить ее во всплывающем окне. Дело в том, что для привлечения информации на стороне сервера требуется некоторое время, и мой диалог открывается как пустой, а затем отображает информацию через 1-2 секунды. Это раздражает. Есть ли способ показать диалог только тогда, когда информация о стороне сервера готова?Как скрыть диалог jquery перед открытием?

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'); 
      } 
     }); 
    }

источник

2016-05-13 Deceleven

показывающей загрузочную анимацию внутри всплывающей лучше всего подходит, что вы просите может стимулировать пользователь дважды нажмите кнопку, чтобы открыть всплывающее окно (при условии, что он открывается при нажатии какой-либо кнопки). – yogi

Спасибо! Но я хочу скрыть все элементы управления до того, как информация о стороне сервера будет готова. Я попытался поместить дисплей: ни один css в первой строке open, но, похоже, не работает ... – Deceleven

как насчет открытия диалога после завершения ajax? P.S Я фактически поддерживаю решение @yogi –

Вы могли бы попытаться обернуть Promise вокруг openPopup(id).

Например, если вы запрашиваете файл локально и использовать его после того, как он будет загружен, он должен выглядеть

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

с useFile является функцией, которая обрабатывает file.txt содержание.

Для получения дополнительной информации ознакомьтесь http://www.html5rocks.com/en/tutorials/es6/promises/

источник

2016-05-13 09:56:38 midzer

Спасибо! Это сработало. – Deceleven

мне удалось обойти это, показывая загрузочную анимацию внутри всплывающего окна, как то, что @yogi предложил. Это просто создать загрузочный DIV в моем всплывающем HTML, а затем добавьте следующую строку в конце $ .ajax успеха метода:

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

источник

2016-05-16 02:54:39 Deceleven

Как скрыть диалог jquery перед открытием?

ответ

Смежные вопросы