jak załadować stronę z jquery ui dialogowym

Question

czy można załadować kolejną stronę z dialogiem jquery ui?

jak Dialog + Ajax

Dzięki

Answer 1

Jeśli chcesz załadować zawartość do okna za pomocą AJAX, można łatwo używać $ .load:

// initialize dialog 
var dialog1 = $("#dialog").dialog({ autoOpen: false, 
    height: 600, 
    width: 350 
}); 

// load content and open dialog 
dialog1.load('path/to/otherPage').dialog('open'); 

Sprawdź przykładem here.

Answer 2

Jasne, tylko jak iframe w kodzie HTML okna dialogowego.

Answer 3

Jeśli konkretnie potrzebują lub chcą iFrame zamiast wtryskiwanego zawartości do DOM, mam przedłużenie że tutaj: http://plugins.jquery.com/project/jquery-framedialog

Answer 4

Konstrukcja okna dialogowego jQuery UI jest taki, że musi istniejącej zawartości do używania na . Zazwyczaj w przykładach jest to DIV pobrane z istniejącego BODY DOM.

Są jednak przypadki, w których dodanie znaczników do istniejących stron tylko w celu utworzenia okna dialogowego - szczególnie jeśli zawartość jest ładowana przez AJAX - powoduje problemy. Na przykład możesz mieć bibliotekę JavaScript, która może być wywołana z wielu stron i nie chcesz dodawać znaczników do każdego z nich.

Alternatywny sposób (inspired by this) jest tutaj:

tą różnicą, że należy utworzyć DIV programowo (zostaną automatycznie dodane do DOM) - i gdy okno zamyka się zniszczyć go całkowicie - i usunąć go z DOM w przypadku zdarzenia "zamknij".

function JQDialog(title, contentUrl, params) { 
    var dialog1 = $("<div>").dialog(
    { 
    autoOpen: false, 
    modal: true, 
    title: title, 
    close: function (e, ui) { $(this).remove(); }, 
    buttons: { "Ok": function() { $(this).dialog("close"); } } 
    }); 
    dialog1.load(contentUrl).dialog('open'); 
} 

---

Wymień dialog1.load(contentUrl).dialog('open'); z następujących czynności, jeśli nie chcesz, aby otworzyć okno dialogowe (i potencjalnie migotanie) aż zawartość jest załadowany. Umożliwi to również prawidłowe wyśrodkowanie bez dodatkowej pracy.

dialog1.load(contentUrl, function() { 
    $(this).dialog('open'); 
}); 

Answer 5

Wolę poczekać, aż treść zostanie utworzona w celu utworzenia okna dialogowego. Wydaje mi się to prostsze. Ponadto automatyczne dopasowanie nie działa w inny sposób:

$.ajax({ 
     'url': contentUrl, 
     'success': function success(data, textStatus, xhr) { 
      $("<div>" + data + "</div>").dialog({ 
       "width": "auto", 
       "height": "auto", 
       "close": function (e, ui) { $(this).remove(); } 
      }); 
     } 
    });