Я хочу изменить подтверждение браузера по умолчанию в деле уничтожения вместо модального окна Bootstrap. Я нашел эту реализацию, которую мне нужно было изменить, чтобы соответствовать модальному HTML Bootstrap 3. К сожалению, когда я нажимаю "delete", ничего не происходит. Я попытался поместить remote: true
в ссылку уничтожить действие в представлении и ответить на format.js
в действии destroy в контроллере.
Я также посмотрел здесь и здесь, но не смог найти способ применить решение к моему коду.
Вот мой код:
Ссылка в представлении:
<%= 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)
контроллер:
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 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
Любые подсказки о том, как сделать действие уничтожения, действительно работают с модулем bootstrap?
Сначала проверьте, что ваше событие клика захватывается, а если нет, это из-за селектора.
Это был мой случай, и я смог его исправить, изменив значение с $('#confirmationDialog.confirm').on 'click'
to $(html).find('.confirm).on 'click'
ура