ASP.Net + JQuery Tabs: Using the Cookie Option Breaks my GUI

I've got a tabbed GUI on a webpage using:

• JQuery 1.4.2
• JQuery-UI 1.8.9 (full download)

The IDs for the 'pane' divs are GUIDs of domain objects in a database. Everything works as it should.

But when I include the cookie option in the function call on

$(document).ready(function () {
    //$("#tabs").tabs(); //Without tabs works fine

    $("#tabs").tabs({    //This call with cookie option breaks everything.
        cookie: {
            expires: 1
        }
    });
});

By 'breaks' I mean - the contents of my final tab (which includes a 'submit' button) ends up being displayed at the bottom of every tabbed page although the tab itself looks fine. None of the tabs open the corresponding pane when clicked, but I can see the correct tab id in the address bar on the browser when I click a tab.

I've compared the source of both pages (with and without the cookie option) and they are identical apart from the call to the JQuery tab function.

But the Javascript console reports an error:

cannot call method 'apply' of undefined

Is there something else I need to do to get this to work? The documentation suggests not ...

I've inluded the cookies plugin as suggested by Nalum, but this hasn't solved the problem.

Drilling into jquery-ui-1.8.9.custom.min.js gets me the offending bit of code:

return d.cookie.apply(null,[b].concat(d.makeArray(arguments ...

This code seems to be expecting [b] to be something like ui-tabs-1 which is the way in which the tabs are IDed if you add tabs via the tabs.add(...) function. And of course I don't add my tabs this way - all my tabs have GUID IDs which are related to elements which come from a DB and are output by a Repeater control.

Some HTML below for reference:

<div id="tabs">
    <ul>            
        <li>
            <a href='#TabDiv471de30d-aaec-4485-8a50-1b2fdbc58053'>
                Tab A
            </a>
        </li>
        <li>
        开发者_C百科    <a href='#TabDiv951e2fee-9272-4a8c-becb-3f3a07770347'>
                Tab B
            </a>
        </li>
    </ul>
    <div id='TabDiv471de30d-aaec-4485-8a50-1b2fdbc58053'>
        This is Pane A
    </div>
    <div id='TabDiv951e2fee-9272-4a8c-becb-3f3a07770347'>
        This is Pane B
    </div>
</div>

From the jQuery UI Docs, note: Requires cookie plugin.

Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selected option is not defined. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options (example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }. Since jQuery UI 1.7 it is also possible to define the cookie name being used via name property.