2013-01-07 6 views
6

私はこのページ(http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/)を見ていましたが、そこにいくつかのコードを示していますが、私のアプリにどのように実装できるのか分かりません。ブートストラップのモーダルで「削除確認ダイアログ」を表示するにはどうしたらいいですか?ブラウザのデフォルトと似ていません

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

UPDATE:

資産/ JavaScriptの/

// 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 

答えて

13

The blog entryはCoffeeScriptのを使用していますapplication.js。形成し、その後、あなたはあなたの資産パイプライン(app/assets/javascript)に<controller>.js.coffeeファイルに次のコードを置くことで、Railsの中にデフォルトのアクションをオーバーライドする必要があなたのレールに:confirmオプションを使用していると言う:

$.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) 

あなたが、その後することができますあなたのビューでは、このようなリンクを使用して、彼らはブートストラップではなく、標準のブラウザのポップアップのモードを表示する必要があります

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

UPDATE

これは私のためにも: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> 

をそしてrespond_toにコントローラ内のアクションがあるformat.jsを破壊する:

# 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リンクをクリックすると、ブートストラップの確認ダイアログがポップアップし、[OK]をクリックすると、その行はフェードアウトしてサーバー上で破棄されます。

+0

詳細な説明をありがとうございます。最初のコードを 'communities.js.coffee'にコピーし、2番目のコードを'/views/communities/index.html.erb'にコピーしました。しかし、モーダルはポップアップしません。依然としてデフォルトのダイアログがポップアップします。なぜなのかご存知ですか? – cat

+0

チェックするには:ブートストラップJavaScriptをRailsに追加したとします(CSSだけではない) - 'bootstrap.min.js'または' bootstrap.js'もあなたのアセットパスにあるはずですか?ページを読み込んだり、[削除]をクリックしたときにJavaScriptコンソールに表示されるエラーにはどのようなものがありますか? – mccannf

+0

ありがとうございます。 ** assets/javascript **には 'bootstrap.js.coffee'、' rails.js'、** assets/stylesheets **には 'bootstrap.css.erb'があります。私は自分の質問を更新しました。 – cat

関連する問題