How do I use Zurb Foundation 4 Sections (tabs) with my javascript Ajax?

Question

I am using the Zurb Foundation 4.1.5 for my application and I am trying to use Zurb Section Javascript to manage "tabs" on the page. However, the data in the tabs on my page is dynamic and loaded by Ajax calls. I need to know how to render or draw this data on the sections content.

My javascript methods

a) need to be notified whenever a Tab is selected.

b) need to be able to programmatically display or select the active tab

c) dynamically set the HTML content for each Tab: I have a moustache js template that will be combined with the result of jquery Ajax Call back to set the html for the tab.

Answer 1

Documenting my solution as I could not find this approach documented elsewhere.

This was the Section / Tabs definition html

 <div class="section-container auto" data-section>
            <section>
                <p class="title" data-section-title><a href="#p1">Section 1</a></p>
                <div class="content" data-section-content>
                    <p>Content of section 1.</p>
                </div>
            </section>
            <section>
                <p class="title" data-section-title><a href="#p2">Section 2</a></p>
                <div class="content" data-section-content>
                    <p>Content of section 2.</p>
                </div>
            </section>
        </div>

The following code is use to add javascript event handlers for tab selection

script>
    $(document).foundation();
</script>
<script type="text/javascript">

    $(document).ready(function() {
            $("a[href='#p1']").bind("click", function(){
                alert(" panel 1"); //panel 1 is about to be opened by user
        });

        $("a[href='#p2']").bind("click", function(){
            alert(" panel 2"); // panel 2 is about to be opened
        });

    });

Also note that Tab panels or sections can be opened by your javascript passing a click event like so :

  $("a[href='#p2']").click(); // this open tab p2

Note the Gotcha : The first time the page is loaded, the first tab will be displayed by default and your handler for the first tab will not be called; If you are planning on loading ajax data for tab 1 (panel 1 in this example), you can not do it .

Answer 2

For those using Foundation 5, this works well for me:

HTML :

<dl class="tabs" id="clientTabs" data-tab>
    <dd class="active">
        <a id="GeneralInformationTab" href="#GeneralInformationTab">
            General Information
        </a>
    </dd>
    <dd>
        <a id="ContactDetailsTab" href="#ContactDetailsTab">
            Contact Details
        </a>
    </dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="tabContent">
        <p>First panel content goes here...</p>
    </div>
</div>

JS:

<script>
    $('#clientTabs').on('toggled', function (event, tab) {
        var currentTab = tab.context.id;        
        $('#tabContent').empty();
        $('#tabContent').load('/Home/' + currentTab);
    });
</script>

Controller:

public ActionResult GeneralInformationTab()
{
    return PartialView("Partials/GeneralInformation");
}

public ActionResult ContactDetailsTab()
{
    return PartialView("Partials/ContactDetails");
}

It loads the content for each tab dynamically, building up a request URL in load() which gets the partial view. I'll be trying this with forms and postbacks soon and will update this answer if needs be.

This is quite new to me so I accept it may not be a perfect solution. Please suggest any improvements via comments and I'll update my answer.