Menu icon Foundation
Foundation 6 Equalizer - Ajax Filled data

I am using an equalizer component on a row.  Each large-4 container is being populated with ajax scripts with google charts.  The timing is random and each refresh independently every minute.  Is there a function i can call after each graph draw to reflow/reinitialise the equalizer for that row?  I have tried $('#row1').foundation(); after each draw but it doesn't reequilize.  The three elements that change/get updated are #projects_by_dept, #budget_by_ci, #exec_summary.  I am hoping i am missing something easy.

 <div id="rowOne" class="row" data-equalizer>

                <div class="large-4 columns">
                    <div id="byDeptContainer" class="callout secondary" data-equalizer-watch>
                        <div class="report-title">Projects By Department</div>
                        <div id="projects_by_dept"></div>
                        <div class="updated" id="projects_by_dept_updated"></div>
                    </div>
                </div>

                <div class="large-4 columns">
                    <div class="callout secondary" data-equalizer-watch>
                        <div class="report-title">Projects by Budget and County Initiative</div>
                        <div id="budget_by_ci"></div>
                        <div class="updated" id="budget_by_ci_updated"></div>
                    </div>
                </div>

                <div class="large-4 columns">
                    <div class="callout secondary" data-equalizer-watch>
                        <div class="report-title">Executive Summary Details</div>
                        <table id="exec_summary" class="compact no-wrap" style="width: 100%">
                            <thead>
                                <tr>
                                    <th>Project</th>
                                    <th>% Complete</th>
                                    <th>Committed/Budget</th>
                                </tr>
                            </thead>
                        </table>
                        <div class="updated" id="exec_summary_updated"></div>
                    </div>
                </div>

            </div>

Equalizerfoundation 6AJAXReflow

I am using an equalizer component on a row.  Each large-4 container is being populated with ajax scripts with google charts.  The timing is random and each refresh independently every minute.  Is there a function i can call after each graph draw to reflow/reinitialise the equalizer for that row?  I have tried $('#row1').foundation(); after each draw but it doesn't reequilize.  The three elements that change/get updated are #projects_by_dept, #budget_by_ci, #exec_summary.  I am hoping i am missing something easy.

 <div id="rowOne" class="row" data-equalizer>

                <div class="large-4 columns">
                    <div id="byDeptContainer" class="callout secondary" data-equalizer-watch>
                        <div class="report-title">Projects By Department</div>
                        <div id="projects_by_dept"></div>
                        <div class="updated" id="projects_by_dept_updated"></div>
                    </div>
                </div>

                <div class="large-4 columns">
                    <div class="callout secondary" data-equalizer-watch>
                        <div class="report-title">Projects by Budget and County Initiative</div>
                        <div id="budget_by_ci"></div>
                        <div class="updated" id="budget_by_ci_updated"></div>
                    </div>
                </div>

                <div class="large-4 columns">
                    <div class="callout secondary" data-equalizer-watch>
                        <div class="report-title">Executive Summary Details</div>
                        <table id="exec_summary" class="compact no-wrap" style="width: 100%">
                            <thead>
                                <tr>
                                    <th>Project</th>
                                    <th>% Complete</th>
                                    <th>Committed/Budget</th>
                                </tr>
                            </thead>
                        </table>
                        <div class="updated" id="exec_summary_updated"></div>
                    </div>
                </div>

            </div>
Dimitris Gerasopoulos about 3 years ago

I thik the right one is

$('#rowOne').foundation();

or another quick and dirty solution would be to trigger a window resize after each graphh redraw

$(window).trigger('resize');