从ajax POST函数调用jquery-ui对话框

Question

In a project I'm working on, I've decided to use the jQuery UI dalog modal for reading messages. The whole point was to make it so there is no page refresh. I can call the dialog if I use:

<?php if (isset($_GET['var'])) ?>

But that means reloading the page the set the $_GET[] value.

Both of these functions work separately. The question I have is how can I call the dialog function on success from the Ajax call.

I use the dialog to show the message:

$(function() {
            $( '#dialog-modal' ).dialog({
                show: { effect: "fade", duration: 400 },
                hide: { effect: "fade", duration: 400 },
                modal: true,
                title: "Reading Message",
                dialogClass: "no-close",
                buttons: { "Close Message": function() { $(this).dialog("close"); } },
                position: { my: "top", at: "top", of: window },
                width: 500
                });
        });

And this function sends the data to a PHP page where it pulls the message info:

function message_popup(messageID, userID)
        {
            $.ajax({
                type: 'GET',
                url: 'actions.php?type=readmessage',
                data: 'messid=' + messageID + '&user=' + userID,
                async: false,
                success: function(msg){
                    console.log(msg);
                }
            });
        }

In the console, it shows it's pulling the right info, and even shows the whole DIV element, like this:

<div id='dialog-modal'>
        <table style='width: 480px;'>
            <tr>
                <td style='width: 20%; text-align: left;'>
                    Sender:
                </td>
                <td style='text-align: center;'>
                    Admin
                </td>
            </tr>
            <tr>
                <td style='width: 20%; text-align: left;'>
                    Subject:
                </td>
                <td style='text-align: center;'>
                    No Subject
                </td>
            </tr>
            <tr>
                <td style='width: 20%; text-align: left; vertical-align: top;'>
                    Message:
                </td>
                <td style='text-align: center;'>
                    Just trying to see why the enter is showing up so weird. I guess it could be something to<br />do with the escaping method but I can&#039;t be sure. Hopefull I can fix it.
                </td>
            </tr>
        </table>
    </div>

So, all the information is there, it just doesn't display anything on the screen.

Answer 1

Wrap ajax result inside jquery object and call dialog method on it: (in success callback)

$(msg).dialog({...});