I want to change the default browser confirmation in the destroy action to a Bootstrap modal window instead. I found this implementation, which I needed to change to conform with Bootstrap 3 modal HTML. Unfortunately, when I click "delete", nothing happens. I tried to put remote: true in the destroy action link in the view and respond to format.js in the destroy action in the controller.
I also looked here and here, but could not find a way to apply the solution to my code.
Here is my code:
Link in the view:
<%= link_to '', task, method: :delete,
data: { confirm: 'Do you want to delete this task?' },
class: "destroy-btn glyphicon glyphicon-trash" %>
tasks.js.coffee:
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
jQuery ->
$('.best_in_place').best_in_place()
$.rails.allowAction = (link) ->
return true unless link.attr('data-confirm')
$.rails.showConfirmDialog(link)
false #if I remove this line, destroy works, but automatically, without pressing the button
$.rails.confirmed = (link) ->
link.removeAttr('data-confirm')
link.trigger('click.rails')
$.rails.showConfirmDialog = (link) ->
message = link.attr 'data-confirm'
html = """
<div class="modal fade" id="confirmationDialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete task?</h4>
</div>
<div class="modal-body">
<p>#{message}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger confirm">Delete</button>
</div>
</div>
</div>
</div>
"""
$(html).modal()
$('#confirmationDialog .confirm').on 'click', -> $.rails.confirmed(link)
Controller:
def destroy
@task.destroy
respond_to do |format|
format.html { redirect_to tasks_url }
format.json { head :no_content }
end
end
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.purr
//= require bootstrap
//= require best_in_place
//= require turbolinks
//= require_tree .
gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
gem "bootstrap-sass", "~> 3.0.0.0"
gem 'best_in_place', github: "bernat/best_in_place"
gem 'devise', '~> 3.1.1'
group :development, :test do
gem 'sqlite3'
gem 'debugger'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
Any tips on how to make the destroy action actually work with the bootstrap modal?