How do I load Individual Div without load entire page and show loading status??

Question

Hi

How can I load individual Div separately without affecting current page and show loading status for that div with PHP and MySQL or Ajax and SQL

Answer 1

Use PHP+AJAX + Mysql create a ".php" file containing that , call the Ajax function in which this .php(DO not give this name t your file, this is just an reference example) file must be called.. which will displayed as per the event call...

Answer 2

I do this:

first you have the hidden div with a loading if in it and a load button:

<div id="displayDiv" style="display: none">
  <img id="loadingGif" src="loadingGif" style="display:none"; />
  <div id="actualContent" style="display:none" />
</div>
<input type="button" id="loadButton" />

Then you have the JS code ( I use jQuery )

<script type="text/javascript">
   $(document).ready( onDocumentReady); // this runs before page load

   function onDocumentReady()
   {
      $('#loadButton').click( onLoadClick ); //assign action on button click
   }   

   function onLoadClick()
   {
       $('#loadingGif').show(); // show the loading gif. It won't show as long as it's parent is hidden
       $('#actualContent').hide(); // hide the actual content of the response;
       $('#displayDiv').show(); // display the div
       $.get("test.php", onRequestComplete ); // make the ajax request to the stand alone PHP file
      //so as long as the content loads, the loading gif will show;
   }

   function onRequestComplete( data )
   {
      $('#loadingGif').hide();
      $('#actualContent').html( data );
      $('#actualContent').show();
   }
</script>

So. You have a container "displayDiv"; inside you have an image "loadingGIf" and another container "actualContent"; When you click the load button, the big container with the loading gif appears, notifying the user that something is loading. When the content is loaded, you just hide the loadingGif, and display the info in the "actualContent" gif. In the test.php you just echo what must appear in the div. I recommend using JSON, but you'll read more about it.

Hope this helps.