Auto refresh div itself using javascript

Question

I'd like to auto refresh a specific div. I tried to use the following script:

var auto_refresh = setInterval(
    function () {
        $('#refresh').load('#refresh').fadeIn();
        }, 2000
);

However, it does not work. I think the current page url needs to added like "$('#refresh').load('{current_page.html} #refresh').fadeIn();" ( auto refresh a div using javascript ).

Is there any way to refresh a specific div itself using javascript or jQuery without adding to the current page url?

Answer 1

You should provide the url of your source to the load() function as an argument.

.load('sample/ajax');

But I guess you aught to know what goes on behind this.

You can use ajax to load innerHTML of the div element without reloading the page.

Lets say you have the loadContent() function which returns new html content from a server. This function uses ajax to load contents dynamically.

So, you can say:

var myNewContent = loadContent();
$('#myDiv').html(myNewContent);

Now you can do this periodically using setInterval() function as you have done in your question.

---

Still there are few things you need to know.

1. You need to learn ajax . Its really easy to learn this technique.

2. Your need to learn the difference between synchronous and asynchronous calls . And how to handle promises .

3. You need to learn about cross domain requests if you are trying to get contents from a different domain than yours.

Good luck!