Question

我想将destroy操作中的默认浏览器确认更改为Bootstrap模式窗口。我找到了this implementation，我需要更改它以符合Bootstrap 3模态HTML。不幸的是，当我点击“删除”时，没有任何反应。我试图将remote: true放在视图中的destroy动作链接中，并在控制器的destroy动作中响应format.js。

我还查看了here和here，但无法找到将解决方案应用于我的代码的方法。

这是我的代码：

视图中的链接：

<%= 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">&times;</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'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

有关如何使销毁操作的任何提示实际上都与引导模式一起使用？

Answer 1

首先检查是否正在捕获您的点击事件，如果没有，则是因为选择器。

这是我的情况，我可以通过从$('#confirmationDialog .confirm').on 'click'更改为来解决问题 $(html).find('.confirm).on 'click'

干杯

我的Bootstrap模式不会触发控制器中的destroy动作

1 个答案: