Menu icon Foundation

Coder | The Sunny Side of the Alps

My Posts




My Comments

bonovski commented on Rogerio IT's post about 1 month

@Rogerio IT
Where in your code did you add:
$(document).ajaxComplete(function(){ $(document).foundation(); });

bonovski commented on Rogerio IT's post about 1 month

@Rogerio IT
Where in your code did you add:
$(document).ajaxComplete(function(){ $(document).foundation(); });

bonovski commented on Rogerio IT's post about 1 month

@Rogerio IT
Where in your code did you add:
$(document).ajaxComplete(function(){ $(document).foundation(); });

bonovski commented on Antonio Riccardi's post 9 months

Since my new posts are marked as spam I might as well try in this one:
The question: How to reinit an accordion in ajax in 6.4.4rc1?
Code in main scripts.js ( I'm using gulp):
 
//Scripts.js
//main javascript file

import $ from 'jquery';

import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';

$(document).foundation();

import motionUI from 'motion-ui';

import foundationDatepicker from 'foundation-datepicker';

import { slickInit } from './slick/slick-init.js';

$(window).on('load', function(slick) {

Foundation.reInit($('[data-equalizer]'));

});
This all works as expected.
 
The issue is with ajax generating a list of accordions.
So, the developer who coded the ajax functions used $("#element").foundation(); at the end of success: function(data) {}
Since my knowledge of ajax and js is limited I imagine to reflow/reinit the accordion.
However, this doesn't work as I get a "foundation is not a function" error.
I would greatly appreciate any hints/helps.

bonovski commented on Andrew Grant's post 10 months

I think I figured it out, @include foundation-grid did the trick.

bonovski commented on Andrew Grant's post 10 months

I am using the sass version
For compatibility reasons I absolutely must use the float grid for a part of my project, otherwise I can use the XY grid.
 
How can both grids be used simultaneously in one project?
 
 
 
 

bonovski commented on bonovski's post almost 2 years

Thanks for the link, I fixed the problems below:
Expanded buttons solution
.button {
&.expand, &.expanded {
td:not(.expander) {
width: 100%;
}
}
}
table.button.expand, table.button.expanded {
width: 100%;
}
Social media buttons (remove !important and add a border with same color to override the default)
table.button.facebook table td {
background-color: #3B5998;
border-color: #3B5998;
}
table.button.facebook table td a {
border: 1px solid #3B5998;
}
The only problem left is the margin between the buttons.
https://github.com/zurb/foundation-emails/issues/414
This solution doesn't work for me.

Posts Followed




  • 5
    Replies
  • Accordion + Ajax

    By Antonio Riccardi

    accordionAJAX

    Hi guys, I need to load accordion structure from an AJAX call. Well I can create it but 'obviously' it doesn't work. I suppose it's beacuse accordion needs to restarted the point I didn't understan how! Sorry for the dumb question,I'm just a beginner!  

    Last Reply by kuldeep paji 9 months ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Rogerio IT's post about 1 month

@Rogerio IT
Where in your code did you add:
$(document).ajaxComplete(function(){ $(document).foundation(); });

You commented on Rogerio IT's post about 1 month

@Rogerio IT
Where in your code did you add:
$(document).ajaxComplete(function(){ $(document).foundation(); });

You commented on Rogerio IT's post about 1 month

@Rogerio IT
Where in your code did you add:
$(document).ajaxComplete(function(){ $(document).foundation(); });

You commented on Antonio Riccardi's post 9 months

Since my new posts are marked as spam I might as well try in this one:
The question: How to reinit an accordion in ajax in 6.4.4rc1?
Code in main scripts.js ( I'm using gulp):
 
//Scripts.js
//main javascript file

import $ from 'jquery';

import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';

$(document).foundation();

import motionUI from 'motion-ui';

import foundationDatepicker from 'foundation-datepicker';

import { slickInit } from './slick/slick-init.js';

$(window).on('load', function(slick) {

Foundation.reInit($('[data-equalizer]'));

});
This all works as expected.
 
The issue is with ajax generating a list of accordions.
So, the developer who coded the ajax functions used $("#element").foundation(); at the end of success: function(data) {}
Since my knowledge of ajax and js is limited I imagine to reflow/reinit the accordion.
However, this doesn't work as I get a "foundation is not a function" error.
I would greatly appreciate any hints/helps.

You commented on Andrew Grant's post 10 months

I think I figured it out, @include foundation-grid did the trick.

You commented on Andrew Grant's post 10 months

I am using the sass version
For compatibility reasons I absolutely must use the float grid for a part of my project, otherwise I can use the XY grid.
 
How can both grids be used simultaneously in one project?
 
 
 
 

You commented on bonovski's post almost 2 years

Thanks for the link, I fixed the problems below:
Expanded buttons solution
.button {
&.expand, &.expanded {
td:not(.expander) {
width: 100%;
}
}
}
table.button.expand, table.button.expanded {
width: 100%;
}
Social media buttons (remove !important and add a border with same color to override the default)
table.button.facebook table td {
background-color: #3B5998;
border-color: #3B5998;
}
table.button.facebook table td a {
border: 1px solid #3B5998;
}
The only problem left is the margin between the buttons.
https://github.com/zurb/foundation-emails/issues/414
This solution doesn't work for me.

Posts Followed

Following

  • No Content

Followers

  • No Content