Rails formulaire ajax ne pas soumettre à partir de l'intérieur

Question

J'ai un formulaire Rails 3.2 ajax qui crée une nouvelle pièce pour un hôtel. Le nouveau formulaire Room ajax fonctionne correctement sur la page d'index Room, mais une fois que j'intègre le nouveau formulaire Room ajax sur une page d'édition Hotel, le formulaire est soumis normalement sans utiliser Ajax.

Pour créer la nouvelle forme de chambre, j'utiliser le lien suivant sur la page edit.html.erb de Hôtel:

<%#= link_to 'Add a Room', new_room_path(:hotel_id => @hotel.id), :remote => true, :class => 'new_room' %> 

Cette charge le formulaire ci-dessous partielle sur cette même page:

<%= form_for @room, :remote => true, :html => { :class => "remote-form" } do |f| %> 
<%= f.text_field :number %> 
<%= f.text_field :size %> 

    <% if(params.has_key?(:'hotel_id')) %> 
    <% @hotel_id = params[:hotel_id] %> 
    <%= f.hidden_field :hotel_id, :value => @hotel_id %>      
    <% else %> 
    <%= f.collection_select(:hotel_id, Hotel.all, :id, :name) %> 
    <% end %> 

<%= f.submit "Add this room", :class => 'room_create' %> 
<%= link_to 'Cancel', '#', :class => "room_cancel" %> 
<% end %> 

Et enfin, je suit dans mon create.js.erb (dans le dossier pièces):

alert('Test creating a room'); 
var content = $('<%= escape_javascript(render(@room)) %>'); 
$("#room_list tbody").append(content); 

le c reate.js.erb n'est pas exécuté et le formulaire est soumis régulièrement (non-ajax) et j'arrive enfin sur la page show.html.erb de la salle.

Pourquoi le formulaire fonctionne-t-il correctement sur la page d'index Unités, mais pas sur la page d'édition d'hôtel associée?

Answer 1

Même lorsque vous définissez :remote => true, Rails génère une étiquette form. Les tags de formulaire imbriqués ne sont pas pris en charge par les navigateurs et entraînent un comportement imprévisible.

Vous devez repenser l'architecture des vues ici. Vous pouvez probablement avoir les formulaires pour les chambres en dehors du formulaire pour l'hôtel, ou peut-être vous pouvez utiliser fields_for et accepts_nested_attributes_for pour éditer des objets enfants.

Voici un exemple complet sur l'utilisation des attributs imbriqués: Nested Attributes Examples.

Answer 2

Vous ne pouvez pas imbriquer un formulaire dans un formulaire en HTML. Lorsque vous cliquez sur un bouton de soumission sur un formulaire, même s'il se trouve dans un autre formulaire, seul le formulaire le plus externe sera correctement envoyé.

Vous pouvez utiliser nested attributes pour ajouter les attributs de la pièce directement au formulaire, de sorte que lorsque le formulaire global est soumis, toutes les pièces sont ... ou utilisez un div et un lien, au lieu d'un formulaire et un bouton de soumission.