Question

抓住我的头。使用jQuery选项卡，我试图在加载之前使用ajaxOptions将数据发布到页面。

所以我在带有一些输入字段的标签页面上有一个表单。即，

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

然后我的标签

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

它执行post请求但表单数据始终为空。

任何想法为什么？

由于

利

Answer 1

因为这在您首次创建标签时运行：

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

You can test it out here，只需查看Firebug等，就可以看到表格数据正在更新，并随每个标签AJAX请求一起发送。

jquery使用ajaxOptions选项卡

1 个答案: