0

私は自分のフィードでajaxingの最終段階にあります。そして、これはおそらくコメント入力の単純な貼り付けだと思っていましたが、私は間違っていました。

メインのajaxedステータスの下に入力を挿入したので、ユーザーがステータスを追加すると、ajaxedステータスがフィードに入り、ajaxedステータスをクリックしてajaxedコメントを書き込むことができます。ユーザーがコメントを送信したら、コメントをajaxで追加する必要があります。しかし..ページが更新され、コメントはまったく追加されません。

私が「やろうとしている」ことを理解したことを願っています。

メインステータスAJAX-フォームのIDは、コンテンツを追加するいくつかのajaxに入ります。

  <script>
    $(document).ready(function(){
    $("form#myform").submit(function(event) {
    event.preventDefault();
    var content = $("#toid").val();
    var newmsg = $("#newmsg").val();

    $.ajax({
    type: "POST",
    url: "insert.php",
    cache: false,
    dataType: "json",
    data: { toid: content, newmsg: newmsg }, 
    success: function(response){ 
     $("#newmsg").val(""); 
    $("#homestatusid").html("ALL MY MAIN STATUS GOES HERE
<div class='stream_comment' id='comment_"+response['comment_id']+"' style='margin-top:0px;'>\
<div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'>\
<div id='comment_list_"+response['streamitem_id']+"'><table width=100%><tr><td valign=top width=30px>\
<img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>\
    <td valign=top align=left><div class='stream_comment_inputarea'><form id='mycommentform' method='POST'  class='form_statusinput'>\
    <input type='hidden'  name='streamidcontent' id='streamidcontent' value='"+response['streamitem_id']+"'>\
    <input type='input' name='commentingcontents' id='commentingcontents' placeholder='Say something' autocomplete='off'>\
    <input type='submit' id='button' value='Feed'><br/></div></div>");
    }
    });
    return false
    });
    });
    </script>

上記のajaxの下の同じページにAJAXをコメントします。

<script>
$(document).ready(function(){
    $("form#mycommentform").submit(function(event) {
        event.preventDefault();
        var streamidcontent = $(this).children("#streamidcontent").val();
        var commentingcontents = $(this).children("#commentingcontents").val();

        $.ajax({
            type: "POST",
            url: "comment_add.php",
            cache: false,
            dataType: "json",
            data: { streamidcontent: streamidcontent, commentingcontents: commentingcontents }, 
            success: function(data){  
                $("#comment_list_"+data.comment_streamitem).append('<div class="stream_comment" id="comment_'+data['comment_id']+'" style="margin-top:0px;">\
                <table width=100%><tr><td valign=top width=30px><img class="stream_profileimage" style="border:none;padding:0px;display:inline;" border=\"0\" src=\"imgs/cropped'+data['comment_poster']+'.jpg\" onerror="this.src=\"img/no_profile_img.jpeg\"" width=\"40\" height=\"40\" ></a><td valign=top align=left>\
                <a href="/profile.php?username='+data['username']+'">'+data['first']+' '+ data['middle']+' '+data['last']+'<div style="font-size:10px;">'+data['comment_datetime']+'</div></a>\<div class="commentholder">'+data['comment_content']+'</div><br/>\<div id="commentactivitycontainer"><a style="cursor:pointer;" onClick=\"deletecomment('+data['comment_id']+',comment_'+data['comment_id']+');\">Delete</a><a id="likecontext_'+data['comment_id']+'" style="cursor:pointer;" onClick=\"likestatuscomment('+data['comment_id']+',this.id);\"><div style="width:80px; position:relative;  float:left; left:40px" id="likescommentprint'+data['comment_id']+'">Like</div></a><div style="width:80px; position:relative;  float:left; left:40px" id="likescommentprint'+data['comment_id']+'"></div></form><a id="dislikecontext_'+data['comment_id']+'" style="cursor:pointer;" onClick=\"dislikestatuscomment('+data['comment_id']+',this.id);\"><div style="width:90px; position:relative;top:-0px; float:left; left:200px" id="dislikescommentprint'+data['comment_id']+'">Dislike</div></a><div style="width:90px; position:relative; top:-0px; float:left; left:200px" id="dislikescommentprint'+data['comment_id']+'"></div></form></div></div></table></div></div></div></div></table></div></div>\<div class="stream_comment_holder" style="display:;"></b></div>');
            }
        });
        return false
    });
});
</script>

クリックハンドルの例

    <?
if (isset($_POST['commentingcontents'])) {
    echo form();
    return;
}
function form() {
  echo '<div class="form">
<form id="mycommentform" method="POST"  class="form_statusinput">
<input type="hidden"  name="streamidcontent" id="streamidcontent" value="'.$streamitem_data['streamitem_id'].'">
<input type="input" name="commentingcontents" id="commentingcontents" placeholder="Say something" autocomplete="off">
<input type="submit" id="button" value="Feed">
</form>
</div>';
}
?>
4

2 に答える 2

2

成功関数に追加したフォーム「mycommentform」は、JavaScriptイベントにバインドされません。したがって、送信すると、修正されず、ページ全体が再読み込みされます。

現在のjQueryバージョンは、これを自動的にアーカイブするための.on（）メソッドを提供します。

変更するだけ

$("form#mycommentform").submit(function(event) {

に

$("body").on("submit", "form#mycommentform", function(event) {

COMMENT AJAXセクションで、委任されたイベントハンドラーを作成します。

于 2012-08-28T13:19:02.323 に答える
0

jqueryにいくつかのsytaxエラーが含まれていると思いますエラーコンソールを確認してください

セミコロンの後に「returnfalse」ステートメントを追加するのを忘れたと思います

ajaxリクエストが機能していることを確認しますajax成功関数内にalert（）ボックスを配置し、機能しているかどうかを確認します

于 2012-08-28T13:19:04.243 に答える