Question

继续上一个问题，我设法让隐藏按钮为现在的活动工作。隐藏字段的状态尚未改变，但我现在遇到的问题是指Ajax调用。

为了在创建活动时阻止页面刷新，我使用了Ajax，因此只刷新页面的特定部分。当我创建一个活动时，我的活动控制器中的创建功能将在div中使用id“activities”呈现活动部分。但是，我遇到的问题是，在创建活动并且Ajax刷新div之后，我创建的隐藏按钮停止工作。

在Ajax调用之前，隐藏按钮按预期工作并隐藏相关活动但在创建新活动并使用Ajax后，隐藏按钮停止工作。

有趣的是，如果我将关联的脚本复制到activity partial，那么隐藏按钮可以工作，但它们只能工作一次，而在另一次Ajax调用之后，它们会再次停止工作。

以下是我的控制器和观点：

Home.html.erb：

<!-- home.html.erb -->

<!--<h1>Time Tracker</h1>
<li><%= link_to 'Login', login_new_path %></li> -->

<!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">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <!--<link href="css/bootstrap.min.css" rel="stylesheet"> -->

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <![endif]-->
</head>
<body>
<!--
<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="#">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">
        <li class="active"><a href="#">Activities<span class="sr-only">(current)</span></a></li>
      </ul>
      </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Signed in as Admin</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Profile</a></li>
            <!--
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            -->
            <li role="separator" class="divider"></li>
            <li><a href="#">Account Settings</a></li>
          </ul>
        </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">

<div id='activities'>
  <% @categories.each do |cats| %>
      <div class="panel-group">
        <div class="panel text-center">
          <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 class="list-group-sortable" id="Activities" >
              <% cats.activities.each do |activity| %>
                  <li class="list-group-item" id="item" style="list-style: none;">

                    <!-- text boxes show upon edit button click -->
                    <!--<input type="text" class="edit" />-->
                    <!--<input type="button" value="rename" class="showButton"/> -->

                    <!-- Display activity name -->
                    <%= activity.a_name %>

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

                    <!-- Edit activity -->
                    <i onclick="editClick()" class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i>

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

                  </li> <!-- End of list item -->
              <% end %>
            </ul>
          </div>
        </div>
      </div>
  <% end %>
</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, remote: true 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: true %>
      <%= a.submit 'Create', id: 'submitButton', class: 'btn btn-primary'%>
  <% end %>

  <%= form_for @category, 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 %>

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

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(document).ready(function(){
        $("#unfilled").click(function(){
            if($("#unfilled").attr("src") == "<%=asset_path('unfilledbubble.png')%>"){
                $("#unfilled").attr("src", "<%=asset_path('filledbubble.png')%>");
            }else{
                $("#unfilled").attr("src", "<%=asset_path('unfilledbubble.png')%>");
            }
        });
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- NEW 3/23 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<script src="jquery.sortable.js"></script>
<script>
    $( function() {
        $('#Activities').sortable({
            containment: '#activity_container',
            cursorAt: {left:event.offsetX, top:event.offsetY}, //to keep item near cursor NOT WORKING
            update: function (event, ui) { //to save order NOT WORKING
                var data = $(this).sortable('serialize');
                // POST to server using $.post or $.ajax. May or may not be deleted
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'localhost:3000/activities'
                });
            }
        });
        $('#Activities').disableSelection();
    });
    $('#Activities li .hideActivity').click(function () {
        var index = $('#Activities li .hideActivity').index(this);
        $(this).closest('li').hide();//deletes everything //$(this).hide('li') deletes logo //$(this).closest('li').hide() only deletes first one
            $('span').text("That was .hideActivity index #" + index);
    });
</script>


</body>
</html>

活动控制器：

class ActivitiesController < ApplicationController
  respond_to :html, :js
  def home
    @activities = Activity.all
    @categories = Category.all
    @activity = Activity.new
    @category = Category.new
  end

  def index
    @activities = Activity.all
    @activity = Activity.new
  end

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

  end

  def new
    @activity = Activity.new
  end

  def create #Modified all new
    @activity = Activity.create(activity_params)
    @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 edit
    @activity = Activity.find(params[:id])
  end

  def update
    @activities = Activity.update(:id => params[:id], :a_name => params[:a_name])
  end

  def destroy
    @activity = Activity.find(params[:id])
    @activity.destroy
    redirect_to root_path
  end

  def set_hidden_true
    @activity = Activity.find(params[:id])
    @activity.update_attribute(:hidden, true)
    if @activity.save!
      flash[:success] = 'Activity hidden successfully!'
    end
    redirect_to root_path
  end

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

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

  def update_params
    @activity = Activity.find(params[:id, :a_name])
  end
end

活动部分：

<!-- _activity.html.erb -->
<span>For Testing: Change This</span>

<% @categories.each do |cats| %>
    <div class="panel-group">
      <div class="panel text-center">
        <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 class="list-group-sortable" id="Activities" >
            <% cats.activities.each do |activity| %>
                <li class="list-group-item" id="item" style="list-style: none;">

                  <!-- text boxes show upon edit button click -->
                  <!--<input type="text" class="edit" />-->
                  <!--<input type="button" value="rename" class="showButton"/> -->

                  <!-- Display activity name -->
                  <%= activity.a_name %>

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

                  <!-- Edit activity -->
                  <i onclick="editClick()" class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i>

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

                </li> <!-- End of list item -->
            <% end %>
          </ul>
        </div>
      </div>
    </div>
<% end %>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(document).ready(function(){
        $("#unfilled").click(function(){
            if($("#unfilled").attr("src") == "<%=asset_path('unfilledbubble.png')%>"){
                $("#unfilled").attr("src", "<%=asset_path('filledbubble.png')%>");
            }else{
                $("#unfilled").attr("src", "<%=asset_path('unfilledbubble.png')%>");
            }
        });
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- NEW 3/23 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<script src="jquery.sortable.js"></script>
<script>
    $( function() {
        $('#Activities').sortable({
            containment: '#activity_container',
            cursorAt: {left:event.offsetX, top:event.offsetY}, //to keep item near cursor NOT WORKING
            update: function (event, ui) { //to save order NOT WORKING
                var data = $(this).sortable('serialize');
                // POST to server using $.post or $.ajax. May or may not be deleted
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'localhost:3000/activities'
                });
            }
        });
        $('#Activities').disableSelection();
    });

    $('#Activities li .hideActivity').click(function () {
        var index = $('#Activities li .hideActivity').index(this);
        $(this).closest('li').hide();//deletes everything //$(this).hide('li') deletes logo //$(this).closest('li').hide() only deletes first one
            $('span').text("That was .hideActivity index #" + index);
    });
</script>

因此，当我将以下内容添加到活动部分的末尾时，隐藏按钮会像我之前提到的那样工作一次：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
        $(document).ready(function(){
            $("#unfilled").click(function(){
                if($("#unfilled").attr("src") == "<%=asset_path('unfilledbubble.png')%>"){
                    $("#unfilled").attr("src", "<%=asset_path('filledbubble.png')%>");
                }else{
                    $("#unfilled").attr("src", "<%=asset_path('unfilledbubble.png')%>");
                }
            });
        });
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- NEW 3/23 -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

    <script src="jquery.sortable.js"></script>
    <script>
        $( function() {
            $('#Activities').sortable({
                containment: '#activity_container',
                cursorAt: {left:event.offsetX, top:event.offsetY}, //to keep item near cursor NOT WORKING
                update: function (event, ui) { //to save order NOT WORKING
                    var data = $(this).sortable('serialize');
                    // POST to server using $.post or $.ajax. May or may not be deleted
                    $.ajax({
                        data: data,
                        type: 'POST',
                        url: 'localhost:3000/activities'
                    });
                }
            });
            $('#Activities').disableSelection();
        });

        $('#Activities li .hideActivity').click(function () {
            var index = $('#Activities li .hideActivity').index(this);
            $(this).closest('li').hide();//deletes everything //$(this).hide('li') deletes logo //$(this).closest('li').hide() only deletes first one
                $('span').text("That was .hideActivity index #" + index);
        });
    </script>

在Ajax调用之后，似乎隐藏按钮没有链接到hideActivity函数。我不知道为什么，所以任何帮助都会受到赞赏，谢谢

Rails - Ajax导致Button停止工作？

0 个答案: