1

I have a lot of server code (PHP) going on in my first page of the Facebook app. I wan't the users to see a loading animation while waiting for the page.

I've seen many examples here of how to preload a page (using ajax or simply jQuery) but this is different, as I said, the page itself is generated on the server, and while that goes on, the user only sees a white blank page.

I tried to wrap my main page with another php page:

<?php
include_once 'functions.php';
session_start();
$_SESSION['fb'] = new fb();

function phponload(){
    echo
        '<script>
            $(function(){
                $("#mwrapper").load("main.php");
            });
        </script>';
}
?>
<html>
<head>
    <script type="text/javascript">
        function delayer(){
        document.write("<?php phponload();?>");
        }
    </script>
    <link href='styles/default.css' rel='stylesheet' type='text/css' />
        <img class='mainload' src='images/loading.gif'></img>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='plugins/clock/clock.css' />
</head>

<body onload='setTimeout("delayer()",1000);'>
    <div id='mwrapper'>

    </div>
</body>

</html>

now the main php page (main.php) has something like:

<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta name="google-site-verification"         content="Hyqgg60NTPNA7Q9Z5y9TtezUmwhiEomwZLJDt43Ki2g" />
<!--<img class='mainload' src='images/loading.gif'></img>-->
<?php
include_once 'functions.php';
include 'res/views/getTables.php';
define('TXT_QUESTIONS_NUM', 43);
session_start();
{... more PHP code ... }
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js">  </script>
    <script src='scripts/menuItems.js'></script>
    <script src='scripts/main.js'></script>
    <link href='styles/jquery.ui.smooth.theme.css' rel='stylesheet' type='text/css'/>
    <script type="text/javascript" src="plugins/clock/clock.js"></script>
    <link rel="icon" href="images/favicon.ico">
</head>

<div class='container' id='main'>
...
</div>
</body>
</html>

Right now, all the code does is loop the GIF - but does not load main.php :( Thank you!

1 Answer 1

Reset to default
1

Is there any error on the Chrome/Firebug console?

I don't understand why you generate the loader JS code in the PHP function (you could put it directly in HTML), but by doing so you are putting a multiline block between the quotes on document.write function, which causes an error.

However, I think the issue is that the browser is interpreting the inserted </script> as the end of the HTML tag, so what's after (the end of the document.write call and the delayer function) are treated as HTML and not as Javascript.

EDIT: Complementing the answer, here's the code I'd use to load another page:

function delayer(){
    $("#mwrapper").load("main.php", function(){
        $('.mainload').remove();
    });
}

Didn't need any PHP generation. Also, the second argument to the load function is a callback called when the load is finish, in this case I used to remove the loading GIF.

2
  • I just tried this and it works! Thank you. My only problem, is that now I can't use FB's API because this is not my main page. Access Tokens as well are not working on "main.php".
    – bladefist
    Jan 27, 2013 at 11:26
  • Is there any error on the console and/or in the FB repsonse? As long as the main page is in the same domain of the app it should work. I tested with a feed post and it worked fine for me.
    – George Marques
    Jan 27, 2013 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.