2

PHPとwhileループを使用して動的に作成されたjqery関数を介してフォームを送信しています。フォームは初めて正しく送信され、html を生成して .html(response) を使用して表示します。関数が再び機能するようにコードを複製しますが、機能しません。フォームを 2 回目に送信すると (ページを更新せずに)、フォームから action 属性に送られます。

これはjqueryの制限ですか？

私のコード:

<script type="text/javascript">
$(document).ready(function() {

$("#submit<? echo"$counter$counter";?>").click(function() {

var action = $("#commentform<? echo "$counter$counter";?>").attr('action');
var form_data = {
comment: $("#comment<? echo "$counter$counter";?>").val(),
type: $("#commenttype<? echo "$counter$counter";?>").val(),
typeid: $("#commenttypeid<? echo "$counter$counter";?>").val(),
counter: $("#commentcounter<? echo "$counter$counter";?>").val(),
is_ajax: 1
};

$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
$("#commentarea<? echo"$counter$counter";?>").html(response);
}
});
return false;
});
});
</script>

私が実行しているスクリプトと同じページにある私のフォーム:

<div class="postcommentscomment" style="size:10px; font-family:Verdana, Geneva, sans-serif;">
<form action="php/comment.php" id="commentform<? echo "$counter$counter";?>" method="post" name="comment" target="_self">
<textarea id="comment<? echo "$counter$counter";?>" style="width:162px; height:24px; color:#827e78; font-size:10px;">comment here</textarea>
<div style="float:right; position:relative; margin-top:5px;">
<input id="commenttype<? echo "$counter$counter";?>" type="hidden" value="<? echo $type;?>" />
<input id="commenttypeid<? echo "$counter$counter";?>" type="hidden" value="<? echo $id;?>" />
<input id="commentcounter<? echo "$counter$counter";?>" type="hidden" value="<? echo "$counter$counter";?>" />
<input id="submit<? echo"$counter$counter";?>" type="button" value="comment"/>
</div>
</form>
</div>

action 属性を介した html(response) ページの私のフォーム

<div class="postcommentscomment" style="size:10px; font-family:Verdana, Geneva, sans-serif;">
<form action="php/comment.php" id="commentform<? echo "$counter";?>" method="post" name="comment" target="_self">
<textarea id="comment<? echo "$counter";?>" style="width:162px; height:24px; color:#827e78; font-size:10px;">comment here</textarea>
<div style="float:right; position:relative; margin-top:5px;">
<input id="commenttype<? echo "$counter";?>" type="hidden" value="<? echo $type;?>" />
<input id="commenttypeid<? echo "$counter";?>" type="hidden" value="<? echo $id;?>" />
<input id="commentcounter<? echo "$counter";?>" type="hidden" value="<? echo "$counter";?>" />
<input id="submit<? echo"$counter";?>" type="button" value="comment"/>
</div>
</form>
</div>

注: counter php 変数は、html(response) ページの $counter が元のページの $counter$counter と同等の結果を生成するように設定されています。

コメントを送信すると、コメントがデータベースに挿入され、クエリが実行され、フォームが再生成され、html(応答) を介して元のページに表示されます。その後、新しいコメントを送信しようとすると、アクション ページにリダイレクトされます。「送信」を「ボタン」に変更することでそれを止めましたが、フォームを再度送信できるという、私が望む結果が得られません。

これがjqueryの制限なのか、私のコードの問題なのかはわかりません。

また、コメントは、さまざまな投稿があるページにあります。したがって、複数のコメントフォーム。特定の投稿のコメントの ajax 更新を実行するためのより良い方法があれば、コードを変更することにオープンです。

4

1 に答える 1

5

コードはドキュメントの準備ができたときに実行されます。そのコードを 2 度目に挿入すると、ドキュメントの準備ができて再び起動することはありません。

関数をフォームの送信ハンドラーにアタッチできます...

$('.postcommentscomment form').submit(function() {

    var form_data = $(this).serialize();

    //your ajax call

});

フォームを挿入するたびにこのコードを実行できるはずです。シリアル化関数は、id ですべての入力値を取得するよりも簡単なオプションであり、愚かなインライン PHP カウンター エコーからあなたを救います。

于 2012-08-21T10:57:32.270 に答える