Rails 5 - Ajax 刷新后重新初始化 Javascript？答案

【问题标题】：Rails 5 - Reinitializing Javascript after Ajax refresh?Rails 5 - Ajax 刷新后重新初始化 Javascript？
【发布时间】：2017-09-17 13:56:31
【问题描述】：

所以我对涉及 Javascript 的问题有了更好的理解。问题在于，在 AJAX 调用刷新 div 的内容之后，该 div 中的内容未链接或未针对 Javascript 初始化。我想要做的是让我的活动列表可以为用户排序。我使用优先级字段来保存活动的顺序，因此当用户刷新或离开页面时，顺序保持不变。

我收到的问题如下：

ActiveRecord::RecordNotFound（找不到 'id'=item 的活动）：

因此，活动订单将不会被保存。这发生在 AJAX 调用和刷新之后，它事先正常工作，保存订单和诸如此类的东西。我尝试了一些解决方案，例如 one 并将 Javascript 移到部分没有成功。

我相信上面的错误是由于活动没有正确链接到 Javascript 文件导致它的 id 为“item”所以有谁知道如何解决这个问题或关于如何解决它的任何建议？谢谢！

主视图：

<!-- home.html.erb -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

</head>

<!-- the jScrollPane script -->


<!--IF THE USER IS LOGGED IN, DISPLAY THE FOLLOWING -->
<% if current_user %>
    <!--
    <style>
    .navbar {
      background-color:#2F4F4F
    }
    </style>
    -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href='home'>TimeTracker</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Signed in as <%=current_user.email %></a></li>
            <li>
              <%= link_to 'Sign Out', sign_out_path, method: :delete %>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

    <h1 align = "center">Activities</h1>

    <div id = 'activity_container'>


      <ul id="Categories" class="connectedSortable">
        <% @categories.each do |cats| %>
          <% if cats.user_id == current_user.id%>
                  <div class="panel-group">
                    <div class="panel text-left">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" href="#collapse<%= cats.id%>">
                            <%= cats.c_name %>
                          </a>
                        </h4>
                      </div>
                      <div id="collapse<%= cats.id%>" class="panel-collapse collapse">
                        <ul id="category_activities" class=".connectedSortable">
                          <% cats.activities.each do |activity| %>
                            <li class="list-group-item" >
                              <% if activity.hidden == false || activity.hidden == nil%>

                                    <label class="my_label"><%= activity.a_name %></label>

                                      <!-- Delete Activity -->
                                      <%= link_to destroy_act_path(activity.id), method: :delete, data: { confirm: "Are you sure?" } do %>
                                          <i class="fa fa-trash-o" aria-hidden="true" title="Delete"></i>
                                      <% end %>


                                        <!-- Edit activity -->
                                  <%= link_to edit_act_path(activity.id)do %>
                                      <!--<button class="editActivity" style="border:none; padding:0; background-color: transparent">-->
                                        <i class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i>
                                      <!--</button>-->
                                  <% end %>


                                      <!-- Hide activity -->
                                  <%= link_to hide_act_path(activity.id), method: :post do %>
                                      <i class="fa fa-eye" aria-hidden="true" title="Hide" id="item"></i>
                                  <% end %>

                              <% end %>
                          <% end %>
                        </li>
                        </ul>
                      </div>
                    </div>
                  </div>
            <% end %>
        <% end %>
        </ul>


      <ul id="Activities" class="connectedSortable" >

      <!-- List each activity in database -->

        <% @activities.each do |activity| %>
          <% if (activity.hidden == false || activity.hidden == nil) && activity.category_id == nil %>
              <li class="list-group-item" id='<%=activity.id%>' style="list-style: none;">

                <!-- Display activity name -->

                <label class="my_label"><%= activity.a_name %></label>

                <!-- Delete Activity -->
                <%= link_to destroy_act_path(activity.id), method: :delete, data: { confirm: "Are you sure?" }, remote: true do %>
                    <i class="fa fa-trash-o" aria-hidden="true" title="Delete"></i>
                <% end %>

                <!-- Edit activity -->
                <%= link_to edit_act_path(activity.id)do %>
                    <button class="editActivity" style="border:none; padding:0; background-color: transparent">
                      <i class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i>
                    </button>
                <% end %>

                <!-- Hide activity -->
                <%= link_to hide_act_path(activity.id), method: :post do %>
                    <i class="fa fa-eye" aria-hidden="true" title="Hide" id="item"></i>
                <% end %>

              </li> <!-- End of list item -->
          <% end %> <!-- End of if statement -->
      <% end %> <!-- End of activity loop -->
      </ul>


    </div>


    <ul class="pager">

      <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>Previous </a></li>
      <li class="next"><a href="#"> Next<span aria-hidden="true">&rarr;</span></a></li>

      <!-- *****************NEW*********************** -->
      <%= form_for @activity, :url => create_act_path, remote: true, data: {type: 'script'} do |a| %>
          <%= a.text_field :a_name, id: 'a_name_field', placeholder: 'Activity Name'%>
          <%= a.select :category_id, Category.all.collect { |c| [c.c_name, c.id] }, include_blank: "--No Category--" %>
          <%= a.submit 'Create', id: 'submitButton', class: 'btn btn-primary'%>
      <% end %>

      <%= form_for @category, :url => create_cat_path, remote: true do |c| %>
          <%= c.text_field :c_name, id: 'c_name_field', placeholder: 'Category Name'%>
          <%= c.submit 'Create', id: 'submitButton', class: 'btn btn-primary'%>
      <% end %>

      <!-- Button for showing all hidden items -->
      <%= link_to unhide_act_path, method: :post do %>
          <button class="showHidden" >Show Hidden</button>
      <% end %>

      <!-- Button to sort -->
      <button class="sortActivity">Sort</button>
      <button class="doneSorting">Done Sorting</button>

      <!-- ***************************************** -->

    </ul>

<!-- IF THE USER IS NOT LOGGED IN, DISPLAY THE FOLLOWING -->
<% else %>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">TimeTracker</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active">
            </li>
          </ul>
        </div>
      </div>
    </nav>

      <div class="loginContainer" align="center">
        <h1 align="center">
          <b>
            Please log in or sign up
          </b>
        </h1>

        <div class="container">
          <br>
          <%= button_to 'Login', sign_in_path, :method => 'get', class: 'btn' %>
          <br>
          <%= button_to 'Sign Up', sign_up_path, :method => 'get', class: 'btn' %>
        </div>

        <!--<div class="container" style="background-color:#D3D3D3">
          <input type="checkbox" checked="checked"> Remember me
          <span class="psw">Forgot <a align="center" href="#">password?</a></span>
        </div> -->
      </div>


<% end %>



<script type="text/javascript">
    function changeImg(img) {
        if (img.src == "<%=asset_path('_unfilledbubble.png')%>"){
            img.src = "<%=asset_path('_filledbubble.png')%>";
        }
        else {
            img.src = "<%=asset_path('_unfilledbubble.png')%>";
        }
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $(function () {
            $('.scroll-pane').jScrollPane({showArrows: true});
        });
    });
</script>

<script>


    $(document).ready(function(){
        function callAll(){
            set_positions = function(){
                // loop through and give each task a data-pos
                // attribute that holds its position in the DOM
                $('.list-group-item').each(function(i){
                    $(this).attr("data-pos",i+1);
                });
            }
            //    ready = function(){
            // call set_positions function
            set_positions();
            // ************NEW execept for #Activities
            $('#Activities').sortable({
                connectWith: ".connectedSortable"
            });
            $('#Activities').disableSelection();
            //        $('#Categories').sortable({
            //            connectWith: ".connectedSortable"
            //        });
            //        $('#Categories').disableSelection();
            $('#category_activities').sortable({
                connectWith: ".connectedSortable"
            });
            $('#category_activities').disableSelection();
            // *******end of NEW
            $('#Activities li').on('click','li',function (){
                var myid = $(this).attr('id');
                alert(myid);
            });
            // after the order changes
            $('#Activities').sortable().bind('sortupdate', function(e, ui) {
                // array to store new order
                var updated_order = []
                // set the updated positions
                set_positions();
                // populate the updated_order array with the new task positions
                $('#Activities li').each(function(i){
                    updated_order.push({ id: $(this).attr('id'), position: i });
                });
                // send the updated order via ajax
                $.ajax({
                    type: "PUT",
                    url: '/home/sort',
                    data: { order: updated_order }
                });
            });
        }
        $(document).ajaxComplete(callAll());
    })
</script>

局部视图：

 <!-- List each activity in database -->
  <% @activities.each do |activity| %>
      <% if (activity.hidden == false || activity.hidden == nil) && activity.category_id == nil %>
          <li class="list-group-item" id="item" data-id="<%activity.id%>" style="list-style: none;">


            <!-- Display activity name -->

            <label class="my_label"><%= activity.a_name %></label>


            <!-- Delete Activity -->
            <%= link_to destroy_act_path(activity.id), method: :delete, data: { confirm: "Are you sure?" }, remote: true do %>
                <i class="fa fa-trash-o" aria-hidden="true" title="Delete"></i>
            <% end %>

            <!-- Edit activity -->
            <%= link_to edit_act_path(activity.id)do %>
                <button class="editActivity" style="border:none; padding:0; background-color: transparent">
                  <i class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i>
                </button>
            <% end %>

            <!-- Hide activity -->
            <%= link_to activity, method: :post, :controller => :activities, :action => :set_hidden_true, remote: true do %>
                <button class="hideActivity" style="border:none; padding:0; background-color: transparent">
                  <i class="fa fa-eye" aria-hidden="true" title="Hide" id="item"></i>
                </button>
            <% end %>

          </li> <!-- End of list item -->
      <% end %> <!-- End of if statement -->
  <% end %> <!-- End of activity loop -->

创建 Activity JS 文件：

<!--create_activity.js.erb-->
$('#Activities').html("<%= j (render 'object') %>");

家庭控制器：

class HomeController < ApplicationController
  respond_to :html, :js

  def new

  end

  def index

  end

  def home
    @activities = Activity.all
    @activity = Activity.new

    @categories = Category.all
    @category = Category.new
  end

  def create_activity
    @activity = Activity.create(activity_params)
    @activity.user_id = current_user.id
    @activity.priority = @activity.id

    @object = Category.all

    @activities = Activity.all
    @categories = Category.all

    if @activity.save
      flash[:success] = 'Activity created successfully'
    else
      flash[:notice] ='ERROR: Activity could not be create'
    end
  end

  def create_category
    @category = Category.new(category_params)
    @category.user_id = current_user.id

    #@category.priority = @category.id

    @object = Category.all
    @activities = Activity.all
    @categories = Category.all

    #@category.priority = @category.id
    if @category.save!
      flash[:success] = 'Category created successfully!'
    else
      flash[:error] = 'ERROR: Category was not saved!'
    end
  end

  def destroy_activity
    @activity = Activity.find(params[:id])
    @activity.destroy

    @object = Category.all

    @activities = Activity.all
    @categories = Category.all
  end

  def welcome
  end


  def hide_activity

    @object = Category.all

    @activities = Activity.all
    @categories = Category.all

    @activity = Activity.find(params[:id])
    @activity.update_attribute(:hidden, true)
    respond_to do |format|
      format.html {redirect_to activities_url}
      format.js
    end
  end

  #NEW 4/15
  def edit_activity
    @activity = Activity.find(params[:id])
  end

  def update_activity
    @activity = Activity.find(params[:id])

    if @activity.update_attributes(activity_params)
      flash[:success] = 'Activity updated successfully!'
    else
      flash[:notice] = 'Activity was not updated'
    end
  end

  def unhide_all

    @object = Category.all

    @activities = Activity.all
    @categories = Category.all

    @activities = Activity.all
    @activities.update_all(hidden: false)
    # redirect_to root_path
  end

  def sort
    params[:order].each do |key, value|
      Activity.find(value[:id]).update_attribute(:priority, value[:position])
    end
    render :nothing => true
  end

  private

  def activity_params
    params.require(:activity).permit(:a_name, :category_id)
  end

  def category_params
    params.require(:category).permit(:c_name)
  end
end

更新

我尝试了following 并作为测试，将我在 html 中的脚本替换为以下内容：

    $('#Activities').on('click','li',function (){
        var myid = $(this).attr('id');
        alert(myid);
    });

在 Ajax 之前，当我点击一个活动时，它会正确地给我它的 ID。但是，在进行 Ajax 调用之后，当我尝试单击一个活动时，我得到了同样的错误，它声称找不到具有“id=item”的活动

【问题讨论】：

乍一看，我的猜测是$(document).ajaxComplete(callAll()); 修复了一些与活动相关的内容。这意味着$('#Activities').html("<%= j (render 'object') %>"); 后面应该跟callAll();。如果这触发了很多 JavaScript，您应该提取修复活动 JavaScript 相关内容所需的部分到它自己的函数，并在最后调用该函数。（在你替换了$('#activities').html(...)之后）。
这个问题可以通过明确指定 ajax 请求的触发位置来进一步解决。所以我们知道要遵循什么路径。
@JohanWentholt 为迟到的回复道歉。截至目前，我试图简单地让创建函数使用 AJAX，这样用户就不需要刷新整个页面，但是在 AJAX 调用之后，这就是我的问题发生的地方。

标签： javascript jquery ruby-on-rails ajax ruby-on-rails-5

【解决方案1】：

这里有很多选项，一个选项是更改绑定到文档或正文，而不是直接绑定到元素的 id，因为这是动态创建的，例如：

$("body").on('click',"#Activities" ,function () {
   var myid = $(this).attr('id');
   alert(myid);
});

你可以在渲染不推荐的元素时再次初始化ajax请求上的事件

或使用https://github.com/adampietrasiak/jquery.initialize 之类的插件，如果您将其绑定到类、id 或其他选择器，则可以重新初始化插件。

【讨论】：

【解决方案2】：

我创建了一个示例，您可以在其中使用 AJAX 请求从索引页面创建Person。在Person 创建后，people 的新列表将发送到索引页面。为了模拟您的 JavaScript，我使用 jQuery 将每个元素的背景颜色设置为蓝色。

让我们从index.html.erb 本身开始。

<!-- app/views/people/index.html.erb -->
<p id="notice"><%= notice %></p>

<h1>People</h1>

<table>
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody id="people_tbody">
    <%= render 'people', people: @people %>
  </tbody>
</table>

<%= render('form', person: @people.new) %>

接下来是两个部分，_people.html.erb：

<!-- app/views/people/_people.html.erb -->
<% people.each do |person| %>
    <tr>
        <td><%= person.first_name %></td>
        <td><%= person.last_name %></td>
        <td><%= link_to 'Show', person %></td>
        <td><%= link_to 'Edit', edit_person_path(person) %></td>
        <td><%= link_to 'Destroy', person, method: :delete, data: { confirm: 'Are you sure?' } %></td>
    </tr>
<% end %>

和_form.html.erb AJAX 请求被触发：

<!-- app/views/people/_form.html.erb -->
<%= form_for(person, remote: true) do |f| %> <!-- remote true, makes it an AJAX call -->
  <% if person.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(person.errors.count, "error") %> prohibited this person from being saved:</h2>

      <ul>
      <% person.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :first_name %>
    <%= f.text_field :first_name %>
  </div>

  <div class="field">
    <%= f.label :last_name %>
    <%= f.text_field :last_name %>
  </div>

  <div class="actions">
    <%= f.submit %> <!-- when submit is clicked the AJAX request is fired to PeopleController#create -->
  </div>
<% end %>

为了模拟您的 JavaScript 问题，我有以下文件：

// app/assets/javascripts/people.js
function init_people() {
    $('#people_tbody tr').css('background-color', 'lightblue')
}

$(document).ready(init_people)

这会为所有行提供浅蓝色背景。

如您所见，我使用 AJAX 发送填写的表单，因为设置了 remote: true。如果提交表单，请求将到达PeopleController#create，如下所示：

# app/controllers/people_controller.rb
class PeopleController < ApplicationController
  before_action :set_person, only: [:show, :edit, :update, :destroy]

  # GET /people
  # GET /people.json
  def index
    @people = Person.all
  end

  # GET /people/1
  # GET /people/1.json
  def show
  end

  # GET /people/new
  def new
    @person = Person.new
  end

  # GET /people/1/edit
  def edit
  end

  # POST /people
  # POST /people.json
  def create # AJAX request arrives here
    @person = Person.new(person_params)

    respond_to do |format|
      if @person.save
        format.html { redirect_to @person, notice: 'Person was successfully created.' }
        format.json { render :show, status: :created, location: @person }
        # I added the underlying line to handle the AJAX response.
        format.js { render :index, status: :created, location: @person }
      else
        format.html { render :new }
        format.json { render json: @person.errors, status: :unprocessable_entity }
        # I added the underlying line to handle the AJAX response.
        format.js   { render nothing: true }
      end
    end
  end

  # PATCH/PUT /people/1
  # PATCH/PUT /people/1.json
  def update
    respond_to do |format|
      if @person.update(person_params)
        format.html { redirect_to @person, notice: 'Person was successfully updated.' }
        format.json { render :show, status: :ok, location: @person }
      else
        format.html { render :edit }
        format.json { render json: @person.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /people/1
  # DELETE /people/1.json
  def destroy
    @person.destroy
    respond_to do |format|
      format.html { redirect_to people_url, notice: 'Person was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_person
      @person = Person.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def person_params
      params.require(:person).permit(:first_name, :last_name)
    end
end

如您所见，我添加了两行来处理PeopleController#create 中的js 格式。如果渲染来自format.js { ... }，rails 知道选择index.js.erb 文件，而不是index.html.erb 文件。如果您不希望这种行为，您可以指定特定文件。

我的index.js.erb 看起来像这样：

// app/views/people/index.js.erb
$('#people_tbody').html("<%= j(render('people', people: Person.all)) %>")

这会将#people_tbody 的内容替换为新的集合操作人员（类似于您的示例）。但是现在我和你有同样的问题。 JavaScript 不再被触发，每一行的背景都是白色的。要在新加载的内容上触发 JavaScript，我只需要调用 init 函数。 这意味着您想要在文档准备好之后以及 AJAX 请求之后应用的任何逻辑都应该被提取到一个单独的函数中。我将我的逻辑放在函数 init_people() 中。

这意味着index.js.erb 应该如下所示：

// app/views/people/index.js.erb
$('#people_tbody').html("<%= j(render('people', people: Person.all)) %>")
init_people()

现在，在加载 AJAX 内容后，将触发 init_people() 函数为新加载的内容设置 JavaScript。

【讨论】：