Menu icon Foundation
How to initialize foundation 6 on ajax loaded content

Hi all,

I have problem with foundation 6 range sliders (or javascript component in general). It works in main html but not in ajax loaded content.

How do I initialize foundation 6 after loading ajax content, or is it necessary in foundation 6?

In foundation 5, I used
...
success: function(data) {
$("#new").html(data).foundation('reflow');
}
...

Tried

console.log("before init");
$("#new").html(data).foundation();
console.log("after init");

However, only "before init" is logged, and slider is frozen.

foundation 6ajax contentrange slider

Hi all,

I have problem with foundation 6 range sliders (or javascript component in general). It works in main html but not in ajax loaded content.

How do I initialize foundation 6 after loading ajax content, or is it necessary in foundation 6?

In foundation 5, I used
...
success: function(data) {
$("#new").html(data).foundation('reflow');
}
...

Tried

console.log("before init");
$("#new").html(data).foundation();
console.log("after init");

However, only "before init" is logged, and slider is frozen.

Evgeniy Steponavichus over 3 years ago

Try:

$("#new").live("click", function(){
    $(this).html(data).foundation('reflow');
});

event "click" replace "load" or another

Brian Tan over 3 years ago

Found the solution:

$("#new").html(data);
$(document).foundation();

Apparently initilizing just the loaded element is not supported in F6.

Jessica over 2 years ago

Rafi,

Those links to the articles no longer work, as they take me straight to http://zurb.com/university/lesson-vault. Please revert to the way it was, where lessons were available to everybody.