我正在尝试在我的 Rails 应用程序上运行一个简单的 jQuery 代码,它只会更改我 View 中的 HTML(只是为了在做任何严肃的事情之前测试 jQuery 是否真的有效)。
在我的 views/contacts
文件夹中,我创建了 index.js.erb
文件并尝试从我的内容中提取 ID contacts
并我的分页 View 中的 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。
知道如何确保它运行或者我是否遗漏了什么吗?
最佳答案
Rails 不是这样工作的。 index.js.erb 只有在客户端请求 javascript 时才会呈现和返回。如果请求 html,则只会呈现 index.html.erb View 。
我认为您要做的是添加 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。
关于javascript - jQuery 不在 Rails View 中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59520240/