Question

我正在尝试在我的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>

[！[在此处输入图片描述] [1]] [1]

这是我要提取paginator id（在我的views/layouts/_paginator.html.erb内的ID：

   <div class="card-footer">
                <div id="paginator" class="pagination justify-content-center">
              <%= paginate @contacts, remote: true %>
           </div>
          </div>

[！[在此处输入图片描述] [2]] [2]

请注意，您在上面看到的paginate方法来自kaminari宝石。我放置了remote:true代码，以便能够在后台进行javascript / jquery调用。

我还注意到index.js.erb中的views/contacts在我的编辑器上没有变色：

这是我的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。

有什么主意如何确保它能运行，或者我是否缺少任何东西？

Answer 1

Rails无法以这种方式工作。仅当客户端请求javascript时，才会呈现并返回index.js.erb。如果请求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>')
)

如果您不使用涡轮链接。

jQuery不在Rails视图中运行

1 个答案: