2013-03-29 14 views
7

W mojej aplikacji mam stronę profilu użytkownika z trzema zakładkami i pustym div poniżej. Jest domyślna zakładka biała i dwie inne zakładki, które są ciemniejsze i "niezaznaczone".Dynamicznie renderuj widok w częściowej z Railsami i jQuery

Chcę, aby zawartość w dziale div była częściowa w oparciu o wybraną kartę.

Mam już działa do punktu, w którym jQuery pozwala mi kliknąć na różnych kartach i zmienia kolory kart bez odświeżania strony.

Jednak utknąłem na tym, jak sprawić, aby częściowe renderowanie było poprawne. Jakieś przemyślenia na ten temat? Utknąłem, jak dynamicznie wywoływać częściowe na podstawie której karta jest wybrana w jQuery i faktycznie nie jestem pewien, czy potrzebuję innego pliku do interakcji z tym, aby to działało. Jestem stosunkowo nowy w jQuery w aplikacji rails, więc nie jestem pewien, czy zrobiłem wszystko, co potrzebne.

profil użytkownika strona: app> poglądy> show.html.erb

<ul class="profile-tabs">  

     <%= link_to "<li class=\"tab selected\">Tab 1</li>".html_safe, userprofile_users_path, remote: true %> 
     <%= link_to "<li class=\"tab\">Tab 2</li>".html_safe, userprofile_users_path, remote: true %> 
     <%= link_to "<li class=\"tab\">Tab 3</li>".html_safe, userprofile_users_path, remote: true %> 

    </ul> 

<div id="profile-content"> 

<!--content goes here --> 

</div> 

jQuery: app> aktywa> javascripts> userprofile.js Controller

$(function() { 
     $("li.tab").click(function(e) { 
      e.preventDefault(); 
      $("li.tab").removeClass("selected"); 
      $(this).addClass("selected"); 
      $("#profile-content").html("<%= escape_javascript(render partial: 
"How can I make this partial name be generated based on the value of the selected li?")%>"); 
     }); 
    }); 

użytkowników: app> Kontrolery> users_controller .rb

class UsersController < ApplicationController 

def show 
    @user = User.find(params[:id]) 
end 

def userprofile 
    respond_to do |format| 
     format.js 
    end 
end 
end 

Istnieją trzy częściowe odpowiadające trzem zakładkom, a ja potrzebuję jQuery, aby jakoś dynamicznie zmienić wywoływanie częściowe na podstawie wybranej zakładki.

Naprawdę byłbym wdzięczny za pomoc w tej sprawie, lub jeśli istnieje inny zasób, który może odpowiedzieć na moje pytanie. Nie byłem w stanie znaleźć niczego, co by bezpośrednio odpowiadało na to, co próbuję zrobić.

Aktualizacja ------

użyłem rozwiązanie pod warunkiem, że rails_has_elegance ale nic nie pojawia się w div Mam kierowania. Jednak widzę to na wyjściu serwera szynach, które wydaje się, że robi to, co chcę:

Started GET "https://stackoverflow.com/users/currentoffers" for 127.0.0.1 at 2013-03-28 21:20:01 -0500 
Processing by UsersController#currentoffers as JS 
    Rendered users/_offers.html.erb (0.1ms) 
    Rendered users/currentoffers.js.erb (0.8ms) 
Completed 200 OK in 4ms (Views: 3.7ms | ActiveRecord: 0.0ms) 
[2013-03-28 21:20:01] WARN Could not determine content-length of response body. Set  content-length of the response or set Response#chunked = true 

Odpowiedz

9

Jeśli chcesz uniknąć wielu parametrów, po prostu zrobić 3 różne działania w kontrolerze, jeden dla każda karta, z której każda odpowiada na js. Następnie utwórz [działanie] .js.erb dla każdego działania w widokach z mniej więcej tak:

$("#tab_content").html("<%= escape_javascript(render('tab1')) %>"); 

rzeczywiście trzeba komunikować się z serwerem za pośrednictwem ajax żądanie, natomiast czynność onclick będzie przekręceniem że częściowe i nie masz już niczego zdalnego.

+0

Przepraszam, jeśli jest to naprawdę proste, ale pozwól mi sprawdzić, czy rozumiem, co mówisz: 1) Tworzenie 3 oddzielne akcje w kontrolerze 2) Zmień ścieżki w tagach link_to 2) Umieść powyższy kod w pliku [action] .js.pliki erb przechowywane w aplikacji> widoki> katalog użytkowników? Czy muszę napisać coś więcej, aby obsłużyć żądanie ajax, o którym wspomniałeś? – Zephyr4434

+0

Myślę, że te 3 kroki powinny to zrobić :) Zdalne: prawda jest ważna, a response_to format.js w każdym działaniu. –

+0

Zrobiłem dokładnie to, ale kiedy kliknę na jedną z kart, pusty div nie jest wypełniony częściowym próbuję zadzwonić. Dziwne. – Zephyr4434

0

Napisz działanie w kontrolerze mającym trzy warunki dla 3 różnych kart. wywołać ajax klikając na dowolnej karcie, przekazać parametr tożsamości powiedzieć "tab1" lub "tab2" lub "tab3", a także wymagane parametry, jeśli potrzebujesz. w kontrolerze, pobierz parametry i funkcję modelu połączenia, która zawiera rzeczywistą logikę biznesową.

się doprowadzić do kontrolera i po prostu renderowanie częściowe w div poniżej wszystkich 3 kartami za pomocą js.erb

Powiązane problemy