0

編集

いくつか重要な点を忘れていました。

  1. これは、ページを更新する必要がなくなり、ページの上部に戻るのを防ぐためです。

  2. ajax 関数の成功関数は、新しい div id="comments" 全体をキックバックして、既存のものをエラー メッセージまたは新しいコメントのいずれかに置き換えます。

編集終了

私はラップの下でこのjquery-ajax関数を試みましたが失敗しました。ページに X 個の投稿があり、各投稿の下にコメントを挿入するためのフォームがあります。私はかなり近いと思い、firebugを使用してデバッグしようとしましたが、正直なところ、firebugで何を見ているのか、何を求めているのかよくわかりません。

すべてのコードは以下のとおりです。

HTML のフォームと構造 (反復フォームのため、出力スクリプトでコメント後の各パーティションを繰り返すのではなく、親 jquery 選択メソッドを使用する必要があると思います)

    <div id="content_body_right">
        <div id="activity">
            ....this is the area for each post....
        </div>
        <div id="comments">
            <p class="comments_label">' . $reply_count . ' Comment</p>
            <div id="comment1">
                <div id="comment_user_img">
                    ' . $imgOutputReply . '
                </div>
                <div id="comment_user">
                    <p class="user_text_comment">' . $firstNameReply . ' ' . $lastNameReply . '</p><p class="date_text_comment">' . $date_timeReply . '</p>
                    <p class="message_text_comment">' . $messageReply . '</p>
                </div>
            </div>
            <div id="add_comment">
                <form id="formAddComment" action="dashboard.php" enctype="multipart/form-data" method="post">
                <div id="add_comment_left">
                    <textarea id="comment" name="comment" cols="75" rows="2">Add a Comment...</textarea> 
                </div>
                <div id="add_comment_right">
                    <input id="userID" name="userID" type="hidden" value="' . $userID . '" />
                    <input id="actID" name="actID" type="hidden" value="' . $actID . '" />
                    <input id="btnComment" name="btnComment" type="submit" value="" title="Add Comment" />
                </div>
                </form>
            </div>
        </div>
    </div>

さて、JQuery マークアップ

    <script type="text/javascript">
        $(document).ready(function(){
            $("#formAddComment").submit( function(e) {
                e.preventDefault();
                var form = $(this);
                var div_add_comment = form.parent();
                var div_comments = div_add_comment.parent();
                $.ajax({
                    type: "POST",
                    data: form.serialize(),
                    url: "includes/comment.php",
                    success: function(msg){
                        $div_comments.html(msg);
                    }
                });
                return false;
            });
        });
    </script>

最後に、外部 php スクリプト (注: データ フィードを php 変数にローカライズする最初の行のみを投稿します。)

    if(isset($_POST['actID'])){
        $actID = mysql_real_escape_string($_POST['actID']);
        $userID = mysql_real_escape_string($_POST['userID']);
        $comment = mysql_real_escape_string($_POST['comment']);
          ............other processing here...........
    }

ほとんどの場合、jquery スクリプトが疑わしいです。

再度、感謝します、

4

4 に答える 4

1

一般的な構造をhttp://jsfiddle.net/cori/JsLWq/の jsfiddle にドロップしました。フォームを送信するhttp://fiddle.jshell.net/cori/JsLWq/show/includes/comment.phpと、相対 ajax URL のために存在しないものに ajax POST が実際に取得されるため、そうではありません。私が知る限りの問題。問題は、変数の命名規則を混在させていることだと思います

プレーンな古い JavaScript オブジェクトのように、変数に名前を付けることから始めます。

var form = $(this);
var div_add_comment = form.parent();
var div_comments = div_add_comment.parent();

$xしかし、成功ハンドラーでは、変数が jQuery インスタンスであることを示すためによく使用される、かなり一般的な規則に切り替えます。

$div_comments.html(msg);

ただし、その時点では変数はありません$div_comments。のみdiv_commentsajax エラー ハンドラを含むhttp://jsfiddle.net/cori/JsLWq/1/でフォームを送信し、firebug コンソールを見ると、$div_comments未定義のため ReferenceError が発生することがわかります。

編集

kgarrigan の提案を取り入れて、作成するフォームを php でループし、インデックスを使用して位置を追跡する場合、フォームの名前をインデックスで変更できるため、フォームの php/html コードは次のようになります。

<form id="formAddComment-' . $index . '" action="dashboard.php" enctype="multipart/form-data" method="post">

そのため、 のような ID を持つフォーム要素になってしまいますformAddComment-1

次に、jquery でstartsWithセレクターを使用してすべてのフォームを選択し、submit イベントをそれらにバインドします。

$('[id^="formAddComment"]').submit( function(e) {
    // do your ajax
});

そうすれば、各フォームには独自の送信ハンドラーがあります。

于 2013-02-13T06:19:36.080 に答える
0

ファイアバグでは、コンソールをクリックしてから、すべてをクリックします。ボタンをクリックしてajax呼び出しをトリガーすると、行がポップアップ表示されます。おそらく、POSTリクエストが送信されていることを示す読み込みアイコンが表示されます。タブをクリックして、投稿されているデータ、提供されている応答、および応答ステータスコードを確認できるはずです...

あなたの編集では、成功関数は既存のものを置き換えるために新しいdiv id = "comments"を送信すると言いますが、今書いているように、既存のものの中にdiv id="comments"を追加するだけだと思います1。しかし、これがあなたの問題を引き起こすかどうかはわかりません。

于 2013-02-13T04:53:12.377 に答える
0

jquery はセレクターで動作します。$(something) と書くと、何かがセレクターになります。ID、クラス名、変数、html 要素を指定できます。だから代わりに

$("#formAddComment").submit( function(e) {

あなたが使用することができます

$(".someclassName").submit( function(e) {

css と同じように、ID には # を使用します。授業のために。クラス属性を同じ名前でフォームに追加してください。あなたも試すことができます

$("form").submit(function(e) {

フォーム要素を選択する必要があります。直接参照の代わりに「this」とparent()を使用しているため、関数の残りの部分はこの変更で正常に機能するはずです。

于 2013-02-13T07:48:08.747 に答える
0

同じページに複数のフォームがあり、ID が同じであると、問題が発生します。特に、submit() 呼び出しに付加される # formAddComment id。これらの ID が複数ある場合、これは機能しません

于 2013-02-13T07:05:30.360 に答える