在 Rails 中使用 ajax 实现 jquery ui 选项卡？答案

【问题标题】：Implement jquery ui tabs with ajax in Rails?在 Rails 中使用 ajax 实现 jquery ui 选项卡？
【发布时间】：2011-04-01 14:26:51
【问题描述】：

有谁知道我在哪里可以找到一些在 Ruby on Rails 3 中使用 jquery ui 实现 ajax 选项卡的示例代码？根据我为表单和评论处理找到的示例，我找不到任何我似乎无法让它工作的东西。请注意，我对 ruby on rails 很陌生。

基于来自 jquery 站点的带有 ajax 示例的 jquery ui 选项卡，我有以下代码：

简单控制器 - maps_controller.rb

  def index
  end

  def test1
    @test = "test string"
  end

关联视图 - index.html.erb

<script>
        $(function() {
            $( "#tabs" ).tabs({
                ajaxOptions: {
                    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." );
                    }
                }
            });
        });
        </script>



<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#content_area">Preloaded</a></li>
        <li><%= link_to "Test1" , test1_path %></li>
    </ul>
    <div id="content_area">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

</div><!-- End demo -->

test1.html.erb

<%= @test %>

ajax 功能似乎可以工作。单击 test1 选项卡时，整个页面将加载到具有适当数据的 div 中。显然这不是所需的功能 - 我只想显示 test1.html.erb，而不是使用 application.html.erb 呈现。

我还发现了各种使用 .js.erb 文件约定的特定于 Rails 的示例。 (http://blog.bernatfarrero.com/jquery-and-rails-3-mini-tutorial/)

对此的任何意见都会很棒。

【问题讨论】：

你有什么代码可以开始吗？
对不起，应该把它放进去开始。见编辑。
我发现使用 render :layout => false 可以解决问题。但是，我不觉得这是使用 ajax 的正确 Rails 方式，因为它并不引人注目。
使用渲染 :layout => false 很好 :-)
是的，我指的是我上面使用的整个过程。我想在我的 .html.erb 文件中找到一个不需要 javascript 的更优雅的解决方案。

标签： ruby-on-rails ajax jquery-ui jquery

【解决方案1】：

将您的 javascript 代码放在 application.js 文件中，将其包含在您的视图中，您就可以开始了。

【讨论】：

【解决方案2】：

https://github.com/joliss/jquery-ui-rails
这使得在 ruby on rails 中实现 jquery-ui 变得非常容易。

【讨论】：