Steggie Steggie - 4 months ago 10
Ajax Question

Re-populating a div when AJAX is complete

I'm trying to re-populate a div after AJAX has finished with the updated values.
This is the AJAX code that I'm trying to use.

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
//so load your lightbox or JS scripts here again
$( ".things" ).refresh();
});


My console now says
refresh is not a function
which is correct. Because I haven't written a function. The thing is, I don't really know how to write a function to refresh the div
.things
. I hope someone here could help me?

I tried this:

function refresh {
$('.things').load(document.URL + ' .things');
}


But that give me a syntax error and I don't know if this is the right way to go?

Here is my console log.

S&F JS initialised script:125:4
ajax start script:110:5
ajax complete script:118:4
TypeError: $(...).refresh is not a function


thanks in advance!

Jai Jai
Answer

change this:

$( ".things" ).refresh();

to this only:

refresh();

and just noticed you have missed or there is a typo here:

function refresh { // here you don't have () as functions requires these.

refresh(); is a function not a method to bind on the selector.


As per your comment you can pass the selector in function's args and use it like:

function refresh($el){
    $el.load(document.URL +  ' .things');
}

now you can call it like:

refresh($('.things'));