Rails: Lồng hình thức từ xa không hoạt động trên tải trang

Question

Tôi có một ứng dụng Rails trong đó tôi có một hình thức mà trông giống như sau:

[ 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 

Phụ huynh tổ chức đầu vào luôn luôn hoạt động. Nó là một hình thức từ xa, sử dụng remote: true. Khi tôi thêm một đối tượng cha, nó sẽ tự động được thêm vào danh sách với các đối tượng cha khác. Mỗi phụ huynh có thể có nhiều trẻ em, chúng được hiển thị và được liệt kê khi người dùng mở rộng mục danh sách mẹ tương ứng (như ví dụ ở trên). Người dùng có thể thêm nhiều trẻ em hơn bằng cách nhập một giá trị trong số Child inline input, biểu mẫu này cũng đang sử dụng remote: true.

Sự cố tôi gặp phải là việc thêm phần tử con không phải lúc nào cũng hoạt động trên lần tải trang đầu tiên. Nó hoạt động tuy nhiên nếu tôi làm mới trang. Tôi đang gặp khó khăn để hiểu tại sao điều này lại xảy ra.

Khi tôi tạo ra một bố mẹ phản đối sau js.erb được hiển thị:

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

Các bộ phận có liên quan của localized_strings/localized_string trông như thế này:

%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 

Và translations/inline_form trông như thế này:

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

Dòng chảy bị lỗi trông giống như này:

1. Trang tải và tôi có thể tạo một đối tượng cha mẹ (LocalizedString)
2. Nó được thêm vào danh sách một cách chính xác.
3. Mở rộng phần tử danh sách mẹ mới hoạt động như mong đợi.
4. Khi nhấp vào nút gửi cho trẻ (Translation) thì nothing.

Hy vọng câu hỏi của tôi là dễ hiểu. Xin vui lòng bình luận nếu bạn có bất kỳ ý kiến ​​hoặc cần làm rõ. Tôi đang tankful cho tất cả các ý tưởng.

Answer 1

Tôi khá chắc chắn rằng sự cố của tôi là do HTML không hợp lệ. Tôi trước đây render hình thức bên trong thẻ tr, như thế này:

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

Và inline_form bắt đầu với form riêng của mình. Thay vì làm như thế tôi thay vì cố gắng để quấn nó bên trong một thẻ td, như thế này:

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

Tôi đã không nhìn thấy vấn đề này một lần nữa sau này. Nhưng tôi không chắc chắn 100% rằng đó là giải pháp, vì vấn đề xuất hiện một cách ngẫu nhiên.

Answer 2

Ryan Bates đã thực hiện một Railscast tuyệt vời về chủ đề này Nested Model Form Part 2. Có rất nhiều phụ thuộc tương tác phụ thuộc vào tuyến đường của bạn và các liên kết mô hình, nhưng RailsCast này dường như được áp dụng trực tiếp.