自动刷新div中的内容？

Question

I know this question has been asked several times. And I have read all the threads without coming to a solution. I use Wordpress, together with a plugin, this plugin lets me add events to it. I use the "shortcode"/[slug] on a Wordpress page. This displays the events I have added. If I add or remove an event I need to manually refresh the page to see this.

My goal is to be able to see the new events (and removed) without refreshing the whole page. If I check the page with chrome together with the source I find that a div id="vs" is what contains all the events. I have made an addition to the plugin where I've created a javascript.

jQuery(document).ready( function($) {

var auto_refresh = setInterval(
function() {
$.ajax({
    url: "https://example.com",
    success: function( data ) {
        $("#vs").html( $(data).find('div').html());
    }
})
}, 5000); // refreshing after every 5000 milliseconds
})

What happens is that it is refreshed automatically. But it displays a lot of elements, and it is a duplicate of the content that was already there. And everything is offset too.

I really don't know what to try? And also, the page which this is displayed on is a slider, both displaying the same slug, but it only "works" on the first slider.

Any ideas?

Answer 1

So it's a little hard to answer without seeing what all the dom looks like but it sounds like you are not replacing the content but rather just adding to it over and over again. As a result, slowly the width content is getting smaller and smaller which is why you get the indenting affect. My guess is you're using .html when you want to be using .replaceWith http://api.jquery.com/replacewith/

var auto_refresh = setInterval(
function() {
$.ajax({
    url: "https://example.com",
    success: function( data ) {
        $("#vs").replaceWith( $(data).find('div').html());
    }
})
}, 5000); // refreshing after every 5000 milliseconds

If this doesn't work I think we need to see what your dom looks like.