Question

我正处于我的饲料中的最后阶段。虽然我认为这可能是评论输入的简单粘贴我错了。

我在主要的ajaxed状态下插入了我的输入，所以当用户添加状态时，ajaxed状态会进入他们的feed，然后他们可以点击ajaxed状态并写一条ajaxed注释。一旦用户提交评论，评论就应该添加ajax。但是页面已刷新，根本没有添加任何评论。

希望我已经理解了我'试图'做的事情。

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

COMMENT 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>';
}
?>

Answer 1

您在成功函数中添加的“mycommentform”形式不会绑定到任何javascript事件。因此，如果你提交它，它不是ajaxed并重新加载整个页面。

当前的jQuery版本提供了.on()方法来自动实现此目的。

只需更改

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

到

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

在你的COMMENT AJAX部分中有一个委托的事件处理程序。

Answer 2

我认为你的jquery包含一些sytax错误检查错误控制台

我认为你忘记添加一个半冒号的“返回虚假”声明

确保ajax请求正常工作在ajax成功函数中放置一个alert（）框并检查它是否正常工作

将Ajax注释添加到Ajaxed状态

2 个答案: