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

Are you creating the dialog before this? Also unsure why you're doing a POST then a GET of the same URL? — Nick Craver
– Nick Craver, Commented Jun 5, 2010 at 10:07
I am trying to post the data to player/index.php and have that page open up in a dialog with the posted data within — user342391
– user342391, Commented Jun 5, 2010 at 10:10
the ui dialog should open kind regardless if #recordingdialog is a div which is placed in your markup and you including all dialog ui dependencies. — jAndy
– jAndy, Commented Jun 5, 2010 at 10:11

Nick Craver · Accepted Answer · 2010-06-05 10:20:20Z

4

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

edited Jun 5, 2010 at 10:20

answered Jun 5, 2010 at 10:12

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user342391 Over a year ago

This works nicely. But when I close the dialog and click to open it again nothing happens any ideas why o masterful nick

Nick Craver Over a year ago

@user that shouldn't be the case...is there anything else messing with that #recordingdialog element?

user342391 Over a year ago

Yep I had a header included in the top of the player/index.php file. removed it and everything is fine. YOU THE MAN!!!!

jAndy · Accepted Answer · 2010-06-05 10:29:01Z

0

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

edited Jun 5, 2010 at 10:29

answered Jun 5, 2010 at 10:17

jAndy

237k57 gold badges313 silver badges363 bronze badges

3 Comments

Nick Craver Over a year ago

This approach leaves a blank dialog waiting for the content to load, then will flash when it does, I don't believe this is an approach that should be used....also check your $.post() call, it's not valid :)

jAndy Over a year ago

I guess this approach is way better than just letting nothing happen after pressing the button. It's maybe a good idea to insert some kind of loading gif into the dialog on opening.

Nick Craver Over a year ago

Your current answer throws a javascript syntax error, so it's not better yet ;)

user342391 · Accepted Answer · 2010-06-05 10:52:52Z

0

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

answered Jun 5, 2010 at 10:52

user342391

7,86723 gold badges68 silver badges88 bronze badges

Collectives™ on Stack Overflow

Pass data via ajax to dialog Jquery

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related