Keyword

Guide: How to add Ajax Loading animation for during comment submission

  • Massoud
  • Massoud's Avatar Topic Author
  • Offline
  • Junior Member
More
13 years 2 months ago #98743 by Massoud
one of my problem with K2 built-in comment system was when people click on submit button they wont aware that the comment is submitting and they press several times on submit button and it caz duplicate comment, now with this you will have a loading animation during comment submission:

 

first of open k2.js in js folder:

 

after line 13

$('comment-form').addEvent('submit', function(e){


add this

$('loading').setHTML('<img src="images/loading.gif" alt="Loading..." />');


so you will have something like this:

window.addEvent('domready', function(){      // Comments  if($('comment-form')) {    $('comment-form').addEvent('submit', function(e){    $('loading').setHTML('<img src="images/loading.gif" alt="Loading..." />');      new Event(e).stop();      $('formLog').empty().addClass('formLogLoading');      this.send({        onComplete: function(res){          $('formLog').removeClass('formLogLoading').setHTML(res);          if(typeof(Recaptcha) != "undefined"){               Recaptcha.reload();          }          if (res.substr(13, 7) == 'success') {              window.location.reload();          }        }      });    });  }


 

then open item_comment_for.php which is located inside of template folder, then add this

<span id="formLog"></span>

after

<input type="submit" class="button" id="submitCommentButton" value="<?php echo JText::_( 'Submit comment' ); ?>" />

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum