6

私はこのページを見ていました ( http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/ ) そこにはいくつかのコードが表示されていますが、どのように私がアプリに実装できます。

Rails3.2、Bootstrap.css、JQuery を使用しています。
ブートストラップのモーダルで「削除確認ダイアログ」を表示するために正確に何をしなければならないか教えてもらえますか?

アップデート：

assets/javascripts/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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery-ui
//= require twitter/bootstrap
//= require_tree .
//= require jquery.ui.datepicker
//= require autocomplete-rails
4

1 に答える 1

13

このブログ エントリでは、coffeescript を使用しています。Rails フォームでオプションを使用しているとします。次に、アセット パイプライン:confirmのファイルに次のコードを追加して、Rails のデフォルト アクションをオーバーライドする必要があります( )。<controller>.js.coffeeapp/assets/javascript

$.rails.allowAction = (link) ->
  return true unless link.attr('data-confirm')
  $.rails.showConfirmDialog(link) # look bellow for implementations
  false # always stops the action since code runs asynchronously

$.rails.confirmed = (link) ->
  link.removeAttr('data-confirm')
  link.trigger('click.rails')

$.rails.showConfirmDialog = (link) ->
  message = link.attr 'data-confirm'
  html = """
         <div class="modal" id="confirmationDialog">
           <div class="modal-header">
             <a class="close" data-dismiss="modal">×</a>
             <h3>#{message}</h3>
           </div>
           <div class="modal-body">
             <p>Are you sure you want to delete?</p>
           </div>
           <div class="modal-footer">
             <a data-dismiss="modal" class="btn">Cancel</a>
             <a data-dismiss="modal" class="btn btn-primary confirm">OK</a>
           </div>
         </div>
         """
  $(html).modal()
  $('#confirmationDialog .confirm').on 'click', -> $.rails.confirmed(link)

次に、ビューで次のようなリンクを使用すると、標準のブラウザー ポップアップの代わりに Bootstrap モーダルが表示されます。

<%= link_to 'Delete', item, :method => :delete, :confirm=>'Are you sure?' %>

アップデート

これは、:remote => trueオプションを使用しても機能します。

したがって、index.html.erb ビューに次のようなものがあるとします。

<table>
  <tr>
    <th>Name</th>
    <th>Title</th>
    <th>Content</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @posts.each do |post| %>
  <tr id="<%= post.id %>">
    <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, :remote => true, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

また、コントローラの destroy アクションにはformat.js、respond_to があります。

  # DELETE /posts/1
  # DELETE /posts/1.json
  def destroy
    @post = Post.find(params[:id])
    @post.destroy

    respond_to do |format|
      format.js
      format.html { redirect_to posts_url }
      format.json { head :no_content }
    end
  end

そして、これは destroy.js.erb で:

$("tr#<%= @post.id %>").fadeOut();

その後、すべてが機能します。リンクをクリックするDestroyと、Bootstrap の確認ダイアログが表示され、[OK] をクリックすると、行がフェードアウトしてサーバー上で破棄されました。

于 2013-01-07T09:27:42.163 に答える