Skip to content

Instantly share code, notes, and snippets.

@trey

trey/rails_bootstrap_delete_confirmation_modal.md

Created February 8, 2012 05:12
Show Gist options
  • Save trey/1765619 to your computer and use it in GitHub Desktop.
Save trey/1765619 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Trey Piepmeier created this gist Feb 8, 2012.
    41 changes: 41 additions & 0 deletions rails_bootstrap_delete_confirmation_modal.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    ![Here's what you get.](https://img.skitch.com/20120208-8kxrrx5bctxntkbfdh65iehym8.png)

    Some JavaScript

    ```javascript
    // Delete confirmation modals
    $('#delete-confirm').on('show', function() {
    var $submit = $(this).find('.btn-danger'),
    href = $submit.attr('href');
    $submit.attr('href', href.replace('pony', $(this).data('id')));
    });

    $('.delete-confirm').click(function(e) {
    e.preventDefault();
    $('#delete-confirm').data('id', $(this).data('id')).modal('show');
    });
    ```

    Some HTML

    ```html
    <div class="modal fade" id="delete-confirm">
    <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Delete this thing?</h3>
    </div>
    <div class="modal-body">
    <p>Be certain, sonny.</p>
    </div>
    <div class="modal-footer">
    <%= link_to 'Delete', something_path+'/pony', method: :delete, :class => 'btn btn-danger' %>
    <a href="#" data-dismiss="modal" class="btn">Cancel</a>
    </div>
    </div>
    ```

    A well-crafted link:

    ```html
    <a href="#delete-confirm" data-id="<%= @something.id %>" class="delete-confirm btn btn-danger"><i class="icon-trash icon-white"></i></a>
    ```