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.

Answer 1

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.