jQueryUI對話框顯示一個div從一個單獨的頁面（並通過php變量）

我已經習慣了使用jQueryUI對話框，其中我通過調用它。我將div（如下所示）放在頁面的最底部。這很好，當我只有1個對話框彈出。我目前正在一個頁面上處理不同的對話框，當我在底部放置3個div來處理3個不同的對話框時，它只是看起來堆疊起來。有沒有一種方法讓小部件從單獨的頁面上拉出div？jQueryUI對話框顯示一個div從一個單獨的頁面（並通過php變量）

<div id="repdia" title="Compose reply"> 
<form action="<?echo $currURL;?>" method="post"> 
<table> 
    <colgroup> 
     <col width="10%" /> 
     <col width="90%" /> 
    </colgroup> 
    <tr> 
     <td><span class="bol">To:</span></td> 
     <td><input type="text" name="recipient" /></td> 
    </tr> 
    <tr> 
     <td><span class="bol">Subject:</span></td> 
     <td><input type="text" name="subject" maxlength="60" /></td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td colspan="2"> 
     <p><textarea name="content"></textarea> 
     </p> 
     </td> 
    </tr> 
</table> 
<table> 
<tr> 
    <td colspan="2"> 
    <span class="diabut"> 
     <input name="sendmsg" type="hidden" value="go" /> 
     <input type="submit" value="Send message" />&nbsp;<button id="clodia">Cancel</button></span> 
     </td> 
</tr> 
</table> 
</form> 
</div>

這是JavaScript部分：

$(function() { 
    var $dialog = $('#repdia').load("dialogtest.php") 
      .dialog({ 
       autoOpen: false, 
       resizable: false, 
       modal: true, 
       height: 360, 
       draggable: true 
      }) 

    $('.repope').click(function (e) { 
     $dialog.dialog('open'); 
     e.preventDefault(); 
    }); 

    $('#clodia').click(function() { 
     $(this).closest('form').find("input[type=text], input[type=hidden], textarea").val(""); 
     $dialog.dialog("close"); 
     return false; 
    }); 
});

[UPDATE]

好了，所以我設法加載頁。後續問題將是：

如何將php變量傳遞給對話框？我從MySQL數據庫提取了行，我需要將它們傳遞給對話框。（即$ r_username，$ r_subject等）
如何相應地設置對話框的大小？我打算只使用一個JavaScript代碼，它將加載dialogtest.php的不同部分，具體取決於他們點擊哪個選擇器。

來源

2012-01-27 Mike Sanchez

您可以通過.load()進行ajax請求，在顯示它之前從其他頁面獲取div內容。

$('#repdia').load("path/to/other/page", function() 
{ 
    $('#repdia').dialog(); 
});

下面是在load方法中使用GET參數更新腳本的示例。兩者都做同樣的事情;將變量傳遞給你的PHP腳本。

// using query string parameters 
var $dialog = $('#repdia').load("dialogtest.php?param1=a&param2=b") 
       .dialog({ 
        autoOpen: false, 
        resizable: false, 
        modal: true, 
        height: 360, 
        draggable: true 
       }); 

// using the data parameter 
var $dialog = $('#repdia').load("dialogtest.php", {param1: "a", param2: "b"}) 
       .dialog({ 
        autoOpen: false, 
        resizable: false, 
        modal: true, 
        height: 360, 
        draggable: true 
       });

如果你想使用POST，你可以使用$.post方法。

$.post("dialogtest.php", {param1: "a", param2: "b"}, function(data) { 
    $('#repdia').html(data) 
       .dialog({ 
        autoOpen: false, 
        resizable: false, 
        modal: true, 
        height: 360, 
        draggable: true 
       }); 
});

來源

2012-01-27 19:16:47 jrummell

會得到整個頁面雖然????? – 2012-01-27 19:27:26

是的。我只是需要它來獲得帶有'repdia'的整個div。我可能傾向於將所有對話框div放在一個頁面中。 – 2012-01-27 19:29:03

是的，但您可以加載僅包含對話框所需標記的「部分」頁面。 – jrummell 2012-01-27 19:33:44

jQuery的加載函數允許您只加載頁面片段。在這裏看到他們的官方API文檔：http://api.jquery.com/load/

$('#dialogContainer').load("path/to/other/page #repdia", function() { 
     $('#dialogContainer').dialog(); 
});

來源

2012-01-29 04:09:34 PriorityMark

只需跟進一次，我是否也可以通過$ _post變量從頁面啓動對話框？ – 2012-01-29 06:01:41

jQueryUI對話框顯示一個div從一個單獨的頁面（並通過php變量）

回答

相關問題