Problems with multiple ajax forms on the same page

Question

I’m having a strange problem when I put several forms on the same page (in the index case) all have the parameter remote: true created from a loop in my records. The problem is that only the first form works with ajax, the second sends a normal request and is directed to the show.

Below my index which is where my forms are generated:

  <% @mensagens.each do |mensagem| %>
  <%= form_for(mensagem, remote: true,:authenticity_token => true) do |f| %>
  <div class="row">    
    <div class="col-md-9">
      <div class="widget">        
        <!-- BLOCK -->

          <div class="row innerAll half border-bottom">
            <div class="col-sm-12">
              <div class="media-body">
                <div class="innerAll half">
                  <div class='col-md-10'><%= f.number_field :avaliacao %></div>
                  <div class='col-md-2'><%= mensagem.slug %></div>
                </div>                    
              </div>
            </div>
          </div>

          <div class="row innerAll half border-bottom">
            <div class="col-sm-12">
              <div class="media-body">
                <div class="innerAll half">
                  <%= f.text_area :texto, :class=>"col-md-12 form-control", :placeholder=>"Mensagem" %>
                </div>                    
              </div>
            </div>
          </div>

          <div class="row innerAll half border-bottom">
            <div class="col-sm-12">
              <div class="media-body">
                <div class="innerAll half ">
                  <div class="col-md-2"><%= f.check_box :aprovado %></div>
                  <div class="col-md-2"><%= f.check_box :status %></div>
                  <div class="col-md-6 btn"><%= f.text_field :autor,:class=>"form-control", :placeholder=>"Autor" %></div> 
                  <div class="col-md-2"><%= f.submit "Salvar", :class=>"btn btn-success" %></div>
                </div>                    
              </div>
            </div>
          </div>


          <div class="row innerAll half border-bottom">
            <div class="col-sm-12">
              <div class='notyfy_wrapper mensagem_<%= mensagem.id %>'>
                <div class="notyfy_message">
                  <span class="notyfy_text">
                    <div id="alerta"></div>
                  </span>
                </div>
              </div>
            </div>
          </div>          

      </div>
      <!-- BLOCK -->
    </div>



  </div>

  <% end %>
  <% end %>

I put the page on the air so you can take a look: http://droido.com.br/messages

Answer 1

Analyzing your page I realize that the error is not exactly in the remote but yes in your form as one is contained within the other.

For example:

<form>
   <form>

   </form>
</form>