0

我遇到了这样的问题：我正在使用 Rails 3.2.9 和 jqueryUI 1.9.0 我有一个选项卡 UI 并为每个选项卡使用 ajax。html 和 Javascript 代码是这样的：

<!-- index.html.erb -->
<div id="tabs">
  <ul>
    <li><a href="home/page1">page1</a></li>
    <li><a href="home/page2">page2</a></li>
  </ul>
</div>

<!-- page1.html.erb-->
<p>this is page 1</p>

<!-- page2.html.erb-->
<p>this is page 2</p>

在 home.js 中：

$(document).ready(function () {
  $( "#tabs" ).tabs();
});

因此，当我启动服务器并尝试激活任何选项卡时，前端将继续将请求发送回服务器。有谁知道这件事发生了什么？

谢谢

更新

我像这样更改 home.js 但仍然不起作用：

$(document).ready(function () {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
      }

      ui.jqXHR.success(function() {
        ui.tab.data( "loaded", true );
      });
    }
  });
});

我仍然找不到发生这种情况的原因。非常感谢你，如果有人能弄清楚。谢谢！

4

2 回答 2

0

在你的控制器中试试这个

respond_to do |format|
      format.html { render :layout => false }
end

这阻止了我继续循环请求。

于 2013-04-06T01:56:20.807 回答
0

因为您在 href 链接中指定了home/page1和home/page2，所以每次单击相关选项卡时都会加载它们。

相反，您可以index.html.erb通过将部分渲染到页面中来加载页面一次。如果您重命名page1.html.erb为_page1.html.erb，page2.html.erb您_page2.html.erb可以将代码更改为：

<div id="tabs">
    <ul>
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
    </ul>
    <div id="page1">
         <%= render 'home/page1' %>
    </div>
    <div id="page2">
         <%= render 'home/page2' %>
    </div>
</div>

编辑

如果您仍然想在单击每个选项卡时动态加载页面但只加载一次，那么不要使用部分 - 您可以只使用缓存选项：

 $( "#tabs" ).tabs({ 
            cache: true 
            //some other options 
  });
于 2012-12-05T22:48:57.997 回答