Rails: forma remota nidificato non funziona a pagina carico

Question

Ho un'applicazione Rails in cui ho una forma che sembra qualcosa di simile:

[ Parent list item 1 ] 
[ Parent list item 2 ] 
[ Parent list item 3 - expanded ] 
    [ Child list item 1 ] 
    Child inline input  Child submit button 
    ------------------ 

[Parent input] 
Parent submit button 

L'ingresso controllante funziona sempre. È un modulo remoto, utilizzando remote: true. Quando aggiungo un oggetto genitore viene automaticamente aggiunto alla lista con gli altri oggetti genitore. Ogni genitore può avere molti figli, vengono visualizzati ed elencati quando l'utente espande l'elemento della lista genitore corrispondente (come nell'esempio sopra). Gli utenti possono aggiungere più bambini inserendo un valore nello Child inline input, anche questo modulo utilizza remote: true.

Il problema che sto avendo è che l'elemento Aggiungi bambini non funziona sempre sul caricamento della prima pagina. Funziona comunque se aggiorno la pagina. Sto attraversando un periodo difficile per capire perché è così.

Quando creo oggetto un genitore il seguente js.erb è resa:

# screen_table_id is the list with parent objects. 
# localized_strings/localized_string is the tr with the object 
$("#screen_table_<%= @localized_string.screen.id %>").append("<%= j render partial: 'localized_strings/localized_string', locals: { screen: @localized_string.screen, localized_string: @localized_string } %>"); 

# I use the best in place gem to manage inline editing 
jQuery('.best_in_place').best_in_place() 

Le parti pertinenti localized_strings/localized_string aspetto:

%tbody{ id: "localized_string_parent_#{localized_string.id}"} 
    %tr 
    %td.expandable-column 
     Clicking this reveals the child objects 

/The list of children is initially hidden 
%tbody.hidden[localized_string] 

    - if localized_string.translations.any? 
    /Renders the children 
    %tr 
    /This form doesn't work on page load, after I have added the parent 
    = render "translations/inline_form", app: localized_string.screen.app, screen: localized_string.screen, localized_string: localized_string, translation: localized_string.translations.build 

E translations/inline_form assomiglia a questo:

= form_for [app, screen, localized_string, translation], remote: true do |f| 
    %td{ colspan: 2 } 
    .inline-form-group 
     = f.text_field :value, class: "form-control inline-form-control", placeholder: "Translation value", id: "localized_string_input_# {localized_string.id}" 

    %td 
    /Sometimes nothing happens when I click Submit. 
    = f.submit 'Add translation', class: "btn ban-success-outline" 

Il flusso difettoso assomiglia questo:

1. carico pagina e creare un oggetto padre (LocalizedString)
2. Esso viene aggiunto alla lista in modo corretto.
3. L'espansione del nuovo elemento dell'elenco principale funziona come previsto.
4. Quando si fa clic sul pulsante di invio per il bambino (Translation) fa nothing.

Spero che la mia domanda sia comprensibile. Si prega di commentare se avete commenti o bisogno di chiarimenti. Sono pieno di idee.

Answer 1

Sono quasi sicuro che il mio problema è stato causato da un codice HTML non valido. Ho già resi forma all'interno del tag tr, in questo modo:

%tr 
    = render "translations/inline_form", app: localized_string.screen.app, screen: localized_string.screen, localized_string: localized_string, translation: localized_string.translations.build 

E la inline_form iniziato con il form stessa. Invece di fare così ho invece cercato di avvolgerlo all'interno di un tag td, in questo modo:

# inline_form.html.haml 
%td{ colspan: 4 } 
    # the form wasn't previously inside a td tag. 
    = form_for [app, screen, localized_string, translation], remote: true, style: "margin-bottom: 0" do |f| 

non ho visto ancora questo problema dopo questo. Ma non sono sicuro al 100% che sia la soluzione, dal momento che il problema si presentava in modo alquanto casuale.

Answer 2

Ryan Bates ha fatto un grande Railscast su questo argomento Nested Model Form Part 2. Esistono molte dipendenze interagenti in base ai percorsi e alle associazioni di modelli, ma questo RailsCast sembra essere direttamente applicabile.