Refresh Part of Page div

Question

I have a basic html file which is attached to a java program  This java program updates the contents of part of the HTML file whenever the page is refreshed  I want to refresh only that part of the page after each interval of time  I can place the part I would like to refresh in a div  but I am not sure how to refresh only the contents of the div  Any help would be appreciated  Thank you

User · Accepted Answer

Use Ajax for this   Build a function that will fetch the current page via ajax  but not the whole page  just the div in question from the server  The data will then  again via jQuery  be put inside the same div in question and replace old content with new one   Relevant function   http   api jquery com load   e g       thisdiv   load document URL       thisdiv      Note  load automatically replaces content  Be sure to include a space before the id selector

User · Answer

Usefetch and innerHTML to load div content  x000D   x000D  let url  https   server test-cors org server id 2934825 amp enable true amp status 200 amp credentials false amp methods GET   async function refresh       btn disabled   true    dynamicPart innerHTML    Loading       dynamicPart innerHTML   await await fetch url   text      setTimeout refresh 2000     x000D   lt div id  staticPart  gt    Here is static part of page     lt button id  btn  onclick  refresh    gt      Click here to start refreshing every 2s    lt  button gt   lt  div gt    lt div id  dynamicPart  gt Dynamic part lt  div gt  x000D   x000D   x000D

User · Answer

You need to do that on the client side for instance with jQuery   Let s say you want to retrieve HTML into div with ID mydiv    lt h1 gt My page lt  h1 gt   lt div id  mydiv  gt       lt h2 gt This div is updated lt  h2 gt   lt  div gt    You can update this part of the page with jQuery as follows     get   api mydiv   function data          mydiv   html data         In the server-side you need to implement handler for requests coming to  api mydiv and return the fragment of HTML that goes inside mydiv   See this Fiddle I made for you for a fun example using jQuery get with JSON response data  http   jsfiddle net t35F9 1

User · Answer

ajax      get      post      load   functions of jQuery internally send XML HTTP request  among these the load   is only dedicated for a particular DOM Element  See jQuery Ajax Doc  A details Q A  on these are Here

User · Answer

Let s assume that you have 2 divs inside of your html file    lt div id  div1  gt some text lt  div gt   lt div id  div2  gt some other text lt  div gt    The java program itself can t update the content of the html file because the html is related to the client  meanwhile java is related to the back-end   You can  however  communicate between the server  the back-end  and the client   What we re talking about is AJAX  which you achieve using JavaScript  I recommend using jQuery which is a common JavaScript library   Let s assume you want to refresh the page every constant interval  then you can use the interval function to repeat the same action every x time   setInterval function         alert  hi       30000     You could also do it like this   setTimeout foo  30000     Whereea foo is a function   Instead of the alert  hi   you can perform the AJAX request  which sends a request to the server and receives some information  for example the new text  which you can use to load into the div   A classic AJAX looks like this   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  lt  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              Wherea the backend is able to receive POST ed data and is able to return a data object of information  for example  and very preferrable  JSON  there are many tutorials out there with how to do so  GSON from Google is something that I used a while back  you could take a look into it   I m not professional with Java POST receiving and JSON returning of that sort so I m not going to give you an example with that but I hope this is a decent start

[javascript] Refresh Part of Page (div)

Examples related to javascript

Examples related to html

Examples related to refresh