0

I'm running into a strange interaction between chrome and jquery mobile. The application flow is straightforward:

  • Homepage / login screen. "Login" link is data-ajax="false" and rel="external" so all the fancy JQM AJAX stuff is disabled.
  • A series of 302s for the oauth dance which ends at /auth/facebook/callback
  • /auth/facebook/callback 302s to the real page /home which is a very simple Jquery-mobile page

On Chrome and Firefox the jquery mobile 'ajax-loading' spinner shows forever, with the actual page loaded in the DOM but not displaying. On Safari (desktop or mobile) the page displays properly.

Leopd
  • 41,333
  • 31
  • 129
  • 167

2 Answers2

2

The problem is coming from Facebook. When returning from oauth, they add a URL fragment #_=_ to your callback URL, which confuses JQM. As is typical for FB, this is documented as deliberate without justification but vague/incorrect instructions for how to deal with it. A bunch of discussion in this SO question. The best workaround I found is to insert this code to the top of your page before JQM has a chance to get confused:

<script>
    // workaround Facebook oauth feature-bug
    if (window.location.hash == '#_=_') window.location.hash = '';
</script>
Community
  • 1
  • 1
Leopd
  • 41,333
  • 31
  • 129
  • 167
0

To my knowledge, AJAX requests don't handle redirects very well (there are tons of SO questions about this subject).

Instead of doing your authentication in JavaScript, how about a server-side implementation? It will be faster and less complicated for the user's browser.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Fair suggestion for a workaround. But the request is not AJAX -- I turned that off. It's a brand new complete page being loaded in the browser after a redirect. – Leopd May 10 '12 at 19:31