martes, 15 de octubre de 2013

Confirmación en Bootstrap 3

Para eliminar un registro sólo hace falta hacer click sobre el botón eliminar, pero, mejor si le preguntamos al usuario si esta seguro de eliminar ese registro, para ello vamos a hacer una modal con un botón para confirmar la eliminación del registro.

Para ello agregamos en nuestro archivo scripts.js:

nano src/Petramas/MainBundle/Resources/js/scripts.js
var $modal = '<div class="modal-dialog">\n\
    <div class="modal-content">\n\
      <div class="modal-header">\n\
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n\
        <h4 class="modal-title">{{ title }}</h4>\n\
      </div>\n\
      <div class="modal-body">\n\
        <p>{{ body }}</p>\n\
      </div>\n\
      <div class="modal-footer">\n\
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>\n\
        <button type="button" class="btn btn-danger delete-remove">{{ ok }}</button>\n\
      </div>\n\
    </div>\n\
  </div>';
$(document).on('ready', function(){
    $('button.entity-submit-delete').on('click', function(e){
        e.preventDefault();
        var $this = this;
        var data = {
            title: 'Eliminar registro',
            body: '¿Esta seguro de elimnar el registro?',
            ok: 'Eliminar'
        };
        modal = $.mustache($modal, data);
        $('#petramasModal').html(modal).modal();

        $(document).on('click', 'button.delete-remove', function(){
            $($this).parent().parent().parent().submit();
            $(this).parent().find('button').attr('data-dismiss', 'modal').trigger('click');
        });
    });
});