Rails: Verschachtelte Remote Form funktioniert nicht auf Seite Last

Question

Ich habe eine Rails-Anwendung, in dem ich eine Form haben, die etwa wie folgt aussieht:

[ 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 

Die Muttergesellschaft Eingang funktioniert immer. Es ist ein Remote-Formular mit remote: true. Wenn ich ein übergeordnetes Objekt hinzufüge, wird es automatisch mit den anderen übergeordneten Objekten zur Liste hinzugefügt. Jedes Elternelement kann viele untergeordnete Elemente haben. Sie werden angezeigt und aufgelistet, wenn der Benutzer das entsprechende übergeordnete Listenelement erweitert (wie im obigen Beispiel). Benutzer können weitere Kinder hinzufügen, indem sie einen Wert in Child inline input eingeben. Dieses Formular verwendet auch remote: true.

Das Problem, das ich habe, ist, dass hinzufügen Kinder Element funktioniert nicht immer auf der ersten Seite laden. Es funktioniert aber, wenn ich die Seite aktualisiere. Es fällt mir schwer zu verstehen, warum das so ist.

Wenn ich erstellen ein Elternteil das js.erb folgende Objekt gemacht wird:

# 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() 

Die relevanten Teile von localized_strings/localized_string wie folgt aussieht:

%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 

Und translations/inline_form sieht wie folgt aus:

= 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" 

Der fehlerhafte Fluss sieht aus wie dies:

1. Seite laden und ich ein übergeordnetes Objekt (LocalizedString)
2. Es wird richtig in die Liste aufgenommen.
3. Das Expandieren des neuen übergeordneten Listenelements funktioniert wie erwartet.
4. Wenn Sie auf die Schaltfläche Senden für das Kind klicken() tut nothing.

Hope meine Frage ist verständlich. Bitte kommentieren Sie, wenn Sie Anmerkungen haben oder eine Klärung benötigen. Ich bin tankful für alle Ideen.

Answer 1

Ich bin ziemlich sicher, dass mein Problem durch ungültiges HTML verursacht wurde. Ich gerendert zuvor das Formular des tr Tag, wie folgt aus:

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

Und die inline_form begann mit dem form selbst. Statt wie das zu tun ich stattdessen versucht, es in einem td Tag zu wickeln, wie folgt aus:

# 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| 

Ich habe dieses Problem nicht wieder nach gesehen. Aber ich bin nicht 100% sicher, dass es die Lösung ist, da das Problem etwas zufällig auftrat.

Answer 2

Ryan Bates hat eine großartige Railscast zu diesem Thema Nested Model Form Part 2. Abhängig von Ihren Routen und Modellassoziationen gibt es viele interagierende Abhängigkeiten, aber dieser RailsCast scheint direkt anwendbar zu sein.