jQuery Ajax facebook like system

Question

Hi,

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

Instead of doing $('#load').html(ajax_load);, just put the image tag in the HTML directly. You can then use $('#load').show(); to make it appear, and $('#load').hide(); to hide it;

Answer 2

Use this callback function instead:

function(responseText){
 $("#result").html(responseText);
 $(".loading").remove();
}

Answer 3

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