jQuery.post() issues with passing data to jQuery UI

Question

Hello,

I am trying to get jQuery.post() to run my php script and then open a jQuery UI dialog with the data that php script returns. Its supposed to come back as a form with a table and a textarea in it. It works great with alert(data); and i get a pop-up with all my data.

The problem starts if i turn off alert(). Now it opens 2 dialogs. One containing only the table, without textarea, and the second one absolutely empty.

What am i doing wrong here? How come all my data shows up in the alert(), but not in dialog? What do i need to do to fix it?

Oh, and do i need to also include $.ajax() before the $.post()?

Thank you.

 $.post("/path/to/script.php", 
               { id: this.id, value: value },
               function(data){

                     // THIS WORKS
                     //alert(data);

                     // THIS DOES NOT WORK
                     $(data).dialog({ 
                             autoOpen: true,
                             width: 400,
                             modal: true,
                             position: 'center',
                             resizable: false,
                             draggable: true,
                             title: 'Pending Changes'
                    });
               }



   );

Answer 1

You don't need another $.ajax() call. The $.post() method is a wrapper shortcut to $.ajax(). What might be happening is you may be getting both default behavior and Javascript bound behavior. I'm assuming this $.post action triggered on a click. If so, then at the very end of your $.click() handler you need to return false to prevent default behavior.

$('input[type=submit]').click(function() {
    $.post( /* ... */ );
    return false;
});

Answer 2

This is how I handle it. I have a empty div and initialize the dialog upon document ready. Now on the ajax return load that div's html with the data received from PHP and call the "open" method of dialog. Simple and definitely works.

HTH

Answer 3

Ah! This was not a problem with the JS, but my php file.

The textarea was sitting outside of <div>blah blah</div>.

Problem solved.