ダイアログ内に別のページを読み込む

1

jQuery load()メソッドはお探しのものですか？

2009-04-17 17:58:54 Matt

+0

ため

$('#dialog').load('other_content.html', function(){ $(this).dialog(); }

jQueryのドキュメント私はそれを閉じて再開することなく、さまざまなコンテンツをロードするためにダイアログウィンドウ上の参照を取得する方法がわからないです。 –

+0

PS：ロードしてみたところ、うまくいきませんでした。 –

+0

$（ '＃theDialog'）のようなものを試してみてください。load（ 'someOtherFile.html'）;リンクをクリックすると、リモートファイルの内容が表示されます。ファイルを読み込むにはさまざまな方法がありますが、これは最も単純です。 – Jab

1

あなたはjQueryのつまり・ロード・メソッドを介してファイルを呼び出すと、それはそれはそれは、ウィンドウのダイアログにドロップされたときにロードされたファイルからさらにコンテンツをロードする可能です：

<script> 
$(document).ready(function(){ 
    $("#myDropZone").load("another-file.html"); 
}); 
</script>

このコードは、しなければなりません読み込まれたhtmlコンテンツから返されます。

BTMを使用すると、コンテンツをさまざまな方法で読み込むことができますが、自分が行っていることに気づくことができます。再帰的にファイルをロードしないでください。ループと同じになります。

希望これは私がdiv要素に「その他のコンテンツ」をロードして、ダイアログとしてそのdiv要素を表示することで、過去にこれをやった

出典

2009-04-18 16:04:47

+0

上記の関数は元のページまたはダイアログのhtmlに存在するはずですか？どのページがダイアログ内のイベントに応答するのか、ダイアログ自体、またはそれを呼び出すページはわかりません。 –

+0

申し訳ありませんが、私は明確に書かなかった場合。私はあなたの最初の要求（ダイアログではない）によって呼び出されているページを意味します。 –

4

に役立ちます。 Ajax/load

出典

2009-04-23 12:08:50

+0

ありがとうございますが、私はむしろ他のコンテンツをあらかじめ読み込んでおきません。おそらくページの読み込み時間が遅くなるでしょう。 –

+3

Jon - あなたの答えが正しかったのでOPの応答が私を笑わせてくれたので+1しました！ – CResults

0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" 
     type="text/css" /> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var UIDialogId = 0; 

      $('.UIDialogOpen').live('click', function (e) { 
       e.preventDefault(); 
       alert(this.href); 
       UIDialogId++; 

       $('<div/>', { 
        'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId, 
        'class': 'UIDialog' 
       }).appendTo('body').dialog({ 
        title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message', 
        position: ['center', 'center'], 
        modal: true, resizable: false, zIndex: 10000, autoOpen: true, 
        minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px', 
        minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px', 
        maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px', 
        maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px', 
        close: function (event, ui) { 
         $(this).remove(); 
        } 
       }) 
       .load(this.href); 

       //Or //Use .load(this.href); and comment or delete below append line. 

       //.append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />'); 


       $('.UIDialogClose, .UIDialogCancel').live('click', function (e) { 
        var obj = $(this) 
        e.preventDefault(); 
        obj.parents('.UIDialog').dialog('close'); 
       }); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <a href="your url" title="test1" class="UIDialogOpen">test1</a> 
    <br /> 
    <a href="your url" title="test2" class="UIDialogOpen">test2</a> 
    <br /> 
    <a href="your url" title="test3" class="UIDialogOpen">test3 </a> 
</body> 
</html>

出典

2012-04-27 10:19:36 Thulasiram

+0

をtest1にhref uにリンクする必要があります。それは動作します。 – Thulasiram

+0

あなたが他の私たちのサイトのURLを入れれば、うまくいきません。 – Thulasiram

ダイアログ内に別のページを読み込む

答えて

関連する問題