Anzeige Auswahl des Index in einem Teil

Question

Ich habe versucht, die folgende Herausforderung den ganzen Tag ohne Glück zu lösen.

Beim Durchblättern von Forenbeiträgen bin ich auf jQuery und AJAX gestoßen, die beide neue Konzepte für mich sind und die ich lieber jetzt überspringen würde, wenn möglich.

Ich habe eine partielle, "navbar-left", die eine Liste aller Bankkonten in meinem Modell Account zeigt. Wenn der Benutzer auf eines der Elemente in der Liste klickt, sollten alle Transaktionen dieses Kontos auf derselben Seite rechts angezeigt werden. Das Teil unten verlinkt auf eine neue Seite, die mir nicht gefällt.

Die navbar-Teil:

<ul class="nav nav-pills nav-stacked"> 
    <% @accounts.each do |account| %> 
    <li role="presentation"><%= link_to account.account_holder, account_mutations_path(account.id) %></li> 
    <% end %> 
</ul> 

Irgendwelche Tipps, wie man dies zu schätzen wissen viel erhalten behoben haben!

The page with the navbar at the left

The mutations in a separate page instead of a partial

Answer 1

Entweder Sie senden die Zuschauer auf eine neue Seite oder Inhalte dynamisch in ihrer aktuellen Seite geladen wird.

Wenn letzteres, dann ist die einzige Lösung AJAX.

Glücklicherweise macht Ruby on Rails den Übergang von einem zum anderen sehr einfach. Hier

ist ein Kern, wie es funktioniert:

<%= link_to account.account_holder, account_mutations_path(account.id), remote: true %> 

Dies deutet wieder auf einigen Seiten zuvor (z action.html.erb).

Wegen remote: true wird es JS direkt an den Browser anstelle einer neuen HTML-Seite senden (z. B. action.js.erb im gleichen Ansichtsordner und gleichen Aktionsname).

Hier können wir das Verhalten steuern wir durch Rendern eines Teil mit ERB wollen und mit JS den HTML-Inhalt von einem Teil der Seite zu ändern:

// action.js.erb 
$('#some_element').html('<%= j render "partial" %>') 

, die den HTML-Code der Teileinsatz wird direkt in die JQuery, die den Inhalt dynamisch ändert.

Wobei j eine Kurzschrift für escape_javascript ist.

Ohne zu entkommen, wird die Ruby-Ausgabe als Dateiausgabe interpretiert und Zeilenumbrüche würden Ihre JS beschädigen.

Beispiel JS Ausgabe ohne Flucht:

// Bad 
$('#some_element').html('<span>Content</span> 
<span>More Content</span>') 

Beispiel mit Entkommen:

// Good 
$('#some_element').html('<span>Content</span>\n<span>More Content</span>') 

http://guides.rubyonrails.org/working_with_javascript_in_rails.html

https://launchschool.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

Es gibt mehr gute Beispiele online und sogar Railscasts.

Answer 2

Wirklich AJAX ist der beste Weg, dies zu tun, und es ist nicht so kompliziert, wie Sie vielleicht denken. Aber wenn Sie AJAX wirklich überspringen möchten, ist es wahrscheinlich die beste Vorgehensweise, ALLE Transaktionen für alle Konten in verschiedenen Divs zu laden und sie dann anzuzeigen oder auszublenden, basierend darauf, worauf geklickt wird.

Für eine rudimentäre Einführung in diesen Blick auf Javascript Tabs ... klicken Sie auf eine Registerkarte, die entsprechenden Informationen angezeigt werden.

http://www.w3schools.com/howto/howto_js_tabs.asp

Answer 3

Das geht sehr einfach ohne Ajax. Der große Unterschied wäre - es ist nicht die gleiche Seite. Eine Seite wäre die account#index (wie Sie jetzt haben), die andere Seite ist die account#show Seite.

Verwenden Sie für die Show-Seite eine sehr ähnliche Ansicht wie die Indexseite, die linke Seite würde die Teilansicht mit einem der Konten li class="active" enthalten, um das Konto hervorzuheben, auf dem Sie sich gerade befinden. Für die rechte Seite der Seite, render die Account-Mutationen Listenelemente.