Using jQuery replaceWith to replace content of DIV only working first time

Question

I'm using the following jQuery to pull new data and replace the contents of the DIV listdata

$(function(){
$('.refresh').click(function(event) {
    event.preventDefault();

    $.ajax({
        url: "_js/data.php",
        success: function(results){
            $('#listdata').replaceWith(results);
        }
    });
});
});

The script is triggered by numerous links on the page, such as:

<a href="" id="update1" class="refresh">Update 1</a>
<a href="" id="update2" class="refresh">Update 2</a>

For some reason the script only works on the first click of a link. Subsequent clicks do not refresh the data.

I've seen various fixes but nothing that I can get working. Any suggestions?

Lymphosarcoma

Answer 1

It looks to me like your problem is with using replaceWith.

You're removing the element which matches $('#listdata') on the first call of replaceWith, so subsequent refreshes can't find where the data is supposed to be placed in the document.

You could try something like

 $('#listdata').empty();
 $('#listdata').append(results);

or chained like this

 $('#listdata').empty().append(results);

Kwarteng

I think you've hit the nail on the head, but this particular fix doesn't work – Lymphosarcoma

Sorry, I missed that you'd switched replaceWith for append. Perfect! – Lymphosarcoma

@EBM, you should open up a question about it then. If this solution doesn't work for you, then there's some difference in what you're doing. – Kwarteng

This drove me nuts for ages and then I finally worked out what was going on. As per Sam Duel's reply the problem is that replaceWith is replacing the whole html so that particular id (or class) has been repalced hence why its not there to select a second time! My solution was to make sure the replacment HTML has the class I was selecting against to ensure I picked it up a second time – Sligo

Answer 2

If you're using replaceWith(), you're replacing #listdata with a brand new element altogether.

If data isn't something like <div id="listdata"></div> then #listdata is disappearing after the replaceWith(). I'm thinking you should probably use html() instead.

Microcyte

Answer 3

Try:

$('a.refresh').live('click', function(e) {
    e.preventDefault();

    $.ajax({
        url: '_js/data.php',
        success: function(data) {
            $('#listdata').empty().html(data);
        }
    });
});

---

If the .refresh anchors are inside the #listdata element, then delegation is a more optimized solution:

var list = $('#listdata');

list.delegate('a.refresh', 'click', function(e) {
    e.preventDefault();

    $.ajax({
        url: '_js/data.php',
        success: function(data) {
            list.empty().html(data);
        }
    });
});

Johny

Keep in mind that with your .delegate() solution, you're replacing the #listdata element itself, so you'll lose the .delegate() handler. EDIT: You could do list.parent().delegate('#listdata a.refresh','cli... – Andras

Unfortunately this is the first thing I tried to no luck. I think Sam's answer is along the right lines, in that replaceWith is removing the div. Unfortunately I'm still no nearer to the answer. – Lymphosarcoma

@Lymphosarcoma ... but if the .refresh elements are not inside the #listdata element, then you don't need to use live/delegate and just click is fine. – Etymology

Answer 4

You'll need to change the href's on your links to <a href="#">...</a>. This prevents the browser from refreshing when you click the link.

If you're doing things this way, you'll also want to stick a "return false" at the end of the click handler to prevent bubbling.

Coda

Also, bubbling is not an issue here. – Etymology