将Div ID传递给jquery/ajax,为每个特定用户显示一条消息


Pass Div ID to jquery/ajax to display a message for each specific user

我有一个页面,可以在其中检索和显示每个客户端的详细信息
用户可以选择更新每个客户端的状态。

目前我使用ajax来更新每个客户端的状态,这样页面就不会被刷新。

唯一的问题是,我有一个状态列,其中显示客户端的状态,由于页面没有刷新,客户端的状态在数据库中发生了更改,但这不会反映/显示在页面上。

我试图克服这个问题,但没有成功。

有人知道我是怎么做到的吗?

我当前的脚本:

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);
        }
    });
}​;​

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

试着构建这样的HTML:

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

像这样的javascript:

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

这至少有可能奏效,但也更高效,因为提交事件处理被委托给表,总共只有一个事件处理程序,而不是每个表单一个。。。加上HTML的相关简化。

保持现状。。您只需简单地在文档就绪事件上调用函数即可。。

像这样。。

<script>
    $(document).ready(function() {
    //pass formid
    processForm(clientDetails)
});
</script>

希望这会有所帮助。。。

否则甜菜根甜菜根的帮助也是有效的。