Menu icon Foundation

My Posts


  • 1
    Reply
  • Ajax and foundation

    By Snyf

    AJAX

    Hi, I'm trying to deal with foundation's jquery feature, like accordion, and element dynamically added by ajax or wathever. For exemple, i succedded to dynamically add a complete dl accordion element to the dom and make it work with a $(document)... (continued)

    Last Reply by Karl Ward almost 6 years ago


My Comments

Snyf commented on Snyf's post over 5 years

okay, i allready found a fix, but i had to go in the source code :(

in foundation.orbit.js, for exemple at line 450:
i replace

next.removeClass("animate-in"); 

with

next.addClass('active').removeClass("animate-in"); 

i did this for line 464, 493 and 507 and it solved it for every case....

but i whant to use the minify production version... is there something else to do?

Snyf commented on Daniel Wild's post almost 6 years

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...

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Snyf's post over 5 years

okay, i allready found a fix, but i had to go in the source code :(

in foundation.orbit.js, for exemple at line 450:
i replace

next.removeClass("animate-in"); 

with

next.addClass('active').removeClass("animate-in"); 

i did this for line 464, 493 and 507 and it solved it for every case....

but i whant to use the minify production version... is there something else to do?

You commented on Daniel Wild's post almost 6 years

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...

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content