Foreach行jQuery对话框

Question

I am building a div that is part of the homepage of a website. This div display a list of projects. The projects are all saved in a MySQL database. What I am trying to do is create a button next to each row that says 'Delete'. After clicking on delete, the user should be prompted with a jQuery UI dialog box asking for confirmation. When the confirms to delete the project, the project id has to be sent to a delete page(let's call it delete.php).

What I got working so far

• Get list of projects from MySQL and display each of them as a row
• Added a delete button at the end of each row
• When the delete button is clicked, the dialog box is shown, asking for confirmation
• When the user confirms deletion of project, he is sent to the delete page.

This is where I am stuck though. On the deletion page I echo the project id to see if it works. Somehow the delete.php page always echo's the id of the first project. Meaning that jquery always sends the first project's id.

How can I solve this mystery?

$currents    =   new Project();
$currents    =   $currents->getProjects($_SESSION["user"], "finished");
echo "<table>";
foreach($currents as $current){
 echo "<tr><td>" . $current["name"] . "</td>
 <td><form method='post' class='deleteproject' action='/requests/request.php'/>
 <input type='hidden' name='projectid' value='" . $current['id'] . "' />
 <input type='button' value='Delete' class='deleteproject'></form></td></tr>";

}
echo "</table>";

Here is the jQuery;

<script>
  $(function()
  {
      $( ".deleteproject" ).click(function() {
          $( "#dialogbox" ).attr('title', 'Are you sure you want to delete this project?').dialog({
              height: 100,
              width: 350,
              modal: true,
              buttons : {
                  "Confirm" : function() {
                      $('.deleteproject').submit();
                  },
                  "Cancel" : function() {
                      $(this).dialog("close");
                  }
              }
          });
          return false;
      });
  });
  </script>

Answer 1

When doing $('.deleteproject').submit();, you always send the first .deleteproject and not the one clicked. To solve that, you can save the this reference and submit your parent form.

$( ".deleteproject" ).click(function() {
  $this = $(this);
  $( "#dialogbox" ).attr('title', 'Are you sure you want to delete this project?').dialog({
      height: 100,
      width: 350,
      modal: true,
      buttons : {
          "Confirm" : function() {
              $this.closest('form').submit();
          },
          "Cancel" : function() {
              $(this).dialog("close");
          }
      }
  });

---

side note : Your form class name is also .deleteproject, so your function will fire even if you dont click on the button, but on the form. Also, (not sure about this) i think your script will fire twice because of the event bubbling. A click on the button deleteproject is also a click on the form deleteproject.