Agregar comentarios Ajax al estado Ajaxed

I'm on the final stage of ajaxing in my feed. And whilst I'd thought this maybe a simple paste of the comment input I were wrong.

I inserted my input underneath the main ajaxed status, so when the user adds a status the ajaxed status goes into their feed and then they can click on the ajaxed status and write a ajaxed comment. Once the user submits the comment the comment should be added with ajax. BUT..The page is refreshed and no comment is added at all.

Hope I've made sense of what I'm 'trying' to do.

MAIN STATUS AJAX - The id of the form goes into some more ajax which adds the content.

  <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 in the same page below the above 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>

CLICK HANDLE EXAMPLE

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

preguntado el 28 de agosto de 12 a las 14:08

Can you post the php code from insert.php? Seems like the content is not being stored in the database, so start your search in insert.php. -

You need to delegate the event for adding a comment as the form elements and buttons of the comment form are not present on page load. -

How would I 'delegate' the event @RoryMcCrossan. -

2 Respuestas

the form 'mycommentform' you've added in your success function does not bind to any javascript events. therefore if you submit it, it is not ajaxed and reloads the complete page.

current jQuery Versions provide the .en() method to archieve this automatically.

solo cambia

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

a

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

in your COMMENT AJAX section to have a delegated event handler.

Respondido 28 ago 12, 15:08

I've posted my mycommentform AJAX in the question that is just below the original AJAX I posted. I thought that the id of the form would be caught by the mycommentform function. - Dave

no, it is not. if you change the content of some containers with the .html() function, the new html code is not parsed by jquery and therefore jquery doesnt bind any functions to it. have a look at the .live() functions in jquery. - Jan Prieser

this is done with the .en() method in current jquery versions: $("form#mycommentform").on("submit", function(event) { - Jan Prieser

And do I put what I have inside my comment ajax inside that too. - Dave

i've changed my answer accordingly. - Jan Prieser

I think your jquery contains some sytax errors check the error console

i think you forget to add a semi colon aftrer "return false" statement

Make sure the ajax request is working put an alert() box inside the ajax success function and check it is working or not

Respondido 28 ago 12, 14:08

Semicolons are not fatal errors — or even errors — in non-strict mode. - waleed khan

ok point noted but my point was that $("form#mycommentform").submit(function(event) {}) is not calling at all so if above answers are not accepted then there may be a syntax error which causing code to not execute - sumit neema

There is no errors that I can see. I added the semi colon for your peace of mind also. Maybe @Rory was right. Deligating an event maybe the solution. - Dave

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.