title: ASP.Net + JQuery Tabs: Using the Cookie Option Breaks my GUI
body: <p>I've got a tabbed GUI on a webpage using:  </p>
  
  <ul>
  <li>JQuery 1.4.2  </li>
  <li>JQuery-UI 1.8.9  (full download)</li>
  </ul>
  
  <p>The IDs for the 'pane' divs are GUIDs of domain objects in a database. Everything works as it should.</p>
  
  <p>But when I include the <code>cookie</code> option in the function call on</p>
  
  <pre><code>$(document).ready(function () {
      //$("#tabs").tabs(); //Without tabs works fine
  
      $("#tabs").tabs({    //This call with cookie option breaks everything.
          cookie: {
              expires: 1
          }
      });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>I've compared the source of both pages (with and without the <code>cookie</code> option) and they are <em>identical</em> apart from the call to the JQuery <code>tab</code> function.</p>
  
  <p>But the Javascript console reports an error:</p>
  
  <pre><code>cannot call method 'apply' of undefined
  </code></pre>
  
  <p><strike>Is there something else I need to do to get this to work? The documentation suggests not ... </strike></p>
  
  <p>I've inluded the cookies plugin as suggested by Nalum, but this hasn't solved the problem.</p>
  
  <p>Drilling into <code>jquery-ui-1.8.9.custom.min.js</code> gets me the offending bit of code:</p>
  
  <pre><code>return d.cookie.apply(null,[b].concat(d.makeArray(arguments ...
  </code></pre>
  
  <p>This code seems to be expecting <code>[b]</code> to be something like <code>ui-tabs-1</code> which is the way in which the tabs are IDed if you add tabs via the <code>tabs.add(...)</code> 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. </p>
  
  <p>Some HTML below for reference:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ul&gt;            
          &lt;li&gt;
              &lt;a href='#TabDiv471de30d-aaec-4485-8a50-1b2fdbc58053'&gt;
                  Tab A
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href='#TabDiv951e2fee-9272-4a8c-becb-3f3a07770347'&gt;
                  Tab B
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id='TabDiv471de30d-aaec-4485-8a50-1b2fdbc58053'&gt;
          This is Pane A
      &lt;/div&gt;
      &lt;div id='TabDiv951e2fee-9272-4a8c-becb-3f3a07770347'&gt;
          This is Pane B
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>