在 Rails 中，当我使用 jquery-ui 选项卡功能单击选项卡时，如何获取要呈现的文件内容？

Question

我正在使用 Rails 4。我想要一个选项卡式界面，所以我认为 JQuery UI 可以胜任这项任务。但是，我想要的是当用户单击每个选项卡时，我的局部视图中的内容会在该选项卡中呈现 (div)。所以我的选项卡，在我的“app/views/admin/index.html.erb”文件中，当前显示如下……

<div id="tabs">
  <ul>
    <li><a href="list">Current Objects</a></li>
    <li><a href="add">Add Object</a></li> 
    <li><a href="approve">Approve Objects</a></li> 
  </ul>
</div>

<div id="list"></div>

<div id="add"></div>

<div id="approve"></div>

我有这些片面的看法

app/views/admin/_add.html.erb
app/views/admin/_list.html.erb
app/views/admin/_approve.html.erb

然后我的 app/assets/javascripts/admin.coffee 文件中有这个

$(document).on 'ready page:load', -> $( "#tabs" ).tabs()

如何点击每个选项卡，将上面部分内容的内容渲染到显示区域？我目前在我的控制器中有这个，

  def list
    @page_id = "list"
    @my_objects = MyObject.all
    render "index"
  end

  def add
    @page_id = "add"
    @my_object = MyObject.new
    render "index"
  end

  def create
  end

  def approve
    @page_id = "approve"
    @my_objects = MyObject.where(enabled: [false, nil])
    render "index"
  end

但这行不通。谢谢，-戴夫

Answer 1

据我了解你的问题，而不是渲染索引 render index。

您删除 render index 并且 rails 将自动呈现您在问题中提到的 3 个部分之一，并且在部分中您可以显示相应的 div.

如果有帮助请告诉我。

Answer 2

你有没有试过

<div id="tabs">
  <ul>
    <li><a href="list">Current Objects</a></li>
    <li><a href="add">Add Object</a></li> 
    <li><a href="approve">Approve Objects</a></li> 
  </ul>
</div>
<% # if files do not live in the same direcotory %>
<div id="list"><%= render 'admin/list' %></div>
<div id="add"><%= render 'admin/add' %></div>
<div id="approve"><%= render 'admin/approve' %></div> 

<% # if files live in the same direcotory %>
<div id="list"><%= render 'list' %></div>
<div id="add"><%= render 'add' %></div>
<div id="approve"><%= render 'approve' %></div>

Answer 3

你可以这样做：

<div id="tabs">
  <ul>
    <li>
      <a href="list" id="list_tab" class="tab_anchors">Current Objects</a>
    </li>
    <li>
      <a href="add" id="add_tab" class="tab_anchors">Add Object</a>
    </li> 
    <li>
      <a href="approve" id="approve_tab" class="tab_anchors">Approve Objects</a> 
    </li> 
  </ul>
</div>

<div id="list"></div>

<div id="add"></div>

<div id="approve"></div>

<script>
  $(function(){
    $('.tab_anchors').click(function(){
      var tab_id = $(this).attr('id');
      if (tab_id == 'list_tab') {
        var url = '/list';
        var rendering_div = $('#list');
      } else if (tab_id == 'add_tab') {
        var url = '/add';
        var rendering_div = $('#add');
      }
      else{
        var url = '/approve';
        var rendering_div = $('#approve');
      }
     // Assuming the request is of 'GET' type.
      $.ajax({
        type: 'GET',
        url: url,
        data: {},
        success: function(data) {
          rendering_div.html(data);
        }
      })
    })
  })
</script>

然后像这样更改您的控制器：

  def list
    @page_id = "list"
    @my_objects = MyObject.all
    render :partial => "admin/list"
  end

  def add
    @page_id = "add"
    @my_object = MyObject.new
    render :partial => "admin/add"
  end

  def create
  end

  def approve
    @page_id = "approve"
    @my_objects = MyObject.where(enabled: [false, nil])
    render :partial => "admin/approve"
  end

在 Rails 中，当我使用 jquery-ui 选项卡功能单击选项卡时，如何获取要呈现的文件内容？

In Rails, how do I get contents of a file to render when I click on tabs using the jquery-ui tabs functonality?

jquery-ui

ruby-on-rails-4

tabs

partial