Sidebar and rendering partial, trying to run a todo app on sidebar - ruby-on-rails

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>
×
</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 -->
I get this error
'nil' is not an ActiveModel-compatible object. It must implement :to_partial_path.
I think I know part of the problem is my
#todo_lists
Because I tried to called the sidebar on my todo_list page and it works, but the sidebar messed up my original application so that when I press edit and show it would turn the screen grey. Any suggestion is greatly appreciated. Thanks in advance.
/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 -->

In your case, that is because the #todo_lists isn't being set, I'm sure if you go back to the previous url that was rendering the view, the sidebar would show.
A way to resolve is to ensure it's set on every page as such:
class ApplicationController
before_action :set_to_do_lists
def set_to_do_lists
#todo_lists ||= TodoList.all #assign this to what's in your todo_lists_path
end
end
With that I guess your app should be fixed

Related

Is it possible to put a modal inside a card?

I have a modal that's inside a Bootstrap Card for a confirmation if the user really wants to cancel a booking. The problem is that it doesn't show up when clicked. I see the fade effect and that's about it.
<% if Date.current.strftime('%Y-%m-%d') == data.formatted_date_time_for_comparison %>
<%= f.submit 'Cancel Booking', class: "btn btn-danger" %>
<% else %>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal">Cancel Booking</button>
<div class="modal fade text-dark" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Confirm Cancellation</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Are you sure you want to cancel this booking?
</div>
<div class="modal-footer">
<%= f.submit 'Cancel Booking', class: "btn btn-danger" %>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<% end %>
It compares the current date to the date of the booking's departure date and it gives a submit button straight to the controller, which in turn rejects it because cancelling on the same date isn't allowed. If that's not the case it gives a button for a modal to activate.
I'm mostly sure it's because of it buried beneath divs, specifically divs with bootstrap card classes.
Here are its parent divs:
<div class="margin-top" style="width: 600px;">
<div class="bg-dark p-3 rounded">
<h3>Reservations</h3>
</div>
<div id="accordion" class="mt-3 mb-4">
<div class="card bg-dark">
<% #reservations.reverse().each do |data| %>
<a class="btn text-light card-header" data-bs-toggle="collapse" href="#id-<%= data.id %>">
<div class="row" style="text-align: left;">
<div class="col">
<strong>Name: </strong><%= data.name %><br><br>
<!-- other records -->
</div>
<div class="col">
<strong>Departure: </strong><%= data.departure %><br>
<!-- other records -->
</div>
</div>
</a>
<div id="id-<%= data.id %>" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col">
<strong>Base Price: </strong><%= data.base_price %><br>
<!-- other records -->
</div>
<div class="col d-flex align-items-end justify-content-end">
<%= form_for #cancellation, url: del_rsrv_path do |f| %>
<%= f.hidden_field :id, value: data.id %>
<%= f.hidden_field :datetime, value: data.formatted_date_time_for_comparison %>
<!-- code posted above here -->
I checked and it does work just below the first div (didn't check on deeper divs), but the problem would be passing the form params there. I'm asking if there's a workaround in either situation.
EDIT: I renamed the data-bs-target name and its respective id name and it somehow works now.

RatyJs Star Images not showing Rails 6 / Bootstrap 4

My Rails project doesn't show star images with Bootstrap Modal. But it shows all the images with the Bulma.
Application.js
import 'bootstrap'
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("raty-js")
My modal
<a class="c-secondary" data-toggle="modal" data-target="#<%= o.id %>">Rating</a>
<div class="modal fade" id="<%= o.id %>" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Rate your order</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<%= form_for Review.new do |f| %>
<%= f.hidden_field :order_id, value: o.id %>
<div class="modal-body">
<div class="field">
<div id="star_<%= o.id %>"></div>
</div>
<%= f.text_area :review, class: "form-control" %>
</div>
<div class="modal-footer">
<button type="button" class="btn c-btn" data-dismiss="modal">Close</button>
<%= f.submit "Add Review", class: "btn btn-danger" %>
</div>
<% end %>
</div>
</div>
</div>
Modal works. So I can post my review but the images don't show. And I have this problem only with bootstrap.

bootstrap modal does not show,only showing backdrop

I have posted this before but no one has reply me on my problem. However, after trying for few days. I encountered something funny.
My View Code
<% provide(:title, "Log in") %>
<div class="center jumbotron">
<h1> Kaching </h1>
<div class = "row" >
<div class="col-md-6 col-md-offset-3">
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :logID, "Log ID" %>
<%= f.text_field :logID %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.submit "Log In", class:"btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
When i include the code, the modal box will appear when i load the page. However, my modal still will not appear when i press the button. I do not understand why. It will only work when i include bootstrap.js in my /assets/javascripts folder. However, this affects my tab that i implement on my other page. I try loading just the bootstrap-modal.js file, but it did not work also. Please guide me on this.
Thanks

Rails form above Twitter Bootstrap modal

I'm trying to create a newsletter subscription from scratch using rails 4 and Twitter Bootstrap 3 modal.
I created a Subscriber model and subscribers controller which contains a 'create' method.
The button which openes the modal has to appear anytime, so I included it in the navbar that is placed in the application.html.erb layout view file.
This is the code I used for the modal: (in views/layout/application.html.erb)
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Newsletter Subscriptions</h4>
</div>
<% form_tag(controller: 'subscribers', action: 'create') do %>
<div class="modal-body">
<p><%= text_field_tag :email, params[:email] placeholder: "Enter your email address" %></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<p><%= submit_tag "Subscribe", class: "btn btn-primary" %></p>
</div>
<% end %>
</div>
</div>
</div>
For some reason it won't show anything in the modal except the title.
Where am I going wrong?
You just need to use <%= form_tag instead of <% form_tag.
In previous versions of Rails, <% form_tag was used I think, but since form_tag is outputting html, it should be used with <%= %>.

how to not improve this code to not repeat the twitter bootstrap modal?

I have a Project that have many Pictures. I am using the first picture as a link to call a twitter bootstrap modal, where some information will be displayed as well as the link for the project`s page.
<!-- Modal -->
<div id="<%= project.id %>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><%= project.title %> <small><%= project.sub_title %></small></h3>
</div>
<div class="modal-body">
<p><%= ActionView::Base.full_sanitizer.sanitize (project.description) %></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<%= link_to 'More Details', project_path(project), class: 'btn btn-primary' %>
</div>
</div>
In order to get the modal working for each project, I have added the project.id to the Modal id. So, I am actually creating many modals, one for each project.
<% #projects.each do |project| %>
<%= link_to (image_tag project.pictures.first.url), "##{project.id}", class: 'btn', role: 'button', data: { toggle: 'modal' } %>
<%= render 'projects/modal', project: project %>
<% end %>
Well, everything is working fine, but I don't like it! It will became a loading problem if I have many projects.
So, I would like to find a way to not load all modals. I would like to have one modal template that is populated by the project information.
Any idea on how to improve it?
NOTE: I don't have rails set up at the moment, so can't test this directly, but should work:
Put the following generic modal code into the modal partial:
<div id="genericModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3></h3>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<%= link_to 'More Details', nil, class: 'btn btn-primary' %>
</div>
</div>
Include the following at the top of your view:
<script>
function populateModal(projectId) {
$(".modal-header").find("h3").html($(projectId).find("#p_title").html());
$(".modal-body").find("p").html($(projectId).find("#p_desc").html());
$(".modal-footer").find("a").attr("href", $(projectId).find("#p_link > a").attr("href"));
$("#genericModal").modal('show');
}
</script>
Then further down in your view, you can do something like this:
<%= render 'projects/modal' %>
<% #projects.each do |project| %>
<%= link_to (image_tag project.pictures.first.url), html => {:onclick => "populateModal('##{project.id}')", :class => 'btn', :role => 'button'} %>
<div id="#{project.id}" class="hide">
<span id="p_title"><%= project.title %> <small><%= project.sub_title %><small></span>
<span id="p_desc"><%= ActionView::Base.full_sanitizer.sanitize (project.description) %></span>
<span id="p_link"><%= link_to project_path(project) %></span>
</div>
<% end %>
Create a single modal, not one for each project. Use javascript to open the modal on each link (instead of data-toggle="modal") and before you do, set the project's title, subtitle, description and link using Javascript.

Resources