2012-04-30 18 views
3

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> 

答えて

11

あなたは、現在のページにダイアログ容器に別のページからコンテンツをロードしています、実際にここには1ページのみが表示されます。ダイアログソースページから部分的な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 }); 
} 

それとも、あなたはページ全体をリロードすることができます。あなたはこのようにjQueryでui.dialogを拡張することができ

window.location.reload(); 
+1

はこのいただきありがとうございます!私はそれが4年以上経過していることを知っていますが、あなたのコードは私を非常に助けました! – Markoh

2

:今

$.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/