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/contactsindex.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.jsindex.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 3.1:视图不在命名空间布局中呈现

网格视图不在rails中工作

在使用 rails 的动态加载视图中使用 Jquery 插件

如何从rails中的视图将值传递给jquery?

jquery-datatables-rails。响应式扩展和移动视图

如何在 Rails 6 的视图中使用 JQueryUI