I am new to ruby on rails, I have been recommended to using a sidebar so that on most pages it will show what I want. I currently have an application on its own page called Todo List. It simply let you create a task and displays the tasks. It runs on its own page. Now I want to move that app and let it function in my sidebar. I have implemented my sidebar as follow.
/views/layouts/application (in body)
<%= yield :sidebar %>
/views/myapp1/index
<% content_for(:sidebar) do %>
<% render :partial => "layouts/sidebar" %>
<% end %>
/views/layouts/_sidebar
<% if logged_in? %>
<div id="mySidenav" class="sidenav">
<div class="row", id="container_todo_lists">
<%= render @todo_lists %>
</div>
<div class="links" data-toggle="modal" data-target="#mynewtodo_list">
<%= link_to('New Todo List', 'javascript:;', :id => :random) %>
</div>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Todo List</span>
<script>
function openNav() {document.getElementById("mySidenav").style.width = "250px";}
function closeNav() {document.getElementById("mySidenav").style.width = "0";}
</script>
<% end %>
<!-- Modal create action -->
<%= form_for(@todo_list, remote: true) do |f| %>
<div class="modal fade" id="mynewtodo_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Todo</h4>
</div>
<div class="modal-body">
<div class="field">
<%= f.label :title %><br>
<%= f.text_area :title, class: "form-control todo_list_title" %>
</div>
<div class="field">
<%= f.label :description %><br>
<%= f.text_area :description, class: "form-control todo_list_content" %>
</div>
</div>
<div class="modal-footer">
<%= submit_tag "Create", class: "btn btn-primary" %>
<button type="button" class="btn btn-default" data-dismiss="modal" id="mynewtodo_listclose">Close</button>
</div>
</div>
</div>
</div>
<% end %>
<!-- Modal -->
/views/todo_lists/_todo_list.html.erb
<div class="text-center" id="todo_list_<%= todo_list.id %>">
<h3 class="panel-title"><%= todo_list.title %>
<sup style="color: #3BB2D6; position: absolute; top: 5px; right: 15px; text-align:right;">
(<%= time_ago_in_words(todo_list.created_at) %>)
</sup>
</h3>
<p><%= todo_list.description %></p>
<div class="row" role="group">
<div class="links1" data-toggle="modal" data-target="#myupdatetodo_list_<%= todo_list.id %>">
<%= link_to('Edit', 'javascript:;', :id => :random) %>
</div>
<div class="links1" data-toggle="modal" data-target="#myitemtodo_list_<%= todo_list.id %>">
<%= link_to('Show', 'javascript:;', :id => :random) %>
</div>
<div class="links1">
<%= link_to 'Destroy', todo_list, method: :delete, remote: true %>
</div>
</div>
<!-- Modal - update posts -->
<%= form_for(todo_list, :method => :put, remote: true) do |f| %>
<div class="modal fade" id="myupdatetodo_list_<%= todo_list.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit</h4>
</div>
<div class="modal-body">
<div class="field">
<%= f.label :title %><br>
<%= f.text_area :title, class: "form-control" %>
</div>
<div class="field">
<%= f.label :description %><br>
<%= f.text_area :description, class: "form-control" %>
</div>
</div>
<div class="modal-footer">
<button type="button" id="myupdatebutton_<%= todo_list.id %>" class="btn btn-default" data-dismiss="modal">Close</button>
<%= submit_tag "Update", class: "btn btn-primary" %>
</div>
</div>
</div>
</div>
<% end %>
<!-- Modal -->
<!-- Modal - item posts -->
<%= form_for(todo_list, :method => :put, remote: true) do |f| %>
<div class="modal fade" id="myitemtodo_list_<%= todo_list.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Items</h4>
</div>
<div class="modal-body">
<h3><%= todo_list.title %></h3>
<p><%= todo_list.description %></p>
</div>
<div class="modal-footer">
<button type="button" id="myitembutton_<%= todo_list.id %>" class="btn btn-default" data-dismiss="modal">Close</button>
<%= submit_tag "Add Item", class: "btn btn-primary" %>
</div>
</div>
</div>
</div>
<% end %>
<!-- Modal -->
I had a gray screen problem where my modal is in a div narbar class and that cause the screen to only display the backgroup screen. So I found a solution on
Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar
so I added the script to the views/layouts/
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
So now the screen pops out and I can view the tasks. However, I cannot update the tasks. I tried 4 hours working around the problem and I think what happens now is that the update modal is not catching my update.js.erb file so it cannot edit the todo list. I think it has to do with being added to the "body" and somehow it is not making the connection to the js file in the todo list folder. I think I have to alter the script above somehow but not sure what. Any help is greatly appreciated thanks!
