wake-up-neo.net

JQueryUI-Dialogfeld zum dynamischen Laden von Inhalt

Ich liebe die Dialogfelder von jQueryUI. Es scheint jedoch keine Möglichkeit zu geben, Inhalte dynamisch zu laden. Ich denke, ich muss einen anderen Ansatz verwenden, um dies zu erreichen. Werden iframes Inhalte nur dann geladen, wenn sie sichtbar gemacht werden? Ist das der richtige Weg, dies zu tun?

Ich bin offen für andere Dialogmechanismen, wenn sie eher dazu geeignet sind, den Inhalt nur beim ersten Öffnen zu laden.

16
at.

Das ist nicht schwer zu tun - ich würde mich nicht alleine mit iframes beschäftigen. Wie wäre es mit so etwas?

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#divInDialog').load('test.html', function() {
       alert('Load was performed.');
     });
   }
});

Grundsätzlich erstellen Sie Ihr Dialogfeld, und wenn es geöffnet wird, wird eine HTML-Datei von Ihrem Server geladen, die den Inhalt Ihres <div id="divInDialog"></div> ersetzt, der sich in Ihrem Dialog <div class="selector"/> befinden sollte.

31
Tauren

sie können ein leeres div auf Ihrer Seite erstellen

<div id="dialog-confirm"><div>

ein jquery-Ui-Dialogfeld mit autoopen = false einrichten;

    $("#dialog-confirm").dialog({
        resizable: false,
        autoOpen: false,
        height:140,
        modal: true,
        buttons: {
          'Delete all items': function() {
            $(this).dialog('close');
          },
         Cancel: function() {
            $(this).dialog('close');
         }
       }
   });

wenn Sie eine dynamische Seite laden möchten, verwenden Sie einen jquery-ajax-Aufruf, um die HTML-Datei dynamisch in das div zu platzieren, und rufen Sie dann dialog Open für dieses div auf. Im Folgenden wird ein Beispiel zum Laden einer dynamischen Seite auf einen Schaltflächenklick angezeigt.

  $("#someButton").click(function()
  {
       $.post("Controller/GetPage", function(data){
            $('#dialog-confirm').html(data);
            $('#dialog-confirm').dialog('open');
       }, "html")};
  }

wenn Sie beim Aufruf von ajax eine Seite laden, möchten Sie möglicherweise ein Ladebild oder jquery blockui plugin verwenden, um anzuzeigen, dass etwas geladen wird

14
leora

Ich würde persönlich eine "Ansicht" für Ihr Dialogfeld erstellen und dann auf das erzeugte Dialogfeld erweitern. Für einen Testfall habe ich folgende "Ansicht" verwendet:

var dialog = {
    title: 'Dialog WITHOUT Modal',
    modal: false,
    height: 300
};

Dann auf ein Dialogfeld erweitern:

$('#modal-btn-btns').click(function(){
    $('#dialog-modal-btns')
        .dialog($.extend(dialog, {
            modal: true,
            width: 500,
            title: "Dialog with modal AND buttons",
            buttons: {
                "Trigger ALERT": function(){alert("Nice [email protected][email protected]!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});
1
Wizard