Skip to main content
changed title and added updates
Source Link

Ajax Comment: Avoid page reload when submitting comments too quicklyPage reloads whenever the comment submission form is reloaded

I noticed that when I'm trying to comment too fast in a page it's getting reloaded. I want to avoid reloading the whole page just because someone submits comments too quickly but I don't know where to start.

BTW, here's the ajax script I'm using. Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.


EDIT: I did some trial and error and noticed stuffs, changing the title for a more accurate description as well.

  1. The reload problem don't happen when posting comments in rapid succession.
  2. Submitting a comment for the first time reloads all contents under #comment element, and the reloading issue is starting when using the form inside the reloaded #comment element, e.g. when trying to comment on a second time.

Ajax Comment: Avoid page reload when submitting comments too quickly

I noticed that when I'm trying to comment too fast in a page it's getting reloaded. I want to avoid reloading the whole page just because someone submits comments too quickly but I don't know where to start.

BTW, here's the ajax script I'm using. Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.

Ajax Comment: Page reloads whenever the comment submission form is reloaded

I noticed that when I'm trying to comment too fast in a page it's getting reloaded. I want to avoid reloading the whole page just because someone submits comments too quickly but I don't know where to start.

BTW, here's the ajax script I'm using. Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.


EDIT: I did some trial and error and noticed stuffs, changing the title for a more accurate description as well.

  1. The reload problem don't happen when posting comments in rapid succession.
  2. Submitting a comment for the first time reloads all contents under #comment element, and the reloading issue is starting when using the form inside the reloaded #comment element, e.g. when trying to comment on a second time.
added relevant link
Source Link

BTW, here's the ajax scriptthe ajax script I'm using (I got and later modified it from somewhere around here last time). Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.

            function reloadComments() {
                jQuery("#comments").load(window.location.href + " #comments > *");
                jQuery("#comments > *:not(.comments-title)").hide().fadeIn(1000);
            }

            jQuery('document').ready(function($) {
                var commentform = $('#commentform'); // find the comment form
                commentform.prepend('<div id="comment-status" ></div>'); // add info panel before the form to provide feedback or errors
                var statusdiv = $('#comment-status'); // define the info panel
                var list;
                $('a.comment-reply-link').click(function() {
                    list = $(this).parent().parent().parent().attr('id');
                });

                commentform.submit(function() {
                    //serialize and store form data in a variable
                    var formdata = commentform.serialize();
                    //Add a status message
                    statusdiv.html('<p>Processing...</p>');
                    //Extract action URL from commentform
                    var formurl = commentform.attr('action');
                    //Post Form with data

                    $.ajax({
                        type: 'post',
                        url: formurl,
                        data: formdata,
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            statusdiv.html('<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly</p>');
                        },
                        success: function(data, textStatus) {
                            if (data == "success" || textStatus == "success") {
                                statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
                                //alert(data);
                                reloadComments();
                                

                            } else {
                                statusdiv.html('<p class="ajax-error" >Please wait a while before posting your next comment</p>');
                                commentform.find('textarea[name=comment]').val('');
                            }
                        }
                    });
                    return false;
                });
            });

BTW, here's the ajax script I'm using (I got and later modified it from somewhere around here last time). Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.

            function reloadComments() {
                jQuery("#comments").load(window.location.href + " #comments > *");
                jQuery("#comments > *:not(.comments-title)").hide().fadeIn(1000);
            }

            jQuery('document').ready(function($) {
                var commentform = $('#commentform'); // find the comment form
                commentform.prepend('<div id="comment-status" ></div>'); // add info panel before the form to provide feedback or errors
                var statusdiv = $('#comment-status'); // define the info panel
                var list;
                $('a.comment-reply-link').click(function() {
                    list = $(this).parent().parent().parent().attr('id');
                });

                commentform.submit(function() {
                    //serialize and store form data in a variable
                    var formdata = commentform.serialize();
                    //Add a status message
                    statusdiv.html('<p>Processing...</p>');
                    //Extract action URL from commentform
                    var formurl = commentform.attr('action');
                    //Post Form with data

                    $.ajax({
                        type: 'post',
                        url: formurl,
                        data: formdata,
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            statusdiv.html('<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly</p>');
                        },
                        success: function(data, textStatus) {
                            if (data == "success" || textStatus == "success") {
                                statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
                                //alert(data);
                                reloadComments();
                                

                            } else {
                                statusdiv.html('<p class="ajax-error" >Please wait a while before posting your next comment</p>');
                                commentform.find('textarea[name=comment]').val('');
                            }
                        }
                    });
                    return false;
                });
            });

BTW, here's the ajax script I'm using. Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.

Source Link

Ajax Comment: Avoid page reload when submitting comments too quickly

I noticed that when I'm trying to comment too fast in a page it's getting reloaded. I want to avoid reloading the whole page just because someone submits comments too quickly but I don't know where to start.

BTW, here's the ajax script I'm using (I got and later modified it from somewhere around here last time). Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.

            function reloadComments() {
                jQuery("#comments").load(window.location.href + " #comments > *");
                jQuery("#comments > *:not(.comments-title)").hide().fadeIn(1000);
            }

            jQuery('document').ready(function($) {
                var commentform = $('#commentform'); // find the comment form
                commentform.prepend('<div id="comment-status" ></div>'); // add info panel before the form to provide feedback or errors
                var statusdiv = $('#comment-status'); // define the info panel
                var list;
                $('a.comment-reply-link').click(function() {
                    list = $(this).parent().parent().parent().attr('id');
                });

                commentform.submit(function() {
                    //serialize and store form data in a variable
                    var formdata = commentform.serialize();
                    //Add a status message
                    statusdiv.html('<p>Processing...</p>');
                    //Extract action URL from commentform
                    var formurl = commentform.attr('action');
                    //Post Form with data

                    $.ajax({
                        type: 'post',
                        url: formurl,
                        data: formdata,
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            statusdiv.html('<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly</p>');
                        },
                        success: function(data, textStatus) {
                            if (data == "success" || textStatus == "success") {
                                statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
                                //alert(data);
                                reloadComments();
                                

                            } else {
                                statusdiv.html('<p class="ajax-error" >Please wait a while before posting your next comment</p>');
                                commentform.find('textarea[name=comment]').val('');
                            }
                        }
                    });
                    return false;
                });
            });