Wie jquery Dialog vor dem offenen Ereignis zu verbergen?

Ich habe eine Schaltfläche, die ein Popup wie folgt auslöst. Ich ziehe einige Informationen von der Serverseite, um sie auf dem Popup anzuzeigen. Die Sache ist, dass es eine Weile dauert, die Informationen auf der Serverseite hochzuziehen, und mein Dialog öffnet sich als leer und zeigt dann die Information nach 1-2 Sekunden an. Es ist nervig. Gibt es eine Möglichkeit, den Dialog nur anzuzeigen, wenn die Server-Side-Info bereit ist?Wie jquery Dialog vor dem offenen Ereignis zu verbergen?

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

Quelle

2016-05-13 Deceleven

eine Lade Animation zeigt innen Popup besserer Ansatz ist es, was Sie fordern können Anwender ermutigen Klicken Sie zweimal auf die Schaltfläche, um das Popup zu öffnen (vorausgesetzt, es öffnet sich beim Klicken auf eine Schaltfläche). – yogi

Danke! Aber ich möchte alle Kontrollen ausblenden, bevor die Server-Seite Info bereit ist. Ich habe versucht, eine Anzeige zu setzen: keine CSS in der ersten Zeile von öffnen, aber es scheint nicht zu funktionieren ... – Deceleven

Wie wäre es mit dem Öffnen des Dialogs, nachdem der Ajax abgeschlossen? P. Ich unterstütze tatsächlich @Yogis Lösung –

Sie könnten versuchen, eine Promise um Ihre openPopup(id) zu wickeln.

Zum Beispiel, wenn Sie eine Datei lokal holen und es verwenden, nachdem es geladen ist, sollte es aussehen

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

mit useFile eine Funktion ist, die file.txt Inhalt behandelt.

Für weitere Informationen überprüfen http://www.html5rocks.com/en/tutorials/es6/promises/

Quelle

2016-05-13 09:56:38 midzer

Danke! Das hat funktioniert. – Deceleven

I zeigt eine Lade Animation innerhalb des Popup wie das, was @yogi vorgeschlagen, dies zu umgehen verwaltet. Das ist einfach ein Laden div in meinem Popup-HTML zu erstellen und dann die folgenden am Ende des $ .ajax Erfolg Methode hinzufügen:

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

Quelle

2016-05-16 02:54:39 Deceleven

Wie jquery Dialog vor dem offenen Ereignis zu verbergen?

Antwort

Verwandte Themen