title: Passing variable via ajax with Jquery Tabs
body: <p>I am having a problem that I've been stuck on for days, and I just cant seem to figure it out. 
  I'm trying to pass a variable through AJAX using Jquery Tabs. </p>
  
  <p>Here is my use scenario: User loads page with JQuery tabs, default just being some text. On the page, I have a session variable containing there userid. When they click the 2nd tab, it passes that userid variable to the script. I can't get it to pass!</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/jquery-ui-1.8.23.custom.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="js/css/smoothness/jquery-ui-1.8.23.custom.css" /&gt;
  &lt;script&gt;
  var postData = {};
  $("#tabs").tabs({
  select: function(event, ui) {
      postData = {
          userid: parseInt($(ui.tab).data('userid'));
      };
  },
  ajaxOptions: {
      type: 'POST',
      data: postData,
      error: function(xhr, status, index, anchor) {
          $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
      }
  }
  });
  &lt;/script&gt;
  
  &lt;div id="tabs"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;Intro&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Custom/div_charts_test2.html" data-userid="1234"&gt;Department&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="tabs-1"&gt;
      &lt;p&gt;Text information goes here&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>