将Div ID传递给jquery / ajax以显示每个特定用户的消息

Question

I have a page where I retrieve and display details of each client.
There is an option for users to update the status of each client.

Currently I use ajax to update the status of each client so the page wont be refreshed.

Only problem with this is that I have a status column where status of the client is displayed and as the page doesn't get refreshed the status of client is changed in the database but this does not reflect/show on the page.

I have tried to overcome this problem without success.

Does anyone know how I could achieve this?

My current script:

function processForm(formId) {
    $.ajax({
        type: 'POST',
        url: 'form_process.php',
        data: $("#" + formId).serialize(),
        success: function(data) {




            var $row = $(this).closest("tr");
            var $div = $row.find("div.msg");
            $div.css("background", "#f00");
            $div.html(data);
        }
    });
}​;​

and HTML:

<table width="787" border="1">
    <tr>
      <td>FORM 1</td>

      <td>
        <div id='msg' class='msg'></div>
      </td>

      <td>
        <form action="" name="form1" id="form1" method="post" onsubmit=
        "processForm('form1');return false;">
          <input type="text" name="user_name" id="user_name" value="" /> <input type=
          "text" name="surname" id="surname" value="" /> <input type="submit" name=
          "submit" value="submit" />
        </form>
      </td>
    </tr>

    <tr>
      <td>FORM2</td>

      <td>
        <div id='msg' class='msg'></div>
      </td>

      <td>
        <form action="" name="form2" id="form2" method="post" onsubmit=
        "processForm('form2');return false;">
          <input type="text" name="user_name" id="user_name" value="" /> <input type=
          "text" name="surname" id="surname" value="" /> <input type="submit" name=
          "submit" value="submit" />
        </form>
      </td>
    </tr>

    <tr>
      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>
    </tr>
</table>

Answer 1

Try constructing the HTML like this:

<table id="clientDetails" width="787" border="1">
<tr>
<td>FORM 1</td>
<td class='msg'></td>
<td><form>
<input type="text" name="user_name" value="" />
<input type="text" name="surname" value="" />
<input type="submit" name="submit" value="submit"/>
</form></td>
</tr>
<tr>
<td>FORM2</td>
<td class='msg'></td>
<td><form>
<input type="text" name="user_name" value="" />
<input type="text" name="surname" value="" />
<input type="submit" name="submit" value="submit"/>
</form></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

And the javascript like this:

$(function() {
    $("#clientDetails").on('submit', 'form', function() {
        var $form = $(this);
        $.ajax({
            type: 'POST',
            url: 'form_process.php',
            data: $form.serialize(),
            success: function(data) {
                $form.closest("tr").find(".msg").css("background", "#f00").html(data);
            }
        });
        return false;
    });
});

This at least stands a chance of working but is also more efficient in that submit event handling is delegated to the table with just one event handler in total instead of one per form ... plus associated simplification of the HTML.