Tengo una aplicación de Rails en la que tengo un formulario que se parece a esto:
[ 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 La entrada de la entidad principal siempre funciona. Es una forma remota, usando remote: true . Cuando agrego un objeto principal, se agrega automáticamente a la lista con los otros objetos principales. Cada padre puede tener muchos hijos, se muestran y enumeran cuando el usuario expande el elemento de la lista de padres correspondiente (como en el ejemplo anterior). Los usuarios pueden agregar más niños ingresando un valor en la Child inline input , este formulario también usa remote: true .
El problema que tengo es que agregar elementos secundarios no siempre funciona en la carga de la primera página. Sin embargo, funciona si actualizo la página. Me cuesta entender por qué es esto.
Cuando creo un objeto principal, se representa el siguiente js.erb :
# 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() Las partes relevantes de localized_strings/localized_string se ven así:
%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 Y translations/inline_form se ve así:
= 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"El flujo defectuoso se ve así:
LocalizedString )Translation ) no hace nothing .Espero que mi pregunta sea comprensible. Por favor comente si tiene algún comentario o necesita aclaración. Estoy lleno de todas las ideas.
Ryan Bates hizo un excelente Railscast sobre este tema Forma de modelo anidado Parte 2 . Hay muchas dependencias que interactúan según sus rutas y asociaciones de modelos, pero este RailsCast parece ser directamente aplicable.
Estoy bastante seguro de que mi problema fue causado por HTML no válido. Previamente presenté el formulario dentro de la etiqueta tr , así:
%tr = render "translations/inline_form", app: localized_string.screen.app, screen: localized_string.screen, localized_string: localized_string, translation: localized_string.translations.build Y el inline_form comenzó con el propio form . En lugar de hacer eso, traté de envolverlo dentro de una etiqueta td , así:
# 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|No he vuelto a ver este problema después de esto. Pero no estoy 100% seguro de que sea la solución, ya que el problema apareció de forma un tanto aleatoria.