Error in jQuery UI Tabs: Mismatching fragment identifier.

Question

Here's my code:

<div id="tablesTabs">
        <ul>
            <li><a id="changed" href="#changedTable"><% "Changed" %></a></li>
            <li><a id="unchanged" href="#changedTable"><% "Unchanged"%></a></li>
        </ul>
    </div>

<div id="tablesDiv">
        <div id="changedTable" style="width:100%; height:430px;"></div>
    </div>

And in a javasscript:

$(function () {
        $("#tablesTabs").tabs({
            cache: true
        }).scrollabletab();
        loadTables();
    });

if ($('#tablesTabs').tabs("option", "selected") == 0) {
    //fill table with data
}

if ($('#tablesTabs').tabs("option", "selected") == 1) {
    //fill table with other data
}

The first tab seems fine, the grid is alright. But when I click on the second tab I get error Uncaught jQuery UI Tabs: Mismatching fragment identifier. What is the problem and how to fix it?

Solution 1

First, I would see if the problem is that your two tabs have identical link in their href-attribute. Both have #changedTable, try having unique href for each tab.

Secondly, your tab setup looks unfamiliar to me. Maybe it's fine but I always have the content divs inside the tab div.

As:

<div id="tabs">
  <ul>
    <li><a href="#tab-1">Something</a></li>
    <li><a href="#tab-2">Something else</a></li>
  </ul>

  <div id="tab-1">
    <p>Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla.</p>
  </div>
  <div id="tab-2">
    <p>Curabitur ornare consequat nunc. Aenean vel metus.</p>
  </div>
</div>

Solution 2

The href of tab should have the # symbol and the id of the tab content can not have the #.

Solution 3

My case was the tab content where outside the tag, according to the official JQuery Example https://jqueryui.com/tabs/

<!-- error  -->

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
</div>

  <div id="tabs-1">
    <p>abc.</p>
  </div>
  <div id="tabs-2">
    <p>def.</p>
  </div>
  <div id="tabs-3">
    <p>ghi.</p>
  </div>

<!-- correct -->
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>abc.</p>
  </div>
  <div id="tabs-2">
    <p>def.</p>
  </div>
  <div id="tabs-3">
    <p>ghi.</p>
  </div>
</div>

Comments

[Daniel]

Is there any chance that one can have the tab contents outside the tabs div?

[J.G.Sebring]

@Daniel - I'm not sure, have you tried? Since it's id-scoped it should not be any problem but the the tab div might very well define the scope. Just try it it and you find out.

[MattD]

You can, but it appears to throw an error. The content will still switch properly, but yeah. I moved my content divs into the tabs div and my code no longer threw an error. Could also be due to me combining some JS items from Bootstrap causing conflicts, but simply moving them into the tabs div eliminated it so at this point I don't really care.

[sweaty]

Thank you, this comment helped me!

[Jared]

This applied to me when upgrading from an older jQuery UI to 1.12.1. The error case above worked prior to upgrading, but failed after upgrading.

[ionalchemist]

Moving the content divs inside the tab div did the trick for me. Many thanks!