ajaxOptions with TABS

ajaxOptions with TABS

With jQuery tabs I am attempting to use ajaxOptions to post data to the page before I load it.

So I have a form on the page before my tabs with some input fields. ie,

  1.     <form id="myform" method="post">
  2.     <!-- inputs etc -->
  3.     </form>

Then my tabs

  1.     <div id="tabs">
  2.       <ul>
  3.         <li><a href="#tabs-1">Preloaded</a></li>
  4.         <li><a href="ajax/content1.html">Tab 1</a></li>
  5.       </ul>
  6.    
  7.       <div id="tabs-1">
  8.         <p>Initital content</p>
  9.       </div>
  10.     </div>

Now I should be able to serialize my form so when click a tab it should be a post request ie,

  1.     $( "#tabs" ).tabs({
  2.         ajaxOptions: {
  3.             type: 'post',
  4.             data: $("#myform").serialize(),
  5.             error: function( xhr, status, index, anchor ) {
  6.                 $( anchor.hash ).html(
  7.                 "Couldn't load this tab. We'll try to fix this as soon as possible. " +
  8.                 "If this wouldn't be a demo." );
  9.             }
  10.         }
  11.     });

It does perform the post request but the form data is always empty.

Any ideas why?