Запутанные рельсы именования Div ID

Question

Я начал использовать jQuery и rails.Я сделал простую форму, которая отправляет в базу данных и обновляет страницу без перезагрузки с помощью ajax.

В своих функциях jQuery я использовал $ "# new_comment" для имени идентификатора (в моем application.js и create.js.erb), но в моем файле мест / шоу я назвал div "add_comment", и он работает ..

Я переименовал его в new_comment, и он сломался!Может кто-нибудь объяснить это, пожалуйста?Я получаю сообщение об ошибке: «на 1 не ответил ни одно действие»

Моя функция в контроллере - «создать».

#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

В дополнение к присоединению события submit к неправильному элементу вы ограничиваете свой плагин jquery только #new_comment.Вы должны немного абстрагироваться и использовать элемент, который вы передаете, когда вызываете submitWithAjax.Вы можете добавить идентификатор в форму или изменить селектор в вашей функции document.ready, чтобы указать дочернюю форму.

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

Вам также необходимо исправить вызов reset в вашем create.js.,Другой javascript, кажется, делает то, что вы ожидаете.