Foundation Tabs/content loaded with Jquery

Question

I'm using Foundation 6. I have a select that when you select something it loads the info on the right of it. Everything loads as expected. The problem being that the tabs don't switch. Everything is loaded correctly but it just doesn't tab over. Here is an example.

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}

php page-

<div>content</div>
<div>content</div>

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel4" aria-selected="true">Info</a></li>
  <li class="tabs-title"><a href="#panel1">2013</a></li>
  <li class="tabs-title"><a href="#panel2">2014</a></li>
  <li class="tabs-title"><a href="#panel3">2015</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
 <div class="tabs-panel" id="panel1">
   STUFF
 </div>
 <div class="tabs-panel" id="panel2">
   STUFF
 </div>
 <div class="tabs-panel" id="panel3">
   STUFF
 </div>
 <div class="tabs-panel is-active" id="panel4">
   STUFF
 </div>
</div>

Main page -

<div class="large-10 columns" id="txtHint">
</div>

They just don't seem to load even though the ids are loaded correctly.

In your example, the tab content is "STUFF" for each tab? When you switch tabs, you won't see any change. — Yass, Mar 06 '16 at 09:36
@Yass no I just put stuff to avoid pasting hundreds of lines of code. — Kyle Dunne, Mar 06 '16 at 11:37
Are you calling `$(document).foundation()` after populating the tab contents? Are there any errors in the console? — Yass, Mar 06 '16 at 11:40
@Yass no errors in my console. If I run `$(document).foundation()` in my console it works. Maybe I'm putting `$(document).foundation()` in the wrong spot. Where would that normally go? — Kyle Dunne, Mar 06 '16 at 12:04
@Yass I have it at the bottom of the main page body. Tried throwing it into the page I'm getting data from too. — Kyle Dunne, Mar 06 '16 at 12:12
Show an example of how you're calling `showUser`. Can you maybe create a simplified [fiddle](https://jsfiddle.net) that replicates your problem? — Yass, Mar 06 '16 at 12:14
@Yass Got it by putting it in one of my script ifs. Thanks though, I appreciate the help with pointing out the `$(document).foundation()`. — Kyle Dunne, Mar 06 '16 at 12:30

score 0 · Answer 1 · edited May 23 '17 at 11:45

Looks like this was largely answered by @Yass in the comments, so I will address some ways that you might trouble shoot this in general.

When you are using a JS component in ZURB Foundation (annotated with a JS in the Docs) and you don't see the correct behavior, here are some good ways to troubleshoot.

1) Add the boilerplate example from the ZURB Foundation Docs that is most similar to what you are trying to do. In this case, one of the tab examples.

Does it work? If so then the error is mostly likely in the structure of your html. Missing tags, missing attributes, misspelled tags or attributes, non-closed tags, non-closed quotes, the usual suspects.

If not...

2) Check to see if jQuery is running.

once running...

3) Check to see if you can instantiate ZURB Foundation. Type the following into the JS console.

$(document).foundation();

Does your JS component work correctly? If so, then you need make sure you instantiate ZF. This is commonly done in the app.js or application.js file that is linked in the default project. You can also do this with a script tag after you load jQuery and ZURB Foundation (in that order).

If not, then you likely have not loaded the proper ZURB Foundation JavaScript files.

Foundation Tabs/content loaded with Jquery

1 Answers1