Пусть диалоговое окно jQueryUI отображает div с отдельной страницы (и передает переменные php) - PullRequest
Новая
       27

Пусть диалоговое окно jQueryUI отображает div с отдельной страницы (и передает переменные php)

0 голосов
/ 27 января 2012

Я привык использовать диалоговое окно jQueryUI, в котором я вызываю его через var $dialog = $('#repdia'). Я помещаю div (показанный ниже) в самую нижнюю часть страницы. Это было хорошо, когда у меня было только 1 диалоговое окно, чтобы выскочить. В настоящее время я работаю над различными диалоговыми окнами с одной страницы, и это выглядит просто сложенным, когда я помещаю 3 деления внизу для обработки 3 различных диалоговых окон. Есть ли способ для виджета вытащить div с отдельной страницы? 

<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]

Хорошо, мне удалось загрузить страницу. Следующие вопросы будут:

  1. Как передать переменные php в диалоговое окно? Я извлек строки из базы данных MySQL, и мне нужно будет передать их в диалоговое окно. (т. е. $ r_username, $ r_subject и т. д.)
  2. Как мне соответственно установить размер диалогового окна? Я планирую использовать только один код JavaScript, который будет загружать различные части dialogtest.php в зависимости от того, какой селектор они нажимают.

Ответы [ 2 ]

1 голос
/ 27 января 2012

Вы можете сделать ajax-запрос с .load(), чтобы получить содержимое div с другой страницы перед его отображением. 

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

Вот пример с вашим обновленным скриптом, использующим параметры 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
                });
});
0 голосов
/ 29 января 2012

Функция загрузки jQuery позволяет загружать только фрагменты страницы.Смотрите официальную документацию по API здесь: http://api.jquery.com/load/

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