How to show boot image in jQuery?

I am trying to show the boot image on the login page before redirecting to the profile page. I am registering the user via facebook api, so it takes time to display the profile page, and I want to show the downloaded image until it goes to the profile page. Please note that I am checking the page myself.

My HTML:

    <div>
     <a id="facebookLogin" class="fbButton" href="' . $loginUrl . '"><img src="f-connect.png"></a><br>';
    </div>

<div id='loadingmessage' style='display:none'>
  <img src='loading.gif'/>
</div>

My jQuery:

$( document ).ready(function( $ ) {

            $('#facebookLogin').live('click', function() {
                        $('#loadingmessage').fadeIn(); 
                }); 
        });

When I click the facebook connection button, it does not show the boot image and goes to the profile page if it was successful. Please, help!

+3
source share
1 answer

, , , , . AJAX:

$(document).on('click', '#facebookLogin', function(e) {
        e.preventDefault();
        $('#loadingmessage').fadeIn(); 
        $.ajax({
         type: "POST",
         url: FACEBOOKAPIURL,
         data: SOMELOGINDATA,
         success: function(){ $('#loadingmessage').fadeOut(); }
    });
});

, Facebook API, , , : https://developers.facebook.com

+2

All Articles