使用javascript函数调用Ajax方法

Question

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.

Answer 1

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;
}

Answer 2

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.