Auto refresh div content without reloading page using JavaScript

Question

I’m trying to reload some dynamic content that is contained within div tags without refreshing the entire page. After some searching it appears that Ajax is my best bet, but I have never worked with JQuery before.

Table of Contents Show

How to Reload the div Without Reloading the Entire Page in jQuery?
How to refresh a div using JavaScript without refreshing page?
How to auto refresh a div in JavaScript?
How to update data without refreshing page in JavaScript?
How to change the content of a div without reloading the webpage?

Here is the code snippet from the page containing the data I’m looking to refresh when a user click the “update” form button:

<div id="data">
			<table cellpadding="0" cellspacing="2">
				<tr>
					<th>column 1</th>
					<th>column 2</th>
					<th>column 3</th>
                                        <th>column 4</th>
				</tr>
                                <?php echo getList($currentpage, $highlight); ?>
                        </table>
                        </div>
			
<p><form method="link" action="javascript:document.location.reload()"><input type="submit" value="update" onClick="this.value = 'updating...'"></form></p>

As you can see I’m currently just reloading the entire page, which is weak. If anyone knows of an easy solution I would appreciate it, thanks again.

Please excuse and completely ignore my comments above, I rushed to post a question here without really thinking things through.

After doing more research, I’ve found what I believe is a better way to accomplish this task, but I can’t get it working.

I’m trying to auto-refresh the content inside a div tag using jQuery, and even found two great tutorials (can’t post the links, search for “jquery refresh div”, I read both brightcherry and 9lessons).

Looks straight forward enough, even for me. So I open the original code, which looks like:


<table cellpadding="0" cellspacing="2">
<tr>
<th>rank</th>
<th>website</th>
<th>traffic</th>
<th>change</th>
</tr>
<div id="data">
<?php echo getList($currentpage, $highlight); ?>
</div>
</table>

And modify as outlined in the lessons, moving

<?php echo getList($currentpage, $highlight); ?>

to an external file named data.php and calling it in the js to be refreshed every 10 seconds:


<script src="jquery.min.js"></script>

<script>
var auto_refresh = setInterval(
function()
{
$('#data').fadeOut('slow').load('data.php').fadeIn("slow");
}, 10000);
</script>
...........
<table cellpadding="0" cellspacing="2">
<tr>
<th>rank</th>
<th>website</th>
<th>traffic</th>
<th>change</th>
</tr>
<div id="data">
</div>
</table>

And it doesn’t work. At all. The PHP file doesn’t load and white space is displayed where the data should be. I’m at a loss here and think I’m just not seeing something, please help…

This blog will discuss the approaches to reload the div without reloading the entire page in JavaScript.

How to Reload the div Without Reloading the Entire Page in jQuery?

The “div” can be reloaded without reloading the entire page using jQuery’s “on()” method in combination with the “load()” method.

The on() method associates one or more event handlers for the elements, and the load() method loads the content into the fetched element. These methods can be combined to access the div and reload it upon the triggered event.

Example
Let’s overview the following HTML code:

<body>
<h2>This is how to reload the div without reloading entire page</h2>
<div id="myDiv">
<p>JavaScript is a programming language which contains functions, variables, events and objects etc.</p>
</div>
<button>reload</button>
</body>

In the above code block:

Include the stated heading.
Also, specify the “<div>” element having the attribute ”id”.
After that, include the paragraph within the “<p>” tag and a button to trigger the desired functionality.

Now, let’s move on to the JavaScript code:

In this code snippet

Include the jQuery library via the “src” attribute.
Access the created button and associate the “on()” method.
This will invoke the mentioned function upon the button click, as evident from the attached event “click”.
In the function definition, access the included “<div>” element and load it again using the “load()” method by referring to its “id”.
Resultantly, the included div will be reloaded again upon the button click, and the stated message via the alert dialogue box will be displayed.

Output

It can be observed that the div is successfully reloaded without reloading the entire page.

Conclusion

To reload the div without reloading the entire page, use the “on()” method in combination with the “load()” method. These methods can be utilized to reload the content of the div upon the triggered event by accessing it and referring to it again. This blog described the method to reload the div without reloading the entire page.

How to refresh a div using JavaScript without refreshing page?

To reload the div without reloading the entire page, use the “on()” method in combination with the “load()” method. These methods can be utilized to reload the content of the div upon the triggered event by accessing it and referring to it again.

How to auto refresh a div in JavaScript?

To auto-refresh the DIV element every few seconds, I'll call a method (which will refresh the DIV's content) from within the window. setInterval() function, at a specified interval (few seconds). You can learn more about JavaScript . setInterval() function here.

How to update data without refreshing page in JavaScript?

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.