3

We're currently building several content types in a new DXA project, one of which is a page with tabs based on the demo - unfortunately we can't get it to work: when a tab is clicked, neither the content for that tab, or the CSS-properties for that tab are loaded: http://progue.co/dev/cm/tabs/tabbed.html

The only related error I can see is

Uncaught Error: Syntax error, unrecognized expression: .tab-group a[href=#tab3]

but no clue what exactly causes this or if this is what's keeping the system from working.

Any help would be greatly appreciated!

Thanks, Rudolf

Improve this question

1 Answer 1

Reset to default
1

When I look at your published site, I notice also the following error:

Uncaught ReferenceError: jQuery is not defined

So looks like jQuery is somehow not loaded, I have a slight idea that http://progue.co/dev/cm/tabs/system/assets/scripts/main.js is a bit small, sounds like some stuff has been stripped from it, could that be a possibility?

Update

HTML design and JavaScript is not my speciality, but looking at http://progue.co/dev/cm/tabs/tabbed.html, I see there are quite some diferences between the Bootstrap based HTML design of DXA and your HTML, when I paste the following in your page, that works for me:

<!-- Tab container -->
<div class="panel-body tab-container">
    <!-- Tab nav mobile -->
    <div class="dropdown visible-xs">
        <select class="tab-group form-control" data-toggle="tab">
            <option value="#tab11" data-toggle="tab">Tab Eleven</option>
            <option value="#tab22" data-toggle="tab">Tab Twentytwo</option>
        </select>
    </div>
    <!-- Tab nav desktop -->
    <ul class="tab-group nav nav-tabs hidden-xs">
        <li class="active"><a href="#tab11" data-toggle="tab">Tab Eleven</a></li>
        <li><a href="#tab22" data-toggle="tab">Tab Twentytwo</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="tab11">
            Tab Eleven. Lorem ipsum dolor sit amet.
        </div>
        <div class="tab-pane" id="tab22">
            Tab Twentytwo. Lorem ipsum dolor sit amet.
        </div>
    </div>
</div>

Which means the jQuery is correctly loaded, but you have some problems in the HTML as the tab objects which should be tied together with jQuery cannot be found or something. You might want to take a look at http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp for some pointers on what is wrong, or perhaps get some help from the Bootstrap community.

Update 2

I guess I'm better than I said with HTML, if you add class="tab-container" to line 181 of your HTML, it works for me (there are some CSS issues after that, but I'll let you figure out the fine details ;o).

<!-- Titel -->
<div data-active-tab="#Kennismaking" class="tab-container">
    <article class="title-intro tabbed">

But I'd consider taking another close look at your HTML, since data-active-tab="#Kennismaking" probabaly doesn't belong in that page at all, and also it is not good HTML5 practice to use an <article> element to wrap your tabs in (it is not an article, it only contains the names of your tabs). Using semantic HTML5 elements like <article>, means you wrap stuff in the correct element, or simply use non-semantic elements like <div> and <span>.

Improve this answer
6
  • Hi Bart, thanks for the comment. The last point you mention (the small script) was an upload error - I retried and the JS is the same as the original demo now. As for jQuery: I don't believe jQ is required in the original demo, correct? bkoopman.github.io/tri/lists/tabs.html#tab_tab1
    – Rudolf van der Ven
    Commented Mar 31, 2016 at 11:29
  • @RudolfvanderVen It most certainly is, our HTML design is Bootstrap based and heaviliy relies on jQuery, the tabs is all jQuery as far as I know.
    – Bart Koopman
    Commented Mar 31, 2016 at 12:48
  • Just found out that jQuery is indeed embedded in the main.js (my bad, but so used to jQuery CDNs). Anyway, as main.js is the same as the demo now, we can rule out jQuery causing the problem. Any other ideas?
    – Rudolf van der Ven
    Commented Mar 31, 2016 at 14:15
  • @RudolfvanderVen updated my answer
    – Bart Koopman
    Commented Apr 1, 2016 at 9:47
  • Hi Bart, thanks for the insight! So here's the funny thing: everything works, except the reverse "link to tab" system, where the right tab opens after passing the right parameter in the URL. The right tab is not opened, and I get an error "Uncaught Error: Syntax error, unrecognized expression: .tab-group a[href=#tab1] xpm.js:14 in XPM: false" from the jquery.js file. My first check was to use your hardlinked main.js instead of ours and bingo, it worked. I'm going to have to plow through the JS for this, but just checking if you happen to have a quick Eureka here first. Thanks!
    – Rudolf van der Ven
    Commented Apr 6, 2016 at 9:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.