Menu icon Foundation
Tabs - Cannot read property 'hash' of undefined

I have the tab plugin code inside of an ExpressionEngine template and am generating the tabs and panels with a channel loop. When I click each tab my URL is appended with the panel ID, but the panels do not change. in console I am receiving the following error: 

 

app.min.js:3 TypeError: Cannot read property 'hash' of undefined(…)

(anonymous function) @ app.min.js:3
ot.extend.each @ app.min.js:1
ot.fn.ot.each @ app.min.js:1
(anonymous function) @ app.min.js:3
ot.extend.each @ app.min.js:1
o.reflow @ app.min.js:3a @ app.min.js:3
(anonymous function) @ app.min.js:6
app.min.js:6 

Uncaught TypeError: Cannot read property 'id' of undefined

_createClass.value @ app.min.js:6
e @ app.min.js:6
(anonymous function) @ site.min.js:1
u @ app.min.js:2
c.fireWith @ app.min.js:2
ot.extend.ready @ app.min.js:2
a @ app.min.js:1

 

And here is the template code:

 

<ul class="tabs" data-tabs id="xxxxxxTabs">
     {exp:channel:entries channel="xxxxxx" disable="member_data|pagination|trackbacks" dynamic="off" orderby="xxxxxx" sort="asc"}
          <li><a class="tabs-title{if count == 1} is-active{/if}" href="#{url_title}">{title}</a></li>
     {/exp:channel:entries}
</ul>
<div class="tabs-content" data-tabs-content="xxxxxxTabs">
     {exp:channel:entries channel="xxxxxx" disable="member_data|pagination|trackbacks" dynamic="off" orderby="xxxxxx" sort="asc"}
          <div id="{url_title}" class="tabs-panel{if count == 1} is-active{/if}">
	       <h4>{title}</h4>
               {exp:csv_to_table file="{calendar_csv_upload}" replace_site_root="xxxxxx" first_header_rows="yes" delimiter="tab"}
          </div>
     {/exp:channel:entries}
</div>

 

I tried destroying and recreating the tabs on pageload, but I get a repeat of the error, so it has to be something with the plugin itself and not the load order. 

 

$(document).ready(function() {
   var foo = new Foundation.Tabs($("#xxxxxTabs"));
   foo.destroy();
   foo = new Foundation.Tabs($("#xxxxxxTabs"), { 
       autoFocus: true
   });
});

tabssitesjavascript

I have the tab plugin code inside of an ExpressionEngine template and am generating the tabs and panels with a channel loop. When I click each tab my URL is appended with the panel ID, but the panels do not change. in console I am receiving the following error: 

 

app.min.js:3 TypeError: Cannot read property 'hash' of undefined(…)

(anonymous function) @ app.min.js:3
ot.extend.each @ app.min.js:1
ot.fn.ot.each @ app.min.js:1
(anonymous function) @ app.min.js:3
ot.extend.each @ app.min.js:1
o.reflow @ app.min.js:3a @ app.min.js:3
(anonymous function) @ app.min.js:6
app.min.js:6 

Uncaught TypeError: Cannot read property 'id' of undefined

_createClass.value @ app.min.js:6
e @ app.min.js:6
(anonymous function) @ site.min.js:1
u @ app.min.js:2
c.fireWith @ app.min.js:2
ot.extend.ready @ app.min.js:2
a @ app.min.js:1

 

And here is the template code:

 

<ul class="tabs" data-tabs id="xxxxxxTabs">
     {exp:channel:entries channel="xxxxxx" disable="member_data|pagination|trackbacks" dynamic="off" orderby="xxxxxx" sort="asc"}
          <li><a class="tabs-title{if count == 1} is-active{/if}" href="#{url_title}">{title}</a></li>
     {/exp:channel:entries}
</ul>
<div class="tabs-content" data-tabs-content="xxxxxxTabs">
     {exp:channel:entries channel="xxxxxx" disable="member_data|pagination|trackbacks" dynamic="off" orderby="xxxxxx" sort="asc"}
          <div id="{url_title}" class="tabs-panel{if count == 1} is-active{/if}">
	       <h4>{title}</h4>
               {exp:csv_to_table file="{calendar_csv_upload}" replace_site_root="xxxxxx" first_header_rows="yes" delimiter="tab"}
          </div>
     {/exp:channel:entries}
</div>

 

I tried destroying and recreating the tabs on pageload, but I get a repeat of the error, so it has to be something with the plugin itself and not the load order. 

 

$(document).ready(function() {
   var foo = new Foundation.Tabs($("#xxxxxTabs"));
   foo.destroy();
   foo = new Foundation.Tabs($("#xxxxxxTabs"), { 
       autoFocus: true
   });
});
Tommy McGahee over 3 years ago

When did the spam start on the forums?