Question

I am trying to create a Facebook i like don’t like functionality using jQuery.
I am having the following problem.
When the ajax call fires up, it brings up the loading animation.
When it ends the animation stays there.

The only way that it disappears is when I use the same div for loading and for the result.

Have a look. The code is pretty straightforward: http://www.44db.com/demo/facebook-like/

Thank you

PS: This is the code on the load.php file:

<?php
$like = $_POST['like'];
$value = $_POST['value'];

    if ($like == 'like') :
        echo 'clicked like';
    elseif ($like == 'notlike') :
        echo 'clicked not like';
    endif;

?>

Answer 1

Your are explicitly showing the “ajax loading” on the click event

 $("#load").html(ajax_load); 

You need to disabled it when the response arrives the server response (Note the $(“#load”).hide() )

$("#good").click(function(event){
 event.preventDefault();
 $("#load").html(ajax_load);
 $.post(
 loadUrl,
 {like: "like", value: likevalue},
 function(responseText){
$("#load").hide();
 $("#result").html(responseText);
 },
 "html"
 );
 }); 

Instead of doing it explicity you can use “ajax events” and bind a callback to do an action when the ajax start and when the ajax stops