2013-03-29 13 views
7

Nella mia app, ho una pagina del profilo utente che ha tre schede e un div vuoto sotto di esso. C'è una scheda di default che è bianca e altre due schede più scure e "deselezionate".Visualizzazione dinamica del rendering in modo parziale con Rails e jQuery

Voglio fare in modo che il contenuto del div sottostante restituisca un partial in base alla scheda selezionata.

Ho già funzionato al punto in cui jQuery mi consente di fare clic sulle diverse schede e cambia i colori delle schede senza un aggiornamento della pagina.

Tuttavia, sono bloccato su come ottenere il rendering parziale del rendering. Qualche idea su questo? Sono bloccato su come chiamare dinamicamente un partial in base alla scheda selezionata in jQuery e in realtà non sono sicuro se ho bisogno di un altro file per interagire con questo per farlo funzionare. Sono relativamente nuovo a jQuery in un'app per rails quindi non sono sicuro di aver fatto tutto il necessario.

utente pagina profilo: app> viste> 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> vantaggi> JavaScript> userprofile.js

$(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?")%>"); 
     }); 
    }); 

Utenti Controller: app> regolatori> 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 

Ci sono tre parziali corrispondenti alle tre schede, e ho bisogno il jQuery per modificare in qualche modo dinamicamente il parziale chiamato in base alla scheda selezionata.

Apprezzerei molto l'aiuto con questo, o se c'è un'altra risorsa che può rispondere alla mia domanda. Non sono stato in grado di trovare nulla che risponda direttamente a ciò che sto cercando di fare.

Aggiornamento ------

ho usato la soluzione fornita rails_has_elegance ma nulla sta comparendo nel div sto targeting. Tuttavia, sto vedendo questo nell'output rotaie server, che sembra che stia facendo quello che voglio:

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 

risposta

9

Se si vuole evitare un sacco di parametri, basta fare 3 azioni diverse nel controller, uno per ogni scheda, che rispondono a js. Quindi creare un .js.erb [azione] per ogni azione nelle viste con qualcosa di simile:

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

In realtà è necessario comunicare con il server attraverso una richiesta Ajax, mentre la funzione onclick sarebbe precaricare che parziale e non hai più nulla di remoto.

+0

Scusate se questo è davvero semplice, ma fammi vedere se ho capito quello che stai dicendo: 1) Creare 3 azioni separate nel controller 2) Cambia i percorsi nel link_to tags 2) Inserisci il codice sopra nel [action] .js.erb file memorizzati all'interno dell'app> views> users directory? Devo scrivere qualcosa in più per gestire la richiesta Ajax che hai menzionato? – Zephyr4434

+0

penso che quei 3 passaggi dovrebbero farlo :) Remoto: true è importante e un response_to format.js in ogni azione. –

+0

Ho fatto esattamente questo, ma quando clicco su una delle schede, il div vuoto non è compilato con il parziale che sto cercando di chiamare. Strano. – Zephyr4434

0

scrivere un'azione in un controller con tre condizioni per 3 schede diverse. chiama ajax facendo clic su qualsiasi scheda, passa il parametro di identità pronuncia 'tab1' o 'tab2' o 'tab3' e anche i parametri richiesti se necessario. nel controller, ottenere parametri e funzione modello di chiamata che contiene la logica aziendale effettiva.

ottenere il risultato in un controllore e solo rendo parziale in un div sotto di tutte le 3 schede utilizzando js.erb

Problemi correlati