jQuery/Rails3按钮不会改变状态

jQuery/Rails 3 button does not change state

本文关键字：改变 状态 按钮 Rails3 jQuery      更新时间：2023-09-26

我花了几天时间（如4天）试图解决这个问题。我遵循了Hartl Rails3教程，并在第12章中尝试将网站从原型转换为jQuery。但是，我无法获得"关注"/"取消关注"按钮进行更新。

我可以在Safari的Inspect Element控制台中发出jQuery命令，但如果我将最简单的jQuery命令放入destroy.js.erb或create.js.erbs文件中，则不会发生任何事情。日志指示正在渲染适当的relationship/destry.js.erb（或create.js.erb）文件。

这是我在控制器中的代码：

class RelationshipsController < ApplicationController
  before_filter :authenticate
  def create
@user = User.find(params[:relationship][:followed_id])
  current_user.follow!(@user)
  respond_to do |format|
    format.html { redirect_to @user }
    format.js 
  end
end
def destroy
  @user = Relationship.find(params[:id]).followed
    current_user.unfollow!(@user)
  respond_to do |format|
    format.html { redirect_to @user }
    format.js 
  end
end
end

users/_follow.html.haml是

- relationship = current_user.relationships.build(:followed_id => @user.id)
= form_for(relationship, :remote => true) do |f|
  = f.hidden_field :followed_id
  .actions= f.submit "Follow"

users/_unfollow.html.haml是

- relationship = current_user.relationships.find_by_followed_id(@user)
- delete = { :method => :delete }
  = form_for(relationship, :html => delete, :remote => true) do |f|
  .actions= f.submit "Unfollow"

users/_follow_form.html.haml是

- unless current_user?(@user)
  #follow_form
    - if current_user.following?(@user)
    = render 'unfollow'
    - else
    = render 'follow'

关系/create.js.erb是

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= "#{@user.followers.count} followers" %>')

relationship/dedestroy.js.erb是

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= "#{@user.followers.count} followers" %>')

然而，在尝试诊断时，我尝试了一个非常基本的

$("#title").html("Followed")

这也不起作用。

使用jQuery的方式似乎有问题。

jQuery使用CSS样式选择器，而Prototype则不使用。因此，要使其工作，只需在选择器中添加一个"#"符号即可。

代替

$("follow_form").html("something");

你应该使用

$("#follow_form").html("something");
// Note the # symbol in the selector.  
// Also, remember to end your statements with a semicolon.

您可以在这里阅读关于jQuery ID选择器的信息：http://api.jquery.com/id-selector/

检查您的公共文件夹中是否有Assets文件夹，其中包含application.js。不确定我是如何处理的，但这导致ajax查询被处理了两次。

看起来您可能正在使用Rails 3.1。如果想要相同的结果，使用教程中使用的确切gem版本（包括Rails3.0而不是3.1）是很重要的。有关更多建议，请参阅Rails教程帮助页面上的调试提示。

相关文章：