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.

You can set it as cookies and then redirect to detail page.

Dipesh Parmar
– Dipesh Parmar

2013-04-05 06:15:05 +00:00
Commented Apr 5, 2013 at 6:15 — Dipesh Parmar
– Dipesh Parmar, Commented Apr 5, 2013 at 6:15
if you have jquery try $('a[href="#details"]').click()

Arun P Johny
– Arun P Johny

2013-04-05 06:17:20 +00:00
Commented Apr 5, 2013 at 6:17 — Arun P Johny
– Arun P Johny, Commented Apr 5, 2013 at 6:17

Arie Xiao · Accepted Answer · 2013-04-05 09:00:03Z

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

edited Apr 5, 2013 at 9:00

answered Apr 5, 2013 at 6:36

Arie Xiao

14.1k3 gold badges35 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manann Sseth Over a year ago

Not working.. It directly go to that div without authenticate user.

Manann Sseth Over a year ago

Thanks mate. Solved..:) But I've edited in <a> tag and remove href attribute because it navigates before authenticated. Again Thanks..:)

SrikanthManian · Accepted Answer · 2013-04-05 06:36:42Z

0

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.

answered Apr 5, 2013 at 6:36

SrikanthManian

1487 bronze badges

Collectives™ on Stack Overflow

Calling Ajax method using javascript function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related