szyn: Zagnieżdżone zdalny formularz nie działa na stronie obciążenia

Question

Mam app Rails, w którym mam formularz, który wygląda mniej więcej tak:

[ 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 

Wejście jednostka dominująca zawsze działa. Jest to forma zdalna, korzystająca z remote: true. Kiedy dodaję obiekt nadrzędny, zostanie on automatycznie dodany do listy z innymi obiektami nadrzędnymi. Każdy rodzic może mieć wiele dzieci, są one wyświetlane i wyświetlane, kiedy użytkownik rozwija odpowiedni element listy nadrzędnej (jak w powyższym przykładzie). Użytkownicy mogą dodać więcej dzieci, wprowadzając wartość w polu Child inline input. Ten formularz również używa remote: true.

Problem polega na tym, że element dodawania dzieci nie zawsze działa przy ładowaniu pierwszej strony. Działa to jednak, jeśli odświeżam stronę. Ciężko mi zrozumieć, dlaczego tak jest.

Kiedy tworzę rodzic sprzeciw następujące js.erb jest renderowany:

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

Odpowiednie części localized_strings/localized_string wygląda następująco:

%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 

And translations/inline_form wygląda następująco:

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

Wadliwy przepływ wygląda to:

1. obciążenie strony i utworzyć obiektu nadrzędnego (LocalizedString)
2. zostanie dodana do listy poprawnie.
3. Rozwijanie nowego elementu listy nadrzędnej działa zgodnie z oczekiwaniami.
4. Po kliknięciu przycisku przesyłania dla dziecka (Translation) ma nothing.

Mam nadzieję, że moje pytanie jest zrozumiałe. Prosimy o komentarz, jeśli masz jakieś uwagi lub potrzebujesz wyjaśnienia. Jestem pełen pomysłów.

Answer 1

Jestem prawie pewien, że mój problem został spowodowany przez nieprawidłowy kod HTML. Ja poprzednio wydanego formę wewnątrz znacznika tr coś takiego:

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

A inline_form rozpoczął samego form. Zamiast robić tak ja zamiast próbował owinąć go wewnątrz td znacznika tak:

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

Nie widziałem tego problemu ponownie po tym. Ale nie jestem w 100% pewien, czy to rozwiązanie, ponieważ problem pojawił się nieco przypadkowo.

Answer 2

Ryan Bates wykonał świetny Railscast na ten temat Nested Model Form Part 2. Istnieje wiele zależnych od siebie zależności w zależności od tras i powiązań modeli, ale RailsCast wygląda na to, że jest bezpośrednio stosowane.