Issue with ips.ui.tabbar

[dschreiber]

Hello!

I'm having some issues with a simple tabbed interface using ips.ui.tabbar.  Content loads into my first tab via Ajax just fine, but when I click on the second tab, it appears to be loading, but the broswer then goes directly to the new URL.  It seems as if the Javascript in charge of switching tabs doesn't stop the default behavior of the second link:

<a href="https://forums.2600hz.com/forums/academy/user-guides/accounts-manager" role="tab" id="elTabTwo" class="ipsTabs_item">

Any suggestions?  Does anyone have a working example that I can see?

Thanks
Bret

    <article class="monster-ui-app">
      
      <header>
        <img src="https://cdn.2600hz.com/product-overviews/images/account_manager/account1.png" class="app-icon" />
        <h1>Account Manager</h1>
        <p>Multi-Tenant Account Management Interface</p>
      </header>
      
      <!-- The tab bar -->
      <div class="ipsTabs ipsClearfix" id="elTabBar" data-ipsTabBar data-ipsTabBar-contentArea="#elTabContent">
          <a href="#elTabBar" data-action="expandTabs"><i class="icon-caret-down"></i></a>
          <ul role="tablist">
              <li role="presentation">
                  <a href="https://forums.2600hz.com/forums/kazoo-platform-guides/monster-ui-apps/product-overviews/account-manager" role="tab" id="elTabOne" class="ipsTabs_item" aria-selected="true">
                      Product Overview
                  </a>
              </li>
              <li role="presentation">
                  <a href="https://forums.2600hz.com/forums/academy/user-guides/accounts-manager" role="tab" id="elTabTwo" class="ipsTabs_item">
                      User Guides
                  </a>
              </li>
          </ul>
      </div>
	  <section id="elTabContent"></section>
    </article>

 

[dschreiber]

We're still very stuck on this.  Any help would be much appreciated.

[dschreiber]

I'd like to follow up on this post with more information.  We've narrowed this down quite a bit and believe that it may be a bug in the forum software.  We've been able to break the tabs simply by changing the link's URL to a different page.  In fact, we can illustrate the problem just using the first tab's behavior and ignoring the second tab.  It's easiest to illustrate with an example:

 

WORKING

<!-- The tab bar -->
<div class="ipsTabs ipsClearfix ipsJS_show" id="elProductTabBar" data-ipsTabBar data-ipsTabBar-contentArea="#elProductTabContent" data-ipsTabBar-updateURL="false">
    <a href="#elProductTabBar" data-action="expandTabs"><i class="icon-caret-down"></i></a>
    <ul role="tablist" class="ipsList_reset">
        <li>
            <a href="https://forums.2600hz.com/forums/kazoo-platform-guides/monster-ui-apps/product-overviews/account-manager/" role="tab" id="elProductTabOne" class="ipsTabs_item" aria-selected="true">
                Product Overview
            </a>
        </li>

 

NOT WORKING

<!-- The tab bar -->
<div class="ipsTabs ipsClearfix ipsJS_show" id="elProductTabBar" data-ipsTabBar data-ipsTabBar-contentArea="#elProductTabContent" data-ipsTabBar-updateURL="false">
    <a href="#elProductTabBar" data-action="expandTabs"><i class="icon-caret-down"></i></a>
    <ul role="tablist" class="ipsList_reset">
        <li>
            <a href="https://forums.2600hz.com/forums/kazoo-platform-guides/monster-ui-apps/user-guides/accounts-manager" role="tab" id="elProductTabOne" class="ipsTabs_item" aria-selected="true">
                Product Overview
            </a>
        </li>

 

The only difference between the above two examples is the URL.  Here are those URLs side-by-side:

https://forums.2600hz.com/forums/kazoo-platform-guides/monster-ui-apps/product-overviews/account-manager/
https://forums.2600hz.com/forums/kazoo-platform-guides/monster-ui-apps/user-guides/accounts-manager

Both pages exist, have the same permissions, and have the same page settings.  

Here's a screen capture of the first example (working):

Here's what the second example looks like (not working):

1. First, the Ajax loader is shown:

2. Secondly, the entire page loads outside of the tabbed interface:

 

Behind the scenes, the second example throws the following 500 Internal Server Error:

This error only shows during the "broken" example.  Again, this doesn't appear to be a problem with our tabs.  I'm really lost.

Thanks!
Bret

 

[Rikki]

Do you have a link to the page where you're using the tabs, so I can take a look? Thanks  

[dschreiber]

Hi Rikki,

I totally appreciate the help.  It magically fixed itself over the evening, which is very strange.

Cheers,
Bret

[dschreiber]

I spoke too soon.  We created another page that's basically a copy of our original page, and those tabs aren't working.   So, one page using the tabs is working fine, but a duplicate page  Strange!  But I have some new information.  The error log is showing this:

The URL of page the error occurred on was https://forums.2600hz.com/forums/academy/user-guides/advanced-callflows/?csrfKey=[removed for security]

Error: Class name must be a valid object or a string (0)
#0 /var/www/html/forums/applications/cms/sources/Pages/Page.php(1862): IPS\_Theme::switchTheme(3)
#1 /var/www/html/forums/applications/cms/sources/Pages/Page.php(2162): IPS\cms\Pages\_Page->setTheme()
#2 /var/www/html/forums/applications/cms/modules/front/pages/page.php(73): IPS\cms\Pages\_Page->output()
#3 /var/www/html/forums/applications/cms/modules/front/pages/page.php(43): IPS\cms\modules\front\pages\_page->view()
#4 /var/www/html/forums/system/Dispatcher/Controller.php(96): IPS\cms\modules\front\pages\_page->manage()
#5 /var/www/html/forums/applications/cms/modules/front/pages/page.php(33): IPS\Dispatcher\_Controller->execute()
#6 /var/www/html/forums/system/Dispatcher/Dispatcher.php(146): IPS\cms\modules\front\pages\_page->execute()
#7 /var/www/html/forums/index.php(12): IPS\_Dispatcher->run()
#8 {main}

Backtrace:

#0 /var/www/html/forums/init.php(523): IPS\_Log::log('Error: Class na...', 'uncaught_except...')
#1 [internal function]: IPS\IPS::exceptionHandler(Object(Error))
#2 {main}

Thanks!
Bret

[dschreiber]

Ah, we fixed it!  Here's what the problem was:

Here are the themes available to us when creating pages:

Default Theme
IPS Default
4.2
2600hz
Default

The page containing the tabs was using our custom 2600Hz theme.  But the pages that were being loaded via ajax were using the theme "Default Theme".  Changing both of the Ajax loaded pages to using the "Default" theme (not "Default Theme", nor "IPS Default") solved the problem.

I would recommend adding documentation to ips.ui.tabbar documentation so that other users don't get bitten by this.

Cheers,
Bret