Update data on a page without refreshing

Question

I have a website where I need to update a status  Like for a flight  you are departing  cruise or landed  I want to be able to refresh the status without having my viewers to have and reload the whole page  I know there is a way to do it with AJAX and jQuery  but I don t have any understanding of how that works  I also don t want them to have and click a button  If anybody knows how that would be done I much appreciate it

User · Answer

I think you would like to learn ajax first  try this  Ajax Tutorial  If you want to know how ajax works  it is not a good way to use jQuery directly  I support to learn the native way to send a ajax request to the server  see something about XMLHttpRequest   var xhr   new XMLHttpReuqest    xhr open  GET    http   some com     xhr onreadystatechange   handler     do something here    xhr send

User · Answer

You can read about jQuery Ajax from official jQuery Site  https   api jquery com jQuery ajax   If you don t want to use any click event then you can set timer for periodically update   Below code may be help you just example   function update         get  response php   function data            some div   html data       window setTimeout update  10000             Above function will call after every 10 seconds and get content from response php and update in  some div

User · Answer

Suppose you want to display some live feed content  say livefeed txt  on you web page without any page refresh then the following simplified example is for you  In the below html file  the live data gets updated on the div element of id  quot liveData quot  index html  lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Live Update lt  title gt       lt meta charset  quot UTF-8 quot  gt       lt script type  quot text javascript quot  src  quot autoUpdate js quot  gt  lt  script gt   lt  head gt   lt div id  quot liveData quot  gt       lt p gt Loading Data    lt  p gt   lt  div gt   lt  body gt   lt  html gt   Below autoUpdate js reads the live data using XMLHttpRequest object and updates the html div element on every 1 second  I have given comments on most part of the code for better understanding  autoUpdate js window addEventListener  load   function         var xhr   null       getXmlHttpRequestObject   function                 if  xhr                                          Create a new XMLHttpRequest object              xhr   new XMLHttpRequest                      return xhr              updateLiveData   function                 var now   new Date               Date string is appended as a query with live data             for not to use the cached version          var url    livefeed txt     now getTime            xhr   getXmlHttpRequestObject            xhr onreadystatechange   evenHandler             asynchronous requests         xhr open  quot GET quot   url  true              Send the request over the network         xhr send null               updateLiveData         function evenHandler                    Check response is ready or not         if xhr readyState    4  amp  amp  xhr status    200                        dataDiv   document getElementById  liveData                   Set current data text             dataDiv innerHTML   xhr responseText                 Update the live data every 1 sec             setTimeout updateLiveData    1000                        For testing purpose  Just write some thing in the livefeed txt - You will get updated the same in index html without any refresh  livefeed txt Hello World blah   blah    Note  You need to run the above code on the web server  ex  http   localhost 1234 index html  not as a client html file  ex  file    C  index html

User · Answer

In general  if you don t know how something works  look for an example which you can learn from   For this problem  consider this DEMO  You can see loading content with AJAX is very easily accomplished with jQuery     function           don t cache ajax or content won t be fresh       ajaxSetup            cache  false             var ajax load     lt img src  http   automobiles honda com images current-offers small-loading gif  alt  loading       gt            load   functions     var loadUrl    http   fiddle jshell net deborah pkmvD show            loadbasic   click function                result   html ajax load  load loadUrl               end         Try to understand how this works and then try replicating it  Good luck   You can find the corresponding tutorial HERE  Update  Right now the following event starts the ajax load function       loadbasic   click function                result   html ajax load  load loadUrl             You can also do this periodically  How to fire AJAX request Periodically    function worker         ajax       url   ajax test html        success  function data              result   html data              complete  function              Schedule the next request when the current one s complete       setTimeout worker  5000                       I made a demo of this implementation for you HERE  In this demo  every 2 seconds  setTimeout worker  2000    the content is updated   You can also just load the data immediately       result   html ajax load  load loadUrl     Which has THIS corresponding demo

[php] Update data on a page without refreshing

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to refresh