jquery ajaxOptionsのタブ

Question

私の頭をこすって傷つける。 jQueryのタブでは、ロードする前にajaxOptionsを使用してページにデータを投稿しようとしています。

私はいくつかの入力フィールドを持つタブの前にページ上のフォームを持っています。すなわち、

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

その後、私のタブOK

<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> 

は、今私は、タブをクリックすると、それはすなわち、

$("#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."); 
     } 
    } 
}); 

ポスト要求する必要があり、私のフォームをシリアル化することができるはずです投稿要求は実行されますが、フォームデータは常に空です。

なぜでしょうか？

おかげ

リー

Answer 1

あなたが最初のタブを作成するときに、これが実行されるので：データは、それがその後、たものは何でもある

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

、それが更新されたことがないです。

$("#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."); 
    } 
    } 
}); 

You can test it out hereを、単にフォームデータが更新され、それぞれに送信されている参照して、Firebugの中などを見て：それはこのように、タブのselect event使用することにより、必要なとき、ここで最も簡単な解決策は、そのデータを更新するだけですタブAJAXリクエスト。