1

各クライアントの詳細を取得して表示するページがあります。
ユーザーが各クライアントのステータスを更新するオプションがあります。

現在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>
4

2 に答える 2

1

次のように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;
    });
});

これは少なくとも機能する可能性がありますが、送信イベント処理がフォームごとに1つではなく、合計1つのイベントハンドラーでテーブルに委任されるという点でより効率的です...さらにHTMLの関連する簡略化。

于 2012-08-22T00:07:17.090 に答える
0

ただあなたが何であるかにとどまります..ドキュメント準備完了イベントで関数を呼び出すだけです..

このような..

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

});
</script>

これが役立つことを願っています...

それ以外の場合は、Beetroot-Beetroot ヘルプも機能します。

于 2012-08-22T04:58:23.063 に答える