在Rails中，当我点击使用jquery-ui选项卡函数的选项卡时，如何获取要渲染的文件的内容？

问题描述：

我正在使用Rails 4.我想要一个选项卡式界面，所以我想到JQuery UI是由任务决定的。但是，我想要的是，当用户点击每个标签时，我的部分视图中的内容将呈现在该标签（div）中。所以我的标签，在我的“应用程序/视图/管理/ index.html.erb”文件，目前显示是这样的...在Rails中，当我点击使用jquery-ui选项卡函数的选项卡时，如何获取要渲染的文件的内容？

<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

然后，我有这我的应用程序/资产/ Java脚本/ 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

但这不起作用。谢谢， - 戴夫

jQuery是达任务，但是在Rails应用程序中，如果您希望在不重新加载页面的情况下更改页面内容，则必须包含Ajax +“不显眼的JavaScript”。 – Elvn

答

你可以做这样的事情：

<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

实际上，render ：部分是我需要的唯一东西，现在内容正在渲染。 – Dave

答

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

您删除render index并且导轨会自动呈现您在问题中提及的3个部分中的一个，并且部分可以显示相应的div。

让我知道它是否有帮助。

嗨，这是行不通的。当我从这些方法注释掉'render'索引''行，然后单击一个选项卡时，我的日志中会出现这500个错误，'ActionView :: MissingTemplate（缺少模板admin/add，application/add with {：locale => [：en]，：formats => [：html，：text，：js，：css，：ics，：csv，：vcf，：png，：jpeg，：gif，：bmp，：tiff，：mpeg ，：：xml，：rss，：atom，：yaml，：multipart_form，：url_encoded_form，：json，：pdf，：zip，：web_console_v2]，：variants => []，：handlers => [：erb，：builder，：raw，：ruby，：coffee，：jbuilder]}。搜索： *“/ Users/davea/Documents/workspace/myproject/app/views”' – Dave

因为你想拥有一些动态内容， href指向url'/ list'或'/ add'什么的（不知道你的路由文件）和'remote：true'，当你使用jQuery UI时，所以你可以使用data属性来使相应的选项卡激活。请参阅jQuery UI的Doc以通过数据属性使选项卡生效 – kamal

答

你有没有尝试做一些像

<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>

在Rails中，当我点击使用jquery-ui选项卡函数的选项卡时，如何获取要渲染的文件的内容？

相关推荐