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!

Hi and welcome to SO. It does not work like elancer.com so you need to find some code first and then ask specific questions — mplungjan, Mar 22 '14 at 12:20

Jean-Paul · Accepted Answer · 2023-08-24T12:18:53.877

This is typically achieved with a technique called AJAX (short for "Asynchronous Javascript And XML"). This technique loads data (using XML formatting) asynchronously (in the background) so it can update your content without needing to reload the page (using Javascript).

The easiest way to implement AJAX is with the jQuery load() method. This method provides a simple way to load data asynchronous from a web server and place the returned HTML into the selected element. The basic syntax of this method is: $(selector).load(url, data, complete); where the arguments are:

selector the existing HTML element you want to load the data into
url a string containing the URL to which the request is sent
data (optional) a plain object or string that is sent to the server with the request
complete (optional) a callback function that is executed when the request completes

The required URL parameter specifies the URL of the file you want to load. The optional data parameter allows you to specify data (i.e. key/value pairs) that is sent to the web server along with the request. The optional complete parameter can be used to reference a callback function. The callback is fired once for each selected element.

A visualisation:

visualization

A simple example of using load(), where we load data dynamically when a button is pressed:

Using jQuery

$(function() {

  // optional: don't cache ajax to force the content to be fresh
  $.ajaxSetup({
    cache: false
  });

  // specify the server/url you want to load data from
  var url = "https://baconipsum.com/api/?type=meat-and-filler";

  // on click, load the data dynamically into the #demo div
  // while loading, show three dots (…)
  $("#button").click(function() {
    $("#demo").html("…").load(url);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div id="demo">
    <h1>Use jQuery load() to change this text</h1>
    <button id="button" type="button">Change Content</button>
  </div>
</body>

</html>

If you don't want to use the jQuery library, you can also use plain Javascript. Loading content is slightly more difficult that way. Here is an example of how to do it with Javascript only:

Using plain Javascript

function loadContent(url) {
  const xhttp = new XMLHttpRequest();
  xhttp.open("GET", url);
  xhttp.send();
  xhttp.onreadystatechange = (e) => {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
}

<!DOCTYPE html>
<html>

<body>
  <div id="demo">
    <h1>Use a XMLHttpRequest to change this text</h1>
    <button type="button" onclick="loadContent('https://baconipsum.com/api/?type=meat-and-filler')">Change Content</button>
  </div>
</body>

</html>

To learn more about AJAX, you can take a look at https://www.w3schools.com/xml/ajax_intro.asp

Hi! Thanks for the advice! But in your exemple I need to click a button as well, is there a way that the data is updated without any clicking? — Gidimotje, Mar 22 '14 at 12:34
@gidimotje Yes, in that case you can just remove the `click()` part and the code will run directly. You can also use a simple [setTimeout()](https://www.w3schools.com/jsref/met_win_settimeout.asp) statement to load the content after x seconds. — Jean-Paul, Jan 06 '22 at 22:25

SridharKritha · Answer 2 · 2020-11-07T06:56:38.510

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

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Live Update</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="autoUpdate.js"></script>
</head>
<div id="liveData">
    <p>Loading Data...</p>
</div>
</body>
</html>

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("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    };

    updateLiveData();

    function evenHandler()
    {
        // Check response is ready or not
        if(xhr.readyState == 4 && 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).

setTimeout(updateLiveData(), 1000); -> after updateLiveData there shouldn't be (). — VioletPL, Apr 19 '23 at 12:17

score 8 · Answer 3 · edited Feb 02 '16 at 15:59

8

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.

edited Feb 02 '16 at 15:59

Thomas Orlita

1,554
14
28

answered Mar 22 '14 at 12:21

Butani Vijay

4,181
2
29
61

1

This link may be help you more : http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html – Butani Vijay Mar 22 '14 at 12:47

score 1 · Answer 4 · edited Jan 12 '22 at 20:28

1

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 XMLHttpRequest();
xhr.open("GET", "http://some.com");

xhr.onreadystatechange = function () {}; // do something here...
xhr.send();

edited Jan 12 '22 at 20:28

miken32

42,008
16
111
154

answered Mar 22 '14 at 12:25

Shin

191
7

Update data on a page without refreshing

4 Answers4

Using jQuery

Using plain Javascript

Linked

Related