jqueryoauth-2.0jqtouchfbjs

White page when FB auth whilst in windowless iPhone mode with JQTouch

I'm trying to build a nice web app with jqtouch with a facebook login. Got it working up to a point. But when pulling the app to the iPhones's home screen (windowless viewing, jqt) and authenticate/login to FB, it gives a white page with a proper FB link. It gives a proper link (like everywhere I look for answers), but none of the fixes I found and tried work.

This problem does not happen when using a browser. The FB popup properly closes. When using safari mobile the browser opens another tab, shows white, closes it and moves back to my original tab in the browser. It does not open the tab though. It just sits there waiting for my sorry ass to click on it again and activate the tab. When reloading it, it is logged in. So the action works, but the return to the page does not. In no-frame mode (jqt) it doesn't open an extra tab. It just covers my page with a white page and does not close it. I get no firebug errors for JS.

I made the code as basic as I could whilst producing the problem:

<!doctype html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>My Facebook Login Page</title>
    <script type="text/javascript" src="[my domain]/modules/js/jquery-1.8.3.min.js"></script>
    <script src="[my domain]/modules/jqtouch-1.0-b4-rc/src/jqtouch-jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="[my domain]/modules/jqtouch-1.0-b4-rc/src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    // JQT
    var jQT = new $.jQTouch({
        //icon: "jqtouch.png", // Will show an "app" picture now
        addGlossToIcon: false,
        //startupScreen: "jqt_startup.png", // No startup pic
        statusBar: "white",
    });
    </script>

  </head>
  <body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
       FB.init({ 
          appId:'[my app id]', cookie:true, 
          status:true, xfbml:true 
       });
    </script>

    <div id="jqt">
        <div id="main" class="current">
            <fb:login-button>Login with Facebook</fb:login-button>
            Random text to have something on the screen
        </div>
    </div>
  </body>
</html>

I've been at it for about 5 days now, and going proper nuts. A solution of somekind would really be appreciated.

Solution

  • Well, found an alternative for it. Used php SDK. But at first it still loaded another tab. But when using:

    <a onclick="top.location.href='[facebook login url]'">login</a>

    It did work. It actually opens in the same window within the same app. You need to do this because you can't change the target to target=_self

    Have fun!