如何讓jQueryUI對話框動態加載內容

我喜歡jQueryUI的對話框。但是，似乎沒有辦法動態加載內置內容。我想我必須使用其他方法來實現這一點？只有在內容可見時，iframe纔會加載內容嗎？這是做到這一點的正確方法嗎？如何讓jQueryUI對話框動態加載內容

我打開其他對話框機制，如果他們更適合只在第一次打開時加載內容。

2010-09-12 at.

這並不難做到 - - 我不會爲此一開始就搞亂iframe。這樣的事情呢？

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

基本上，你創建你的對話框，並在打開時，一個HTML文件從服務器加載，免去您的對話框裏面<div class="selector"/>您<div id="divInDialog"></div>，內容應該是。

來源

2010-09-12 11:48:12 Tauren

+12

+1 - 你也可以只做到'$（本）.load（「網址「）'對於大多數情況:) – 2010-09-12 11:48:57

@Nick，真的......我只是習慣於這樣做，因爲我的對話框中有一些靜態內容。感謝您指出。 – Tauren 2010-09-12 11:51:58

謝謝牛頭人和尼克，這是我想我要找的。如果用戶關閉對話框然後再打開它，那麼.load（）jQuery函數會再次檢索數據嗎？我想如果沒有，我總是可以爲此設置一個javascript變量... – 2010-09-13 02:29:25

，你可以在頁面上創建一個空的div

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

設置一個jQuery UI的對話框與的AutoOpen =假;

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

然後當你想要加載動態頁面，使用jQuery的Ajax調用動態地把HTML到的股利，然後調用對話框上的div打開。這裏是一個例子，下面加載一個按鈕點擊動態頁面。

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

另外，如果你的頁面需要同時在Ajax調用加載，你可能需要使用一些加載圖像或jquery blockui plugin表明，一些正在加載

來源

2010-09-12 11:47:35 leora

我會親自爲您的對話框創建一個「視圖」，然後擴展到您生成的對話框中。對於一個測試案例我用下面的「查看」：

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

然後延伸至一個對話框：

$('#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!'); 
});

來源

2016-05-28 18:39:17 Wizard

如何讓jQueryUI對話框動態加載內容

回答

相關問題