CodingForums.com - Ajax loader using php include Possible?

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - Ajax loader using php include Possible? (http://www.codingforums.com/showthread.php?t=123862)

Ajax loader using php include Possible?

Hello!

I have a question. Is it possible to use an ajax loader to load a php page that displays a repeating table of information?

The reason I want to do this is because the php page takes forever to load and it doesn't display anything till everything is done by the server.

So I am wondering how to create a script that displays a loader image while the php page is being executed and when it is then the image disappears and the php page is displayed in its place.

I am thinking using <div> for all of it but I don't know where to go from there.

I tried looking for a script on google but to no avail.

Anyone have any ideas?

Thanks!

Add a div to the page. On window.onload fire off an Ajax call to fecth the PHP page that generates the table. When the request returns set the innerHTML of the table with the responseText.

Eric

This is what I put and it works great! This is the script part.

Code:

<script type="text/javascript">

function ajaxFunction()

  {

  var xmlHttp;

  try

    {

    // Firefox, Opera 8.0+, Safari

    xmlHttp=new XMLHttpRequest();

    }

  catch (e)

    {

    // Internet Explorer

    try

      {

      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

      }

    catch (e)

      {

      try

        {

        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

      catch (e)

        {

        alert("Your browser does not support AJAX!");

        return false;

        }

      }

    }

    xmlHttp.onreadystatechange=function()

      {

      if(xmlHttp.readyState==4)

        {

        document.getElementById("content").innerHTML=xmlHttp.responseText;

        }

      }

    xmlHttp.open("GET","list.php",true);

    xmlHttp.send(null);

  }

      </script>

Here is the HTML part.

Code:

<div id="content"> 

  <br/>

  <br/>

  <br/>

  <h1>Loading ... Please wait </h1>

  <br/>

  <br/>

  <img src="../ajax-loader.gif" />

    </div>