Question

我遇到了这样的问题：我正在使用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 );
      });
    }
  });
});

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

Answer 1

由于您在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 });

Answer 2

在你的控制器中试试这个

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

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

如何防止jquery UI ajax标签在rails 3中无休止地将请求发送回服务器？

2 个答案: