I'm a beginner to Rails and I'm following a tutorial to build a Todo App.
When I try to click the button in the browser (in the application.html.haml code below) nothing happens. It is as if it is unresponsive. I see when I hover over the button it is supposed to direct me to localhost:3000/tasks/new.
Here's a snapshot of how the page looks as of now:
In the tutorial, there is a modal that is used to render the new todo task. The code for the modal is in new.js.erb in view > tasks:
m = $('#modal');
m.html('<%= j(render partial: 'task_form', locals: {task: #task}) %>');
m.modal('show');
The partial task_form.html.haml code is:
.modal-header
%h1 New Task
= simple_form_for task, class: 'clearfix' do |f|
.modal-body
= f.input :title
= f.input :note
= f.input :completed
.modal-footer
= f.submit 'Save', class: 'btn btn-primary'
The code for home.html.haml is:
.container
- if #tasks.empty?
%span.text-warning There are no tasks!
- else
%table.table.table-hover.table-bordered
%thead
%tr
%th Title
%th Created at
%th Completed
%tbody
- #tasks.each do |task|
%tr
%td
%strong= task.title
%td.text-info= task.created_at
%td.text-success= task.completed
#modal.modal.fade
And for the application.html.haml is:
!!!
%html
%head
%title Todo
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%body
.container
.jumbotron.text-center
%h1
ToDo
%p
Welcome to the tutorial's ToDo application
= link_to 'New task', new_task_path, class: 'btn btn-primary', remote: true
= yield
I tried looking for a solution everywhere but I couldn't find it. I thought I'd post it here for help from any good samaritans..Could you let me know why I cannot see the modal?
Thanks a lot for any help.
I finally got it. I forgot to install the gem 'jquery-rails' and make the necessary additions to the application.js and application.scss. Restarting the server after that resulted in a modal. Thanks!
Related
I want to add confirmation modal when bank manager has to delete bank_employee without clients bank_employee.users = nil. If bank_employee has clients I want to render different modal - destroy_confirmation_modal. How to do it in a proper way? Where should I put if condition?
code snipped of
edit.html.erb
<div class="row">
<div class="col-sm-12 col-md-12 col-xs-12 text-center bank-employee__button-wrapper bank-employees-users-registration__registrations-submit--wrapper">
<%= t('.delete') %>
<%= f.submit t('.submit'), id: "formSubmit", class: "bank-employee__button bank-employee__button-submit"%>
</div>
</div>
<% end %> // this `end` comes from `form_for`
<%= button_to "", bank_employee_path(#bank_employee), method: :delete, form: {id: "bankEmployeeDestroyForm" }, class: "bank-employee__button-destroy" %>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<%= link_to bank_employees_path do %>
<span class="bank-employee__back-button">
<%= image_tag "icon_back.svg", alt: "Back icon", class: ""%>
<%= t('.back') %>
</span>
<% end %>
</div>
</div>
</div>
<%= render "destroy_confirmation_modal" %>
I don't think I should update my controller method but maybe I'm wrong?
controller.rb
def destroy
authorize current_bank_employee
#bank_employee = find_bank_employee(params[:id])
if #bank_employee.users.any? && associated_bank_employees.present?
reassign_users_and_notify_bank_employee
elsif #bank_employee.users.any?
render :edit
else
#bank_employee.destroy
render :destroy_notice, locals: { old_bank_employee: #bank_employee, assigned: false }
end
end
EDIT
my routes.rb
resources :bank_employees, except: [:show], concerns: [:with_datatable] do
member do
get :confirm
end
end
rails routes showed me this path as confirm_bank_employee so I've changed if condition as follow
<% if #bank_employee.users.empty? %>
<%= button_to "", confirm_bank_employee_path(#bank_employee), form: {id: "bankEmployeeDestroyForm" }, class: "bank-employee__button-destroy", remote: true %>
<% else %>
<%= button_to "", bank_employee_path(#bank_employee), method: :delete, form: {id: "bankEmployeeDestroyForm" }, class: "bank-employee__button-destroy" %>
<% end %>
You need a different approach.
<% if #bank_employee.clients.empty? %>
<%= button_to "", bank_employee_confirm_path(#bank_employee), form: {id: "bankEmployeeDestroyForm" }, class: "bank-employee__button-destroy", remote: true %>
<% else %>
<%= button_to "", bank_employee_path(#bank_employee), method: :delete, form: {id: "bankEmployeeDestroyForm" }, class: "bank-employee__button-destroy" %>
<% end %>
now you need two things:
inside routes.rb create a collection for your blank_employee_confirm_path:
whatever setup you have, i assume you have some kind of blank_employees resources path:
resources :blank_employees do
member do
get :confirm
end
end
now, inside your controller you need to add the method confirm:
def confirm
## do whatever you want do to here
render :js
end
this will then head over to confirm.js
create a confirm.js.erb file inside your blank_employees view folder. To confirm this is working, you can add a console.log('it works') in it.
Once you have confirmed that it is working you can add the javascript code to the confirm.js.erb file:
$('#modal-body').html('<%= escape_javascript(render :partial => 'shared/your_confirmation_modal'%>');
with this setup, you need in your edit.html.erb file a <div id="modal-body"></div> that will take the modal. Also notice that in my example the confirmation modal is stored in "views/shared/_your_confirmation_modal.html". Change the path to your setup or create the exact path in order to make this work!
Notice that the "confirm" path is for the blank_employees that have no clients. The button will be only rendered when there is no client. All the other logic you had before for the blank_employees with clients stay the same. You don't need to change there anything. If you had any logic inside there for blank_employees without any clients, move the code to the confirm method.
One more thing: Make sure to add to your destroy method a render :js as well, and inside destroy.js.erb add the same kind of logic like inside confirm.js.erb, beside that you want to render the modal for blank_employees with clients. Your destroy.js.erb file should look something like this:
$('#modal-destroy').html('<%= escape_javascript(render :partial => 'shared/your_destroy_modal'%>');
Very important: Just like with the first modal, add a <div id="modal-destroy"></div> to your edit.html.erb file, otherwise it wont render the modal.
If something is unclear, let me know!
Greetings!
I want to add the Favorite function in my rails app. I added a partial favorite to show.html.erb, it will show the favorite link or unfavorite link, if I favorite a article, doesn't need to refresh whole page:
#app/views/articles/show.html.erb
<div class="panel-body"><p><%= markdown(#article.content) %></p></div>
<div class="panel-footer" id="favorite">
<div><%= render 'favorite_link' %></div>
...
_favorite_link.html.erb:
<% if not Favorite.where(user_id: current_user.id, article_id: #article.id).first %>
<%= link_to 'favorite', favorite_article_path(#article), {id: #article.id, method: :post}, remote: true %>
<% else %>
<%= link_to 'unfavorite', unfavorite_article_path(#article), method: :delete, remote: true %>
<% end %>
favorite.js.erb:
$("#favorite").html("<%= escape_javascript render partial: 'favorite_link' %>");
ArticlesController:
def favorite
#article = Article.find(params[:id])
#article.favorites.create(user_id: current_user.id)
render 'favorite'
end
def unfavorite
#article = Article.find(params[:id])
favorite = Favorite.where(user_id: current_user.id, article_id: #article.id).first
favorite.destroy
render 'favorite'
end
When I click favorite link, it doesn't work, error info as below:
ActionView::MissingTemplate (Missing template articles/favorite, application/favorite with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}. Searched in:
* "/Users/liuxingqi/Public/Sparta/my_blog/mongo_project/app/views"
* "/Users/liuxingqi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/kaminari-0.16.3/app/views"
):
app/controllers/articles_controller.rb:90:in `favorite'
but unfavorite works well. Hope someone can help me! Thanks in advance!
It search for a view with HTML extention no JS and what you have is favorite.js.erb, to fix that the request to favorite should be ajax request and with format: js something like
articles_favorite_path(format: :js)
I found the root cause, because the wrong parameters order, the remote: true doesn't work.
<%= link_to 'favorite', favorite_article_path(#article), {id: #article.id, method: :post}, remote: true %>
should be:
<%= link_to 'favorite', favorite_article_path(#article), {id: #article.id, method: :post, remote: true} %>
I'm trying to use Dropzone.js with Rails 4, and although I can get the actual Dropzone 'zone' to appear, when I try to upload images, the following
Template is missing Missing template projects/show, application/show with {:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}
However, I'm quite sure that I have the template, as images that are being uploaded without Dropzone are uploading and displaying fine
My code is as follows:
ProjectImagesController:
class ProjectImagesController < ApplicationController
def create
#project = Project.find(params[:project_id])
#project_image = #project.project_images.create(project_image_params)
redirect_to project_path(#project)
end
private
def project_image_params
params.require(:project_image).permit(:caption, :image)
end
end
projects/show.html.erb
<% if #project.project_images.any? %>
<% #project.project_images.each do |project_image|%>
<ul>
<li><%= image_tag project_image.image.url(:thumb) %></li>
<li><%= project_image.caption %></li>
</ul>
<% end %>
<% end %>
<%= simple_form_for [#project, #project_image], :html => {:multipart => true, class: :dropzone} do |f| %>
<div>
<%= f.input :caption, label: 'Enter your project image caption' %>
<%= f.file_field :image %>
<%= f.submit 'Create project image'%>
</div>
Thank you for your help in advance.
dropzone sends request in JSON format, but you try to render HTML, so you have to change your controller:
from
def create
#project = Project.find(params[:project_id])
#project_image = #project.project_images.create(project_image_params)
redirect_to project_path(#project)
end
to
def create
#project = Project.find(params[:project_id])
#project_image = #project.project_images.create(project_image_params)
render nothing: true
end
or something else in JSON format
hope I'll help somebody...
I switched from a Sony computer to an Asus, downloaded the same programs as I had on the Sony and cloned my Rails 4.0.10 project from Bitbucket. Everything else behaves the same, but Paperclip has inexplicably stopped working, though the two development environments should be exactly the same. I used Paperclip to add an avatar to my User model, but now User.create fails when I attach an avatar. I tried uninstalling and reinstalling it, but that made no difference. Does anyone with Paperclip experience know what might have happened?
Gemfile:
gem "paperclip", :git => "git://github.com/thoughtbot/paperclip.git"
# ...
models/user.rb
class User < ActiveRecord::Base
has_attached_file :avatar, :styles => { :large => "500x500", :medium => "300x300>", :thumb => "50x50!" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
# ...
controllers/users.rb
class UsersController < ApplicationController
def create
# ...
if #user.save
render :action => "crop"
else
flash[:notice] = "Failed"
redirect_to new_user_path
end
end
private
def user_params
params.require(:user).permit(:name, :avatar)
end
views/users/new.html.erb
<%= form_for #user, :url => users_path, :html => { :multipart => true } do |f| %>
<%= f.text_field :name, :placeholder => "Name" %>
<br>
<%= f.label :display_picture %>
<%= f.file_field :avatar %>
<br>
<%= f.submit "Submit", class: "btn btn-primary" %>
<% end %>
views/users/crop.html.erb
<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
ready = $(function() {
$("#cropbox").Jcrop();
});
</script>
<% end %>
$(document).ready(ready);
$(document).on('page:load', ready);
<%= image_tag #user.avatar.url(:large), :id => "cropbox" %>
Make sure imagemagick is installed on your machine. This isn't something 'bundle install' will cover.
Follow the instructions here
http://www.imagemagick.org/script/install-source.php
Or use homebrew or other package managers
Hi have problem with cocoon: https://github.com/nathanvda/cocoon and datetimepicker:http://xdsoft.net/jqplugins/datetimepicker/. When I add through cocoon new nested field my calendar not showing up. I think that I must user cocoon after:insert event in my javascript file but I tried every way and this is not working.
This is my views:
costs.html.haml
= simple_form_for [:partners, #car], url: wizard_path do |f|
= f.simple_fields_for :costs do |cost|
= render 'cost_fields', f: cost
#links
= link_to_add_association '+', f, :costs
= link_to t('cars.back'), previous_wizard_path
= f.submit t('cars.next'), class: 'btn btn-primary'
and my cost_fields partial:
.nested-fields
%table.table.table-striped.table-bordered.dupa
%thead
%th.field
= f.association :cost_type
%th.field
= f.input :netto_price
%th.field
= f.input :document_number
%th.field
= f.association :vat
%th.field
= f.input :type_of_cost
%th.field
= f.input :date, as: :string , :input_html => { :class => 'date' }
= link_to_remove_association "X", f
Any ideas?
As this post eludes, this is because the dynamically added elements are not yet in the DOM.
Try to add a class or id before your nested simple fields (this will already be in the DOM), e.g.:
#container
= f.simple_fields_for :costs do |cost|
= render 'cost_fields', f: cost
Then in your javascript file:
$(document).on('ready page:change', function() {
$('#container').on('cocoon:after-insert', function() {
$('.datetimepicker').datetimepicker();
})
})
Also, I've used this datepicker gem, which allows you to generate a wrapper input/custom date/time fields
= f.input :date, :as => :date_picker