Confondre les noms de div 0:

Question

J'ai commencé à utiliser jQuery et les rails. J'ai fait un formulaire simple qui soumet à la base de données et met à jour la page sans recharger avec ajax. Dans mes fonctions jQuery, j'ai utilisé $ "# new_comment" pour le nom de l'identifiant (dans mes fichiers application.js et create.js.erb) mais dans mes fichiers lieux/show view, j'ai nommé le div "add_comment" et cela fonctionne ..

Je l'ai renommé new_comment et ça casse! Quelqu'un peut-il l'expliquer s'il vous plaît? Je reçois une erreur: "aucune action n'a répondu à 1"

Ma fonction dans mon contrôleur est "créer".

#views/places/show.html.erb 
<div id="new_comment" style="display:none"> 
#form goes here 
</div> 

#application.js 
jQuery.fn.submitWithAjax = function(){ 
    $("#new_comment").submit(function() { 
    $.post($(this).attr("action"), $(this).serialize(), null, "script"); 
    return false; 
    }) 
}; 


$(document).ready(function() { 
    $("new_comment").submitWithAjax(); 
}) 

#create.js.erb 
$("#new_comment").before('<div id="flash_notice"><%= escape_javascript(flash.delete(:notice)) %></div>'); 

$("#comments_count").html("<%= pluralize(@comment.place.comments.count, 'suggestion') %>"); 

$("#comments").append("<%= escape_javascript(render(:partial => @comment)) %>"); 

$("#new_comment")[0].reset(); 

#comments_controller.rb 
    def create 
     @place = Place.find(params[:place_id]) 
     @comment = @place.comments.create!(params[:comment]) 

    flash[:notice] = "Thanks for your suggestion. Remember to share with friends!" 
    respond_to do |format| 
     format.html {redirect_to place_comments_path(@place)} 
     format.js 
     end 
end 

Answer 1

En plus de fixer l'événement submit à l'élément erroné, vous restreignez votre plugin jquery juste #new_comment. Vous devez en faire abstraction et utiliser l'élément que vous transmettez lorsque vous appelez submitWithAjax. Vous pouvez ajouter un ID au formulaire ou modifier le sélecteur dans votre fonction document.ready pour cibler le formulaire enfant.

#application.js 
jQuery.fn.submitWithAjax = function(myForm){ 
    $(myForm).submit(function() { 
    $.post($(this).attr("action"), $(this).serialize(), null, "script"); 
    return false; 
    }) 
}; 


$(document).ready(function() { 
    $("#new_comment_form").submitWithAjax(); 
}) 

Vous aurez également besoin de corriger l'appel reset dans votre create.js. L'autre javascript semble faire ce que vous attendez.