Continuing from the previous question, I managed to get the hiding button working for the activities as of now. The status of the hiding field is not changed as of yet but the problem I am running into right now refers to the Ajax call.
In an effort to prevent a page refresh when creating an activity, I used Ajax so only a specific part of the page will refresh. When I create an activity, my create function from the Activities Controller will render the activity partial in the div with the id "activities". However, I am running into the issue where after I create an activity and Ajax refreshes the div, the hide buttons I created stop working.
Before the Ajax call, the hide buttons work as intended and hide the associated activity but after I create a new activity and use Ajax, the hide buttons stop working.
What is interesting is that if I copied the associated scripts over to the activity partial, then the hide buttons work but they only work that one time and after another Ajax call, they stop working again.
Here are my controller and views:
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">←</span>Previous </a></li>
<li class="next"><a href="#"> Next<span aria-hidden="true">→</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>
Activities Controller:
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
Activities Partial:
<!-- _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>
So when I add the following to the end of the activity partial, then the hide button works once like I mentioned earlier:
<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>
It seems that the hide buttons are not linked to the hideActivity function after the Ajax call. I have no idea why though so any help would be appreciated, thanks
