Wie kann ich das abrufen der Inhalte für jede Registerkarte, die mit AJAX? Rails4, Bootstrap3

Ich habe 4 tab-Abschnitte in eine Event-Seite ansehen. Ich habe es zu arbeiten, wo ALLE Inhalte für jede Registerkarte wird abgerufen und gerendert, wenn ein Ereignis-Seite angefordert wird. Dies scheint nicht wie eine gute Lösung für Skalierbarkeit...

Wie kann ich das abrufen der Inhalte für jede Registerkarte, die mit AJAX, wenn eine Registerkarte angeklickt wird?

(Erste Zeit tut es... schaut einfach in der Theorie, aber nicht um es zu erhalten arbeitend)

Habe ich versucht, indem remote: true Sie auf die Registerkarte links, aber das spielt nicht gut mit der in-page-Referenzen - es macht die gleichen get-Anfrage Events#Show für alle Registerkarten, die es schwierig macht zu bestimmen, welche Registerkarte Inhalt angefordert wird. Wenn ich die Registerkarte href ' s der jeweiligen controller-links, dann bricht es die bootstrap-tab Umschalten. Ich bin zu verlieren, so oder so.

Jede Registerkarte Inhalt ist aufgeteilt in separaten Controller, so dass die einzelnen Inhalte abgerufen werden können.

Tab#2, ich brauche zum abrufen der Inhalte, für die je nav-pill aktiv ist. Und wenn ich auf Tab#2, ich will zu wechseln, dessen Inhalt vom Überblick zum Detail und wieder mit den nav-pills - Taste links.

Mit Schienen 4 w/bootstrap 3, haml, coffeescript.

Ereignisse/anzeigen.html-Code.haml

/ Nav tabs
%ul.nav.nav-tabs.color
  %li.active
    =link_to "Tab1", "#tab1", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab2", "#tab2", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab3", "#tab3", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab4", "#tab4", html_options = { "data-toggle" => "tab" }

/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p Fetch content
  .tab-pane.active#tab2
    %ul.nav.nav-pills
      %li.active= link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"}
      %li= link_to 'Details', "#details", html_options = { "data-toggle" => "tab"}
      .tab-content
        .tab-pane.active#overview
          %p Fetch overview
        .tab-pane.active#details
          %p Fetch details
  .tab-pane.active#tab3
    %p Fetch content
  .tab-pane.active#tab4
    %p Fetch content

Controller/events_controller.rb

def show
  # currently have several database queries to get data for each tab :(

  respond_to do |format|
    format.html
    format.js
  end
end

views/events/show.js.erb (Dies war für die remote:true Fall sollte aber in der jeweiligen controller-Ansicht für jeden tab)

$('div#tab2').append("<%= escape_javascript(render(partial: 'overview', locals: {names: @names, genders: @genders, ages: @ages})) %>")

Ich bin kein rails Kerl, aber von was ich verstehe, Sie würde erfordern die Verwendung von bootstrap-tab 's" - show.bs.Registerkarte " Ereignis und Holen Sie Ihre Inhalte mit ajax in diesem Fall. Eingehämmert in eine Antwort, aber da weiß ich nicht viel über Rails, dachte, ich würde Fragen, ob Sie Interesse hätten, in ein HTML/jQuery einzige Antwort?
Ja, die helfen könnten. Ich kann Sie füllen in der Rails-Seite.

InformationsquelleAutor HM1 | 2014-05-08

9

Dies würde erfordern, dass Sie die Nutzung der bootstrap-Registerkarte 'zeigen.bs.Registerkarte " Ereignis. Ich bin kein rails Kerl, aber ich habe realisiert, ein ähnliches Verhalten in ASP.Net MVC - fetch die Inhalte der einzelnen Register werden dynamisch auf die Registerkarte klicken Sie auf die mit ajax. Da beide Strahlen HTML-und wir sind mit ajax, ich denke, was für mich gearbeitet wird auch für Sie arbeiten.

Hier geht - ich habe ein extra-Attribut auf die Registerkarten "data-tab-remote' und ich registriere einen event-handler in jquery holt den Reiter Inhalt aus der angegebenen URL in der Daten-tab-remote-Attribut und füllt es in das Ziel-tab-Inhalts-container angegeben in der Registerkarte href. So das emittierte HTML-Code für die tabs-Seite würde wie folgt Aussehen -
```
<ul class="nav nav-tabs" style="border-right:solid" id="tabs">
    <li><a href="#tab1" data-toggle="tab" data-tab-remote="/tab1url">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab" data-tab-remote="/tab2url">Tab2</a></li>
</ul>            
<div class="tab-content">
    <div class="tab-pane fade" id="tab1">

    </div>
    <div class="tab-pane fade in active" id="tab2">

    </div>
</div>
```
Mit diesem HTML-Code, Sie müssen rufen Sie die unten jQuery-code in Ihrem Dokument ist auf dem load-Ereignishandler -
```
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    currTabTarget = $(e.target).attr('href');

    var remoteUrl = $(this).attr('data-tab-remote')
    if (remoteUrl !== '') {                

        $(currTabTarget).load(remoteUrl)
    } 
})
```
InformationsquelleAutor swazza85

Gebäude aus der swazza85 Antwort, wenn Sie wollen, dass es nur einmal laden (das erste mal das tab geklickt wird):

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var currTabTarget = $(e.target).attr('href');

        var remoteUrl = $(this).attr('data-tab-remote');
        var loadedOnce = $(this).data('loaded');
        if (remoteUrl !== '' && !loadedOnce) {
            $(currTabTarget).load(remoteUrl)
            $(this).data('loaded',true);
        }
    })

InformationsquelleAutor prograhammer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.