开发者

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

How can I load individual Div separately without affecting current pag开发者_JAVA技巧e and show loading status for that div with PHP and MySQL or Ajax and SQL


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.


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...

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜