Refresh Part of Page (div)

javascript

ajax

dom-manipulation

performance

byNikita Barsukov·Aug 14, 2024

For dynamic content updates within a div element, AJAX incorporated with jQuery can be a powerful tool. Using jQuery's $.ajax() or the shorthand method .load(), you can pull fresh content from the server to replace a specific div.

Quick example using .load():

$('#refreshButton').on('click', function() {
  $('#targetDiv').load(window.location.href + ' #targetDiv'); // "targetDiv you're our only hope"
});

Here, the click event on #refreshButton triggers a #targetDiv update without reloading the entire page.

To level up the user experience, consider using the modern async and await with Fetch API for asynchronous content updates. But remember, an application is only as strong as its error handling, so ensure its well set up.

Update with setInterval

Use setInterval with AJAX to refresh a specific div at predefined intervals:

setInterval(function() {
  $('#dynamicDiv').load('/content-to-refresh #dynamicDiv'); // "Stay fresh, dynamicDiv"
}, 3000); // Refreshes the content every 3 seconds

This approach ensures the content of #dynamicDiv is updated automatically every 3 seconds.

Data handling on the back-end

The back-end should be equipped to handle and deliver partial content responses. If using Java, libraries such as Spring or GSON are handy for managing the processing of JSON responses from AJAX:

@GetMapping("/content-to-refresh")
public String getContent() {
    // Logic to get updated content
    return new Gson().toJson(updatedContent); // "Here's your updated content, don't spend it all at once"
}

Considerations for performance and UX

When refreshing a div, user experience is paramount. Provide non-blocking content updates and include indicators such as loaders or status messages.

Security: It's not paranoia if they are really after you

For security reasons, ensure the CORS policies align with your AJAX requests. This strategy minimizes your security risks and keeps the lawyers at bay.

Control - The illusion of choice

Give your users the option of a manual refresh with a simple user interface action, such as the click of a button:

<button id="manualRefresh">Refresh Content</button>

$('#manualRefresh').on('click', function() {
  $('#partToUpdate').load('/refresh-url #partToUpdate');
}); // "I have the power...to refresh content"

Smooth sailing with DOM manipulation

Ensure smooth transitions when replacing content using the .innerHTML property in conjunction with the Fetch API:

fetch('/update-content').then(response => response.text()).then(html => {
  document.getElementById('updateDiv').innerHTML = html; // "Ah, a breath of fresh HTML"
});

Bulletproof error handling

Craft fail-safe error handling scenarios to weather network issues or server-side errors:

$('#failSafeDiv').load('/failing-url #failSafeDiv', function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText); // "This page is experiencing technical difficulties 🚧"
  }
});

Communicate the failure instead of leaving the div blank when the load operation fails.

Server management of POST handling

If you need to POST data to the server prior to refreshing a div, use the jQuery $.post() method:

$.post('/updateWithPost', { id: '123' }, function(response) {
  $('#postResponseDiv').html(response); // "Your POST response is in the mail"
});

In this case, ensure that the server-side logic is able to process the data and return the updated HTML snippet or JSON data to the client.

Timing is everything

By integrating timeouts with AJAX, you can precisely manage refresh intervals that balance between content freshness and resource consumption.

Embracing modernity

Use the modern JavaScript async/await features for cleaner, more readable, asynchronous div update operations:

async function refreshContent() {
  const response = await fetch('/content'); // "I'll wait"
  const html = await response.text(); // "Still waiting"
  document.getElementById('asyncDiv').innerHTML = html; // "Finally, the wait is over"
}

setInterval(refreshContent, 5000); // Refresh every 5 seconds, no biggie!