CODEWITHSUNDEEP
javascriptajaxhtml
Manann Sseth
Manann Sseth

Reputation: 2745

Calling Ajax method using javascript function

I'm working with jQuery Mobile.
My Code for move to details div ::

<a href="#details" data-ajax="true" data-transition="pop" data-role="button" data-inline="false" data-icon="info">Go To Details</a>

Now, I want to authenticate user with Facebook.

So I have applied ::

<a href="javascript:userLogin()" data-ajax="true" data-transition="pop" data-role="button" data-inline="false" data-icon="info"> Login with Faceook </a>

Function Calling for Authentication

function userLogin() {
     FB.login(
          function(response) {
               if (response.authResponse) {
                   alert('logged in');

                   FB.api('/me', function(response) {
                     alert("Welcome " + response.name);
                   });
                } else {
                   alert('not logged in');
                }
           },
           { scope: "email" }
     );
}

I'm getting valid user response after authentication.
Now I want to navigate to that details div.

So, how can I implement that ajax code after successfully login ??
Any suggestion will be appreciated.

Thanks.

Upvotes: 0

Views: 4228

Answers (2)

Arie Xiao
Arie Xiao

Reputation: 14082

Instead of changing the href attribute directly, you should bind the onclick event to a function returning true.

Modify your a tag.

<a href="#details" onclick="javascript:return userLogin()" data-ajax="true" data-transition="pop" data-role="button" data-inline="false" data-icon="info">Go To Details</a>

Modify your userLogin function:

function userLogin() {
    FB.login(
        function(response) {
            if (response.authResponse) {
                alert('logged in');

                FB.api('/me', function(response) {
                    alert("Welcome " + response.name);
                });
            } else {
                alert('not logged in');
            }
        },
        { scope: "email" }
    );
    return true;
}

It seems that FB.login is an asynchronized operation. If you want to redirect after the login action, try to modify the location.hash after login. Note that the return value has changed to false.

function userLogin() {
    var hash = '#details';
    FB.login(
        function(response) {
            if (response.authResponse) {
                alert('logged in');
                FB.api('/me', function(response) {
                    alert("Welcome " + response.name);
                    window.location.hash = hash;
                });
            } else {
                alert('not logged in');
            }
        },
        { scope: "email" }
    );
    return false;
}

Upvotes: 1

SrikanthManian
SrikanthManian

Reputation: 148

Use $.ajax() for making a call to the Facebook API to authenticate and in the callback function of the ajax function, call the click event of the details link.

Maybe something like this,

  $.ajax({
     url : 'https://graph.facebook.com/me'+whatever,
     success : function(){
        $('#details').click()
     }
  });

The success function will be called when the ajax call is successful.

Upvotes: 0

Related Questions