Question

I am using the following code to post my form data to player/index.php and open it in a dialog. Because I have multiple of these forms in my table I need to use $(this).

But now it doesn’t open in a dialog.

New code (doesn’t open dialog but display data in url):

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

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

Old code (only works on one form):

      $("#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;
});

Answer 1

Instead of .attr() what you want is .closest(), like this:

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

This gets the closest parent element that’s a <form>…so the <form> you’re currently in 🙂 Also instead of $(this) as your selector for the click I think you meant any of these buttons, if that’s the case give them a class like <button class="dialogBtn"> and use that selector, like this:

$(".dialogBtn").click(....);