Jquery tabs with ajaxOptions

Question

Scratched my head over it. With jQuery tabs, I'm trying to use ajaxOptions to send data to a page before loading it.

So, I have a form on the page in front of my tabs with some input fields. i.e,

<form id="myform" method="post">
<!-- inputs etc -->
</form>

Then my tabs

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
  </ul>

  <div id="tabs-1">
    <p>Initital content</p>
  </div>
</div>

ok, so now I should be able to serialize my form, so when you click the tab, it should be a post request, i.e.

$( "#tabs" ).tabs({
    ajaxOptions: {
        type: 'post',
        data: $("#myform").serialize(),
        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." );
        }
    }
});

It executes a submit request, but the form data is always empty.

Any ideas why?

thank

Lee

Answer 1

Since this is done when you first create tabs:

data: $("#myform").serialize(),

- , , . - , , select event, :

$( "#tabs" ).tabs({
  select: function() {
    $(this).tabs("option", { ajaxOptions: { data: $("#myform").serialize() } });
  },
  ajaxOptions: {
    type: 'post',
    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." );
    }
  }
});

, Firebug .., , . AJAX.