Jak mogę wyświetlić "Delete Confirm Dialog" z modalem bootstrap? nie tak jak domyślna przeglądarka

Question

Patrzyłem na tę stronę (http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/). Pokazuje ona niektóre kody, ale nie rozumiem, jak mogę ją zaimplementować w mojej aplikacji.

Używam Rails3.2, Bootstrap.css i JQuery.
Czy ktoś może mi powiedzieć, co dokładnie muszę zrobić, aby wyświetlić "Delete Confirm Dialog" z modalem bootstrap?

UPDATE:

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

Answer 1

The blog entry wykorzystuje coffeescript. Powiedzieć używasz opcji :confirm w szynach formie, to trzeba zastąpić domyślne działanie w Rails, umieszczając poniższy kod w pliku <controller>.js.coffee w rurociągu aktywów (app/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) 

Następnie można użyć linki jak to w widoku i powinny wyświetlić Bootstrap modal zamiast standardowej przeglądarki pop-up:

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

UPDATE

Działa to również dla mnie, używając opcji :remote => true.

Więc jeśli mam coś jak następuje moim zdaniem 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> 

I zniszczyć działanie w kontroler format.js w 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 

I w the destroy.js.erb:

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

To wszystko działa. Po kliknięciu łącza Destroy pojawia się okno dialogowe potwierdzenia Bootstrap, a po kliknięciu przycisku OK, wiersz zanika i został zniszczony na serwerze.