Pass data via ajax to dialog Jquery

Question

I am trying to post data from my form to a jquery dialog that loads external content.

I am serializing the form data which works (appears in the url) but the dialog won't open:

      $("#wavajax button").click(function() {
  $.post({url: 'player/index.php', data: $("#wavajax").serialize(), 
         success: function (data) {

                     $("#recordingdialog").load("player/index.php", [], function(){
               $("#recordingdialog").dialog("open");

                 }
  });
  return false;
});

What am I doing wrong, am I going about it the right way???

Answer 1

I think this is what you're after:

$("#wavajax button").click(function() {
  $.post('player/index.php', $("#wavajax").serialize(), function (data) {
       $("#recordingdialog").html(data).dialog("open");
  });
  return false;
});

You're already getting the HTML content back from the POST (or at least I would think this is the case), so just put that response in the #recordingdialog using .html() and then make the dialog call. If you're not previously creating a dialog with options, then just .dialog() will suffice, .dialog('open') is intended for when you created the dialog earlier with various options and want to now open it, like this:

$("#recordingdialog").dialog({
  //other options, width, height, etc...
  autoOpen: false
});

You can find a full list of these options here

Answer 2

Its maybe a better idea to first display the dialog and load the content.

$('#recordingdialog').dialog('destroy'); // just in case
$('#recordingdialog').dialog({
   position: 'center',
   // some more options
   open:  function(e, ui){
        $.post('player/index.php', data: $("#wavajax").serialize(),function (data){   
              $("#recordingdialog").html(data);   
        });
   }
});

within your click handler.

UI Dialog Doc

Answer 3

Ok I have it working with this:

      $("#recordingdialog").dialog({
  //other options, width, height, etc...
     modal: true,
      bgiframe: true,
      autoOpen: false,
      height: 550,
      width: 550,
      draggable: true,
      resizeable: true,
      title: "Play Recording",});


$("#wavajax button").click(function() {
  $.post('player/index.php', $("#wavajax").serialize(), function (data) {
       $("#recordingdialog").html(data).dialog("open");
  });
  return false;
});

Thanks Nick! But have one issue. When I close the dialog and click on the button to open it again nothing happens why not???