Home/ Questions/Q 9222105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T03:44:08+00:00

I have a lot of server code (PHP) going on in my first page

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0