Calling Ajax method using javascript function

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.

• Dipesh Parmar: You can set it as cookies and then redirect to detail page.
• Arun P Johny: if you have jquery try $('a[href="#details"]').click()

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

• Manann Sseth: Not working.. It directly go to that div without authenticate user.
• Manann Sseth: Thanks mate. Solved..:) But I've edited in <a> tag and remove href attribute because it navigates before authenticated. Again Thanks..:)

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.