Rails - Come utilizzare il modulo modale per aggiungere oggetti in un modello, quindi riflettere la modifica sulla pagina principale?

2

Sto lavorando a un'app Rails e mi sono imbattuto in una situazione in cui non sono sicuro del modo più pulito per procedere.

Ho postato una domanda su SO con esempi di codice e simili - non ha ricevuto risposte e più penso al problema, più penso che potrei avvicinarmi al modo sbagliato. (Vedi la domanda SO su link )

Quindi, in più di una domanda tipo architettura generica: In questo momento ho un modulo in cui un utente può aggiungere una nuova ricetta. Il modulo consente inoltre all'utente di selezionare gli ingredienti (utilizza un collection_select che contiene Ingredient.all). Il problema è: vorrei che l'utente fosse in grado di aggiungere un nuovo ingrediente al volo, senza lasciare il modulo della ricetta.

Usando un div nascosto e alcuni jQuery / AJAX, ho un link che l'utente può fare clic per visualizzare un modulo modale contenente ingredienti / new.html.erb che è una forma semplice. Quando viene inviato quel modulo, chiamo ingredienti / create.js.erb per convalidare l'ingrediente che è stato salvato e nascondere il div modale. Ora torno al mio modulo di ricette, ma il mio collection_select non è stato aggiornato.

Sembra che io abbia alcune scelte qui:

  1. prova a ripetere il rendering della parte collection_select del modulo in modo che acquisisca un nuovo elenco di ingredienti. Questo era il metodo che stavo tentando quando ho scritto la domanda SO. Il problema a cui mi imbatto è il partial che utilizzo per collection_select ha bisogno del modulo genitore passato, e quando provo a eseguire il rendering dal file JS non so come passarlo l'oggetto form.

  2. Ricarica il modulo della ricetta. Funziona (la collezione_select ora contiene il nuovo ingrediente), ma l'utente perde ogni progresso fatto sul modulo della ricetta. Avrei bisogno di un modo per mantenere i dati del modulo - ho pensato di passare manualmente i valori avanti e indietro, ma questo è sciatto e ci deve essere un modo migliore ...

  3. Prova a inserire manualmente i tag usando jQuery - questo sarebbe semplice, ma poiché sto permettendo l'aggiunta di più ingredienti, non posso essere certo quale ID scegliere come target.

Ora, non posso essere l'unica persona ad avere questo problema - quindi c'è un modo più semplice che mi manca? Mi piace l'opzione 2 di cui sopra, ma non so se c'è un modo semplice per afferrare l'intero hash dei parametri come se avessi inviato il modulo delle ricette principali.

Spero che qualcuno possa indicarmi la direzione giusta in modo da trovare una risposta a questo ... Se questo non ha alcun senso, fammi sapere - Posso postare esempi di codice se vuoi, ma la maggior parte il codice pertinente si trova nella domanda SO.

Grazie!

    
posta Jim 06.03.2012 - 23:25
fonte

1 risposta

1

Non l'ho fatto con la creazione di nuovi elementi, ma ho fatto qualcosa di simile per le modifiche. Non sono sicuro che questo sia il modo "più pulito" per farlo, ma ha funzionato per me.

Quanto segue funziona con Rails 3.1, jQuery e coffeescript. Se stai usando Rails 3.2, penso che ora devi mettere .erb alla fine del file coffeescript. Puoi utilizzare js2coffee per convertire facilmente il seguente (se non stai utilizzando un coffeescript).

Ho definito il codice di dialogo (in /app/views/drops/edit.js.coffee) come:

$("#edit-drop-form").dialog
  autoOpen: true
  height: 460
  width: 380
  title: 'Edit Drop'
  buttons:
    "Cancel": ->
      $("#edit-drop-form").dialog "close"
    "Save": ->
      $.post "/drops/<%= @drop.id %>.json", $("#edit-drop-form form").serializeArray(), (data, text, xhr) ->
        if (xhr.status == 200)
          # Update the DOM here!
          $("#notice").empty().append("Drop updated successfully!")
          $("#edit-drop-form").dialog "close"
  open: ->
    $("#edit-drop-form").html "<%= escape_javascript( render('form') ) %>"

Nell'esempio sopra, il partial 'form' sarà reso nel popup e un gestore json nell'azione 'update' del mio controller Drops elaborerà la richiesta.

Per cambiare questo per creare nuovi oggetti, aggiungi un gestore 'json' per l'azione create e disponi di un file javascript simile a quello sopra (ma chiama new.js.coffee). Dovrai anche regolare il percorso per il "post" all'azione di creazione.

Dove il mio commento dice "Aggiorna il DOM qui", è dove vorresti aggiornare la selezione. Crea semplicemente un gestore json per l'azione 'index' di IngredientsController, chiama '$ .get' /ingredients.json '' e sostituisci il contenuto della tua selezione in base ai dati che restituiscono.

    
risposta data 22.08.2012 - 05:25
fonte

Leggi altre domande sui tag