如何從對話框中重新加載jQuery對話框？

我在jQuery Dialog中加載頁面。 ajax命令完成後，我希望能夠重新加載jQuery Dialog中的同一頁面。如何從Dialog中加載的頁面內重新加載jQuery Dialog？如何從對話框中重新加載jQuery對話框？

父頁（Blah.aspx）：

<script type="text/javascript"> 
    function view_dialog() { 
     $('#dialog').load('blah2.aspx').dialog({ 
      title: 'test' , 
      modal: 'true', 
      width: '80%', 
      height: '740', 
      position: 'center', 
      show: 'scale', 
      hide: 'scale', 
      cache: false }); 
    } 
</script> 

<asp:Content 
    ID="Content2" 
    ContentPlaceHolderID="ContentPlaceHolder1" 
    runat="server"> 

    <input id="Button1" onclick="view_dialog()" type="button" value="button" /> 
    <div id="dialog" style="display: none"></div> 

</asp:Content>

對話內容頁面（blah2.aspx）：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     function doit() { 
      var request = $.ajax({ 
       url: "someurl", 
       dataType: "JSON", 
       data: { 
        a: 'somevalue' 
       } 
      }); 

      request.done(function() { 
      //refresh the current dialog by calling blah2.aspx again 
     }); 
    }  
</script> 

<asp:Content 
    ID="Content2" 
    ContentPlaceHolderID="ContentPlaceHolder1" 
    runat="server"> 

    <input id="Button1" onclick="doit()" type="button" value="button" /> 

</asp:Content>

來源

2012-04-30 Rob

您正在加載從另一個網頁內容到對話框容器在當前頁面，所以這裏真的只有一個頁面。我建議只從對話框源頁面加載部分html（沒有<head>或<body>標籤）。

所以，你可以摧毀對話框並重新創建它重新加載對話內容：

function reload_dialog() 
{ 
    $('#dialog').dialog('destroy'); 
    view_dialog(); 
} 

function view_dialog() { 
    $('#dialog').load('blah2.aspx').dialog({ 
     title: 'test' , 
     modal: 'true', 
     width: '80%', 
     height: '740', 
     position: 'center', 
     show: 'scale', 
     hide: 'scale', 
     cache: false }); 
}

或者，您可以重新加載整個頁面。

window.location.reload();

來源

2012-04-30 20:35:45 jrummell

謝謝！我知道這已經過了4年，但是你的代碼非常幫助我！ – Markoh

可以在jQuery的延長ui.dialog這樣的：

$.ui.dialog.prototype.options.url; // Define a new option 'url'

現在，你可以更換整個對話「創造」，因此它會自動加載URL，並確定新的「刷新」選項：

// Replace the _create event 
    var orig_create = $.ui.dialog.prototype._create; 
    $.ui.dialog.prototype._create = function(){ 
     orig_create.apply(this,arguments); 
     var self = this; 
     if(this.options.url!=''){ 
      self.element.load(self.options.url); // auto load the url selected 
     }; 
    }; 

    $.widget("ui.dialog", $.ui.dialog, { 
     refresh: function() { 
      if(this.options.url!=''){ 
       this.element.load(this.options.url); 
      } 
     } 
    });

你最後的功能應該是這樣的：

// Note the "url" option. 
function view_dialog() { 
    $('#dialog').dialog({ 
     url:'blah2.aspx', 
     title: 'test' , 
     modal: 'true', 
     width: '80%', 
     height: '740', 
     position: 'center', 
     show: 'scale', 
     hide: 'scale', 
     cache: false }); 
} 


// refresh: 
$('#dialog').dialog("refresh");

您可以在此小提琴中看到最終代碼：http://jsfiddle.net/WLg53/1/

來源

2014-05-08 13:21:19 Phoenix

如何從對話框中重新加載jQuery對話框？

回答

相關問題