Refresh part of the page (div)

Question

I have a main HTML file that is attached to a Java program. This Java program updates the contents of a portion of the HTML file each time the page is refreshed. I want to refresh only that part of the page after each time interval. I can place the part that I would like to update in the div , but I'm not sure how to update only the contents of the div . Any help would be appreciated. Thank.

Answer 1

Use Ajax for this.

Create a function that will retrieve the current page through ajax, but not the entire page, but only the div in question from the server. Then the data (again through jQuery) will be placed in the same div in question and replace the old content with the new one.

The corresponding function:

http://api.jquery.com/load/

eg

 $('#thisdiv').load(document.URL + ' #thisdiv'); 

Please note that downloading automatically replaces the contents. Remember to include a space before the identifier selector.

Answer 2

Suppose you have 2 divs inside your html file.

 <div id="div1">some text</div> <div id="div2">some other text</div> 

The java program itself cannot update the contents of the html file, since html is connected to the client, while java is connected to the content.

You can, however, exchange information between the server (back-end) and the client.

What we're talking about is the AJAX that you use with JavaScript, I recommend using jQuery, which is a shared JavaScript library.

Suppose you want to refresh the page every constant interval, then you can use the interval function to repeat the same action every x times.

 setInterval(function() { alert("hi"); }, 30000); 

You can also do it like this:

 setTimeout(foo, 30000); 

The Whereea foo function is a function.

Instead of a warning (“hello”), you can execute an AJAX request that sends a request to the server and receives some information (for example, new text) that you can use to load into the div.

Classic AJAX is as follows:

 var fetch = true; var url = 'someurl.java'; $.ajax( { // Post the variable fetch to url. type : 'post', url : url, dataType : 'json', // expected returned data format. data : { 'fetch' : fetch // You might want to indicate what you're requesting. }, success : function(data) { // This happens AFTER the backend has returned an JSON array (or other object type) var res1, res2; for(var i = 0; i < data.length; i++) { // Parse through the JSON array which was returned. // A proper error handling should be added here (check if // everything went successful or not) res1 = data[i].res1; res2 = data[i].res2; // Do something with the returned data $('#div1').html(res1); } }, complete : function(data) { // do something, not critical. } }); 

While the backend can receive POST data and can return an information data object, for example (and very preferred) JSON, there are many tutorials where this is done, Google’s GSON is what I used a while ago, you can take a look on him.

I'm not a professional in getting Java POST and returning this kind of JSON, so I'm not going to give you an example with this, but I hope this is a decent start.

Answer 3

You need to do this on the client side, for example using jQuery.

Suppose you want to get HTML in a div with the identifier mydiv :

 <h1>My page</h1> <div id="mydiv"> <h2>This div is updated</h2> </div> 

You can refresh this part of the page using jQuery as follows:

 $.get('/api/mydiv', function(data) { $('#mydiv').html(data); }); 

On the server side, you need to implement a handler for requests arriving at /api/mydiv and return the HTML fragment that is inside mydiv.

Check out this script I made for you for a fun example, using jQuery to get JSON response data: http://jsfiddle.net/t35F9/1/

Answer 4

$.ajax(), $.get(), $.post(), $.load() jQuery functions internally send an XML HTTP request. among them, load() is only for a specific DOM Element . See jQuery Ajax Doc . Details of QA on them here .

Answer 5

pure js: use fetch and innerHTML to load the contents of a div

 let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET" async function refresh() { btn.style.visibility= "hidden"; dynamicPart.innerHTML="Loading..." dynamicPart.innerHTML=await(await fetch(url)).text(); setTimeout(refresh,4000); } 

 <div id="staticPart">Here is static part of page <button id="btn" onclick="refresh()">Start refreshing (4s)</button> </div> <div id="dynamicPart">Dynamic part</div>