Question

I’ve gotten used to using the jQueryUI dialogbox wherein I call it via var $dialog = $('#repdia'). I place the div (shown below) on the bottom most part of the page. That was fine when I only had 1 dialogbox to pop out. I’m currently working on different dialogboxes from a single page and it just looks to stacked when I put 3 divs at the bottom to handle 3 different dialogboxes. Is there a way for the widget to pull up the div from a separate page?

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

This is the javascript part:

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

Okay, so I managed to load the page. Follow up questions would be:

1. How do I pass php variables to the dialogbox? I have extracted rows from a MySQL database and I would need to pass them to the dialogbox. (ie. $r_username, $r_subject, etc)
2. How do I set the size of the dialogbox accordingly? I’m planning to use just one javascript code which will load different parts of dialogtest.php depending on which selector they click.

Answer 1

You could make an ajax request with .load() to get the div content from another page before displaying it.

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

Here’s an example with your updated script using GET parameters in the load method. Both do the same thing; pass variables to your php script.

// 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
                });

If you want to use POST, you can use the $.post method.

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