Finestre modali Jquery e modifica object

Sto cercando di creare alcune windows modali da visualizzare ogni volta che l’utente desidera modificare l’object. Non l’ho mai fatto prima, e ho cercato tutorial, ma invece di ottenere alcune risposte dirette, tutto ciò che ho ottenuto è più confuso! Sembra che ci siano così tante librerie che si possono usare.

Quindi immagino che questa domanda sia in due parti. Se volessi farlo, ci sono motivi particolari per cui vorrei scegliere Jquery rispetto al prototipo? Ci sono più opzioni?

La seconda parte lo sta effettivamente facendo, a questo punto non mi interessa davvero usare quale libreria.

Ho le seguenti azioni standard di crud, edit e update. Ora, quello che vorrei è quando l’utente fa clic su modifica, invece di andare alla pagina, si apre una finestra in cui è ansible modificare il nome del ticket (questo è l’unico attributo per ora).

nel controller ho questo:

def edit @ticket = Ticket.find(params[:id]) end def update @ticket = Ticket.find(params[:id]) if @ticket.update_attributes(params[:ticket]) redirect_to tickets_url, :notice => "Successfully updated ticket." else render :action => 'edit' end end 

Qualcuno può aiutarmi per favore con questo? Inoltre, i consigli e i collegamenti sono più che benvenuti!

AGGIORNAMENTO: Ecco un adattamento Rails 5 di questa risposta usando CoffeeScript: https://gist.github.com/1456815


jQuery è più popolare per buone ragioni a cui non entrerò. Abbondanza su quello altrove.

Supponendo che tu voglia usare jQuery, la configurazione è piuttosto semplice:

 # add the following to your Gemfile under `group :development` gem 'jquery-rails' # run the following $ bundle # then let the generator install $ rails g jquery:install 

E poi aggiorna i tuoi valori di default per l’espansione javascript Application.rb:

 # JavaScript files you want as :defaults (application.js is always included). config.action_view.javascript_expansions[:defaults] = %w( jquery rails ) 

E assicurati che il tuo file di layout (ad esempio application.html.erb) includa quei file:

 <%= javascript_include_tag :defaults %> 

Per il tuo modale, ci sono molte opinioni su come farlo. Personalmente preferisco rotolare le mie windows modali in base alle esigenze dell’applicazione. Sono solo poche righe di JS jQuery-laced a build modali che funzionano molto bene con Rails.js:

 # in a view, perhaps a _modal.html.erb partial that is included into # your layout (probably at the bottom).   

Ecco alcuni stili (stile scss) per il modale che utilizzo:

 #modal-container { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.4); } #modal { display: none; position: absolute; width: 600px; left: 50%; margin-left: (-600px - 40px) / 2; padding: 20px; background: #fff; border: 5px solid #eee; & > .close { position: absolute; right: 5px; top: 5px; color: #666; &:hover, &:active { color: #000; } } } 

Ciò rende gli stili / le viste fuori strada. Potresti voler personalizzare questi stili per adattarli meglio alla tua applicazione, ma sono piuttosto generici, quindi dovrebbero iniziare a funzionare.

Per integrarlo in Rails, ci sono 2 parti. Innanzitutto, è necessario ottenere il browser per inviare richieste AJAX per i contenuti e mostrare la modale al reso. In secondo luogo, è necessario che Rails risponda con una risposta appropriata.

L’invio di AJAX e la gestione delle risposte comporta l’uso di :remote => true sui link / moduli che si desidera inviare in remoto.

 <%= link_to 'New Post', new_post_path, :remote => true %> 

Questo creerà un attributo di dati sul link che Rails.js preleverà, consentendogli di essere inviato in remoto automaticamente. Si aspetta un ritorno in javascript, ed eseguirà quella risposta quando lo otterrà. È ansible aggiungere un format.js rapido a ogni azione respond_to block e creare un file new.js.erb che contenga il JS necessario per compilare effettivamente e mostrare il modal. Va bene, ma possiamo ASCIUGARLA un po ‘di più restituendo il modello senza un layout e spostando le responsabilità di visualizzazione / occultamento modali in application.js:

 # in your app controller, you'll want to set the layout to nil for XHR (ajax) requests class ApplicationController < ActionController::Base layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' } end 

Il javascript per far funzionare il tutto:

 # in application.js $(function(){ var $modal = $('#modal'), $modal_close = $modal.find('.close'), $modal_container = $('#modal-container'); # This bit can be confusing. Since Rails.js sends an accept header asking for # javascript, but we want it to return HTML, we need to override this instead. $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){ xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html); }); # Handle modal links with the data-remote attribute $('a[data-remote]').live('ajax:success', function(xhr, data, status){ $modal .html(data) .prepend($modal_close) .css('top', $(window).scrollTop() + 40) .show(); $modal_container.show(); }); # Hide close button click $('.close', '#modal').live('click', function(){ $modal_container.hide(); $modal.hide(); return false; }); }); 

Ho un po 'di logica in là per posizionare la finestra modale 40px dalla posizione di scorrimento corrente del browser.

Con tutti questi pezzi in posizione, quando fai clic su un link / modulo con un set di attributi remoto, Rails.js gestirà l'invio della richiesta, la tua applicazione saprà di restituire solo il modello per l'azione senza il layout, perfetto per la visualizzazione in una finestra modale, e quindi il nostro javascript sopra si aggancia all'ajax: callback di successo da Rails.js e visualizza la modale con il modello HTML restituito dalla nostra applicazione.


Esistono più modi per skinare un gatto e più di una dozzina di modi per creare questa funzionalità. Questa è sicuramente un'area che le convenzioni più forti devono ancora essere stabilite dal team Rails. Questo è semplicemente il mio modo di gestire ciò che ritengo sia abbastanza ASCIUTTO, richiede uno sforzo minimo ed è abbastanza flessibile e a prova di futuro. Forse una delle aree che qualcuno potrebbe probabilmente build su questo è usare un framework modal / lightbox che copre più basi ed è più ricco di funzionalità. E se qualcuno lo fa, mi piacerebbe vedere una recensione!

Per motivi sul perché jquery su prototipo, ecco alcuni pensieri.

  1. jquery ora è la libreria Js predefinita per rails 3+ e ha sostituito le librerie prototype / scriptaculous
  2. jquery è progettato per non essere invadente, il che significa che non inserisce il tuo codice JS in linea; usi il markup appropriato nel tuo file HTML e fornisci ID, classi e tag appropriati al tuo codice HTML in modo da poterlo “agganciare” con il tuo codice jquery in un file JS separato (non sono sicuro che il prototipo sia davvero discreto o no, ho usato jquery per alcuni anni e da allora non ho più toccato il prototipo
  3. jquery è molto semplice da imparare e da usare. Questo è un po ‘soggettivo, ma ho trovato la syntax di jQuery estremamente semplice. Tutto ciò che vuoi fare probabilmente lo puoi fare in jquery.
  4. Jquery ha anche una base di plugin molto estesa con un gran numero di contributori. Rende molto più semplice trovare soluzioni ai problemi comuni piuttosto che scriverli tutti da soli.
  5. Jquery ha anche l’interfaccia utente di Jquery, che presenta una cassetta degli attrezzi di elementi grafici da utilizzare per le tue interfacce e front-end (hanno incidentalmente un widget modale, che puoi usare per il tuo problema originale).

Solo alcuni pensieri su jquery. Consiglio vivamente di esaminarlo. Il sito jquery (jquery.com) ha alcune eccellenti esercitazioni di base per aiutarti a inserirti. E coreyward ha fatto un ottimo lavoro di spiegazione della soluzione. Faccio qualcosa di simile ma raccolgo qualche consiglio da solo.