jqueryjquery-uijquery-ui-tabs

jQuery UI Tabs giving a 'Mismatching fragment identifier' error message


While trying to implement some jQuery UI Tabs using AJAX I keep running into this error in Firebug: uncaught exception: jQuery UI Tabs: Mismatching fragment identifier

Relevant HTML here:

<h1>AJAX Tabs</h1>
<div id="tabs">
    <ul>
        <li><a href="chap1.htm">Chapter 1</a></li>
        <li><a href="chap2.htm">Chapter 2</a></li>
        <li><a href="chap3.htm">Chapter 3</a></li>
    </ul>
</div>

Relevant jQuery here:

$(init);

function init() {  
$("#tabs").tabs();  
}//end init

There seem to be other people who run into the same error, but they seem to have other problems with their pages or are implementing tabs in very different ways.

According to Firebug, the first request seems to run and the response is received, but the requested snippet is not then displayed. Afterwards, any other AJAX requests just receive the error above.

I do notice that although I defined the links as discreet HTML snippets, they seem to get treated like objects by jQuery.

Other than that I am totally in the dark as to what the cause of the problem is or how I would go about repairing it. Any help would be greatly appreciated.


Solution

  • you are using an old version of jQuery-ui library (1.7.2)

    jQuery UI 1.7.2 is not supported with jQuery 1.4.x. and above (you have 1.6.4)

    please update both jQuery and jQuery-ui libraries to latest release

    http://jquery.com/

    http://jqueryui.com/home