LoginSignup
10
10

More than 5 years have passed since last update.

jquery-rails で確認プロンプトを Bootstrap のモーダルとして表示する

Last updated at Posted at 2012-05-03
link.html.erb
<%= link_to "Delete", delete_post_path(post), :confirm => "Are you sure?", :method=>:delete %>

みたいにすると、デフォルトでは JavaScript の confirm で確認され、格好悪いので、$.rails.fire メソッドを上書きして Bootstrap のモーダルを出します。

confirm.js.coffee
rails = $.rails
_fire = rails.fire
modal = null

createModal = () ->
  $("body").append('<div class="modal hide fade" id="confirm-modal">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">&times;</a>
      <h3>Confirmation</h3>
    </div>
    <div class="modal-body">
      <p class="modal-message"></p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Cancel</a>
      <a href="#" class="btn btn-danger" data-submit-modal="modal">OK</a>
    </div>
  </div>')
  modal = $("#confirm-modal")

rails.fire = fire = (obj, name, data) ->
  if name == 'confirm'
    message = obj.data 'confirm'
    (modal||createModal())
      .modal({ backdrop: true, keyboard: true, show: true })
      .one "hide", () ->
        btnSubmit.unbind "click"
        false
    btnSubmit = modal
      .find("a[data-submit-modal]")
      .one "click", () ->
        if obj.is rails.linkDisableSelector
          rails.disableElement obj
        if obj.data('remote') != undefined && rails.handleRemote(obj) == false
          rails.enableElement obj
        else if obj.data 'method'
          rails.handleMethod obj
        modal.unbind("hide").modal("hide")
        false
    modal
      .find(".modal-message")
      .html(obj.data("confirm"))
    false
  else
    _fire.apply this, [obj, name, data]
10
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10