jQuery 不在 Rails 视图中运行
Posted
技术标签:
【中文标题】jQuery 不在 Rails 视图中运行【英文标题】:jQuery doesn't run in Rails views 【发布时间】:2020-04-18 13:47:12 【问题描述】:我正在尝试在我的 rails 应用程序上运行一个简单的 jQuery 代码,它只会更改我视图中的 html(只是为了在做任何严重的事情之前测试 jquery 是否真的工作)。
在我的views/contacts
文件夹中,我创建了index.js.erb
文件,并尝试从我的内容中提取id contacts
,并从我的分页视图中提取paginator
id。这是index.js.erb
文件的内容(甚至改成index.js
也不行):
$('#contacts').html('<p>hello contacts</p>');
$('#paginator').html('<p>hello paginator</p>')
此代码将简单地获取联系人和paginator
id,并应该将 HTML 更改为段落标签。
这是我试图提取上面的联系人 ID 的地方(在 views/contacts/index.html.erb
内部:
<table class="table" id="contacts">
<%= render partial: "contact", object: @contacts, remote: true %>
</table>
这里是我提取paginator
id 的地方(在我的views/layouts/_paginator.html.erb
中:
<div class="card-footer">
<div id="paginator" class="pagination justify-content-center">
<%= paginate @contacts, remote: true %>
</div>
</div>
请注意,您在上面看到的 paginate
方法来自 kaminari gem。我将 remote:true
代码放置在能够在幕后进行 javascript/jquery 调用。
我还注意到来自views/contacts
的index.js.erb
在我的编辑器上没有着色:
这是我contacts_controller
上的代码:
class ContactsController < ApplicationController
before_action :find_params, only: [:edit, :update, :destroy]
def index
# catch the group id from params in session
session[:selected_group_id] = params[:group_id]
@contacts = Contact.by_group(params[:group_id]).search(params[:term]).order(created_at: :desc).page params[:page]
respond_to do |format|
format.js
format.html
end
end
def autocomplete
@contacts = Contact.search(params[:term]).order(created_at: :desc).page(params[:page])
render json: @contacts.map |contact| id: contact.id, value: contact.name
end
def new
@contact = Contact.new
end
def create
@contact = Contact.new(contact_params)
if @contact.save
flash[:success] = "Contact was successfully created."
redirect_to(previous_query_string)
else
render 'new'
end
end
def edit
end
def update
if @contact.update(contact_params)
flash[:success] = "Contact successfully updated."
redirect_to(previous_query_string)
else
render 'edit'
end
end
def destroy
@contact.destroy
flash[:success] = "Contact successfuly deleted."
redirect_to contacts_path
end
private
def contact_params
params.require(:contact).permit(:name, :email, :phone, :mobile, :company, :address, :city, :state, :country, :zip, :group_id, :avatar)
end
def find_params
@contact = Contact.find(params[:id])
end
def previous_query_string
session[:selected_group_id] ? group_id: session[:selected_group_id] :
end
end
我在这里期待的是 index.js
或 index.js.erb
文件将运行并将表格和分页器的内容更改为上述段落标记,但由于某种原因,它不运行代码甚至识别 views/contacts/index.js
文件中添加的 jquery。
知道如何确保它运行或者我是否缺少任何东西?
【问题讨论】:
【参考方案1】:Rails 不能以这种方式工作。 index.js.erb 仅在客户端请求 javascript 时才会呈现和返回。如果请求 html,则只会呈现 index.html.erb 视图。
我认为您正在尝试添加 Page Specific Javascript,它位于您的 app/assets/javascripts/ 文件夹中。见这里:https://brandonhilkert.com/blog/page-specific-javascript-in-rails/。
如果您将以下内容添加到 app/assets/javascripts/contacts.coffee 文件中,它应该可以帮助您开始:
$(document).on('turbolinks:load', ->
$('#contacts').html('<p>hello contacts</p>')
$('#paginator').html('<p>hello paginator</p>')
)
或
$(document).ready( ->
$('#contacts').html('<p>hello contacts</p>')
$('#paginator').html('<p>hello paginator</p>')
)
如果您没有使用 turbolinks。
【讨论】:
以上是关于jQuery 不在 Rails 视图中运行的主要内容,如果未能解决你的问题,请参考以下文章
在使用 rails 的动态加载视图中使用 Jquery 插件