In Rails, wie bekomme ich den Inhalt einer Datei zu rendern, wenn ich auf Tabs mit der jquery-ui Tabs-Funktion klicke?

Question

Ich verwende Rails 4. Ich hätte gerne eine Tabbed-Schnittstelle und so dachte ich, JQuery UI war der Aufgabe gewachsen. Was ich jedoch möchte, ist, wenn ein Benutzer auf jede Registerkarte klickt, wird der Inhalt meiner Teilansicht auf dieser Registerkarte (div) gerendert. Also meine Tabs, in meiner „app/views/admin/index.html.erb“ Datei angezeigt werden zur Zeit wie so ...

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

Ich habe diese Teilansichten

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

Dann habe ich dies in meine app/assets/Javascripts/admin.coffee Datei

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

Wie kann ich auf jedem Registerkarte klicken und die Inhalte der Inhalte über teilweise im Anzeigebereich zu machen bekommen? Ich habe dies in meinem Controller derzeit,

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 

, aber das funktioniert nicht. Danke, - Dave

Answer 1

Sie etwas tun können: wie diese

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

und ändern Sie Ihre Controller:

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 

Answer 2

Soweit ich dein Problem verstehe, anstelle des Rendern Index render index.

Sie entfernen render index und Schienen werden automatisch eines der 3 Teiltöne, die Sie in Frage erwähnt und teilweise Sie können die entsprechenden div zeigen.

Lassen Sie mich wissen, wenn es hilft.

Answer 3

Haben Sie versuchen, etwas zu tun, wie

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