Menu icon Foundation
Bind Foundation 5 Clearing to dynamically loaded images

Title pretty much sums it up.

I'm building an AJAX heavy website built on Foundation 5.

I have products being loaded dynamically via AJAX, each product has a few images which I want to display nicely using Foundation 5's Clearing.js. The newly created elements retrieved via AJAX do not trigger clearing functions when clicked ( new elements added using .html() ).

The way I see it, I have two prominent solutions:

a) Somehow rebind the clearing events to the newly added elements; or

b) Hook into the Clearing.js to manually trigger opening/closing using Jquery's .on() function (not sure how to call these functions manually? And it seems hacky).

I have previously come accross a similar problem with event binding using Foundations Abide, but was able use this function call to rebind events:

$('#signup-form').foundation({bindings: 'events'});

But this approach is not working, as I can't find any docs for this on here...

Can anybody suggest a solution or point me in the right direction? Thanks in advance.

Also this question is on stack (http://stackoverflow.com/questions/21250187/bind-foundation-5-clearing-to-dynamically-loaded-images) if anyone wants to up their rep ;)

clearingAJAX

Title pretty much sums it up.

I'm building an AJAX heavy website built on Foundation 5.

I have products being loaded dynamically via AJAX, each product has a few images which I want to display nicely using Foundation 5's Clearing.js. The newly created elements retrieved via AJAX do not trigger clearing functions when clicked ( new elements added using .html() ).

The way I see it, I have two prominent solutions:

a) Somehow rebind the clearing events to the newly added elements; or

b) Hook into the Clearing.js to manually trigger opening/closing using Jquery's .on() function (not sure how to call these functions manually? And it seems hacky).

I have previously come accross a similar problem with event binding using Foundations Abide, but was able use this function call to rebind events:

$('#signup-form').foundation({bindings: 'events'});

But this approach is not working, as I can't find any docs for this on here...

Can anybody suggest a solution or point me in the right direction? Thanks in advance.

Also this question is on stack (http://stackoverflow.com/questions/21250187/bind-foundation-5-clearing-to-dynamically-loaded-images) if anyone wants to up their rep ;)

Karl Ward over 5 years ago

Sorry I have not tried this, but I imagined in Foundation 5 you could run "reflow". As stated in the interchange docs:

// If you add new content after the page has been loaded, you will need to trigger a reflow by running one of the following:
$(document).foundation('interchange', 'reflow');

// OR for all Foundation components
$(document).foundation('reflow');

Try $(document).foundation('clearing', 'reflow'); after adding elements to the html?

I would certainly vote for some improved documentation about how to work the Foundation Javascript modules. There are some scattered notations here and there, but there is very little information about how to trigger events, especially for Ajax websites.

Snyf over 5 years ago

Hi,

I'm looking for the same thing, but with accordion.js: i want to add dynamically somme dd row into a ever initialized dl accordion.

Right after adding a dd,
I tried:

$(document).foundation('interchange', 'reflow');
//what is interchange? x)

$(document).foundation('reflow');

$(document).foundation('accordion', 'reflow');

And did nothing.

So far, the only working solution i found was to add in the initial dom a "generic" accordion with one dd row, set up with the $(document).foundation();
Whene i want to dynamically add a new row in my accordion, i clone the row from the "generic" accordion,change his content, and append it in my accordion.

Something Like this:

<dl id="myAccordion" class="accordion" data-accordion>
<dd>
<a href="#id01"> title 01</a>
<div id="id01" class="content"> content 01</div>
</dd>
<!--etc, etc...-->
</dl>

<dl id="accordionTpl" class="accordion" data-accordion>
<dd>
<a href="#tplid">  title </a>
<div id="tplid" class="content"> content </div>
</dd>
<!--etc, etc...-->
</dl>
$newRow = $('#accordionTpl dd).clone();
$newRow.find('a).text('my title').attr('href', '#newID');
$newRow.find('.content).html('<p>my content</p>').attr('id, 'newID');
$newRow.appendTo('#myAccordion');

Work for my, but not sure that's can be apply on all foundation's jQuery features, and i think that's not the best solution...

Hot Belgo over 5 years ago

I'm also looking for a solution. $(document).foundation() works for an accordion, but the reason I am using ajx is to reload page content without touching the topbar where I have an audio player that I want to persist across pages. $(document).foundation() stops the music so this is a problem for me.

Edit: writing this made me think of moving the audio element elsewhere (it is hidden anyway), and then it was not affected by .foundation()

Adam Parks over 5 years ago

None of the solutions here worked for me. I have a page that uses jquery, ajax, and json to create a list of images with clearing after the page loads. When the images are clicked, it starts lightbox, but the list of images at the bottom, the ability to click through them, and the close "X" button are not there. Any ideas on what might be the cause for this and a possible solution?

UPDATE: After doing a little more searching I tried something else. Instead of using $(document).foundation('reflow'); which didn't work, I used a more specific identifier. $(div#something).foundation('reflow'); and that fixed the issue.

Neil Haskins over 5 years ago

I had a similar problem http://foundation.zurb.com/forum/posts/2518-modal-in-ajax-loaded-tabs

To see if the issue is that your reflow is running before your new content is ready you could try creating a separate link which would just run the reflow when clicked.

For Hot Belgo, try limiting the scope of the reflow from (document) to just the element you need to reflow, e.g. $('#reflowMe').foundation(reflow)