sql >> Database teknologi >  >> RDS >> Mysql

Hvordan indlæser jeg Individual Div uden at indlæse hele siden og vise indlæsningsstatus?

Jeg gør dette:

først har du den skjulte div med en loading if i den og en load knap:

<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" />

Så har du JS-koden (jeg bruger 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>

Så. Du har en container "displayDiv"; indeni har du et billede "loadingGIf" og en anden container "actualContent"; Når du klikker på indlæs-knappen, vises den store container med indlæsnings-gif'en, som giver brugeren besked om, at noget er ved at blive indlæst. Når indholdet er indlæst, skjuler du bare loadingGif'en og viser infoen i "actualContent"-gifen. I test.php'en gentager du blot, hvad der skal stå i div. Jeg anbefaler at bruge JSON, men du vil læse mere om det.

Håber dette hjælper.



  1. Upload af billeder i CKEditor uden brug af et plugin

  2. Skift div i henhold til de valgte rullemenuer

  3. Flere Venstre Slut med sum

  4. PostgreSQL konvertere kolonner til rækker? Transponere?