Question

I have a problem with my jquery UI tabs currently only in Firefox 3.6.24 where the first tab will not be loaded. It is driving me insane because the xhr says that it has the html data.

jQuery v1.4.4 jQuery v1.8.18

wondering if there are some known issues around this and any fixes

  $(function() {
            $("#tabs").tabs({
                'cookie': {
                        'expires': 1
                    },
                'ajaxOptions': {
                    'error': function( xhr, status, index, anchor ) {
                        $( anchor.hash ).html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible.");
                    }
                },
                'spinner':"Loading..."
            });
        });

=====HTML=====

      <div id="tabs">
        <ul class="nav nav-tabs">
            <li><a href="/url/1">First tab</a></li>
            <li><a href="/url/2">Second tab</a></li>
            <li><a href="/url/3">Third tab</a></li>
            <li><a href="/url/4">Fourth tab</a></li>
        </ul>
     </div>

http://jsfiddle.net/Un2q4/1/

=====UPDATE=======

The problem was in the HTML the form element was being opened inside of a table and the form close tag was outside the close table tag. Lesson learned always validate your HTML.

Was it helpful?

Solution

You need to include jQuery cookie plugin. See below note from jQuery UI site.

The cookie option requires the cookie plugin, which can be found in the development-bundle > external folder from the download builder.

You can find it in github -> https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js

Fixed fiddle: http://jsfiddle.net/skram/Un2q4/5/

Without cookie option and cookie plugin: http://jsfiddle.net/skram/Un2q4/6/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top