Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 3 modals in Rails 4 confirms using bootstrap3-dialog JS plugin
//= require jquery
//= require jquery_ujs
//= require_tree .
// ^ I am assuming that bootstrap3-dialog is in the tree
//GLOBAL JQuery Functaionality
$(function(){
/*** CONFIRM MODAL OVERRIDE ***/
//override the use of js alert on confirms
//requires bootstrap3-dialog from https://github.com/nakupanda/bootstrap3-dialog
$.rails.allowAction = function(link){
if( !link.is('[data-confirm]') )
return true;
BootstrapDialog.show({
type: BootstrapDialog.TYPE_DANGER,
title: 'Confirm',
message: link.attr('data-confirm'),
buttons: [{
label: 'Accept',
cssClass: 'btn-primary',
action: function(dialogRef){
link.removeAttr('data-confirm');
link.trigger('click.rails');
dialogRef.close();
}
}, {
label: 'Cancel',
action: function(dialogRef){
dialogRef.close();
}
}]
});
return false; // always stops the action since code runs asynchronously
};
//Other global javascript stuffs
//...
});
@Genkilabs

This comment has been minimized.

Show comment
Hide comment
@Genkilabs

Genkilabs May 15, 2014

Use:

  1. Put bootstrap-dialog.js in app/assets/javascripts and bootstrap-dialog.css in app/assets/stylesheets/screen
  2. Copy snippet into application.js as shown.
  3. Done.

More info on customization here: http://nakupanda.github.io/bootstrap3-dialog/
Core Project: https://github.com/nakupanda/bootstrap3-dialog

Owner

Genkilabs commented May 15, 2014

Use:

  1. Put bootstrap-dialog.js in app/assets/javascripts and bootstrap-dialog.css in app/assets/stylesheets/screen
  2. Copy snippet into application.js as shown.
  3. Done.

More info on customization here: http://nakupanda.github.io/bootstrap3-dialog/
Core Project: https://github.com/nakupanda/bootstrap3-dialog

@mahemoff

This comment has been minimized.

Show comment
Hide comment
@mahemoff

mahemoff Oct 22, 2014

Minor nit, but I suggest putting it in a separate file and requiring it so that application.js is purely require statements.

mahemoff commented Oct 22, 2014

Minor nit, but I suggest putting it in a separate file and requiring it so that application.js is purely require statements.

@silversilkroad

This comment has been minimized.

Show comment
Hide comment
@silversilkroad

silversilkroad Feb 23, 2015

PLEASE SOS. I need example toggle Bootsrap dialog using a simple button or link. How to do? as you see in the examples NAKUPANDA repository the demo is using CODE SOURCE RUNNABLE. i want the code to be HIDDEN and launched from a simple button or menu link. thanks in advance

silversilkroad commented Feb 23, 2015

PLEASE SOS. I need example toggle Bootsrap dialog using a simple button or link. How to do? as you see in the examples NAKUPANDA repository the demo is using CODE SOURCE RUNNABLE. i want the code to be HIDDEN and launched from a simple button or menu link. thanks in advance

@trincema

This comment has been minimized.

Show comment
Hide comment
@trincema

trincema Jan 28, 2016

How can I connect this with AngularJS? ng-model does not work in an input form inside message

trincema commented Jan 28, 2016

How can I connect this with AngularJS? ng-model does not work in an input form inside message

@Ramyz986

This comment has been minimized.

Show comment
Hide comment
@Ramyz986

Ramyz986 Feb 2, 2016

how do i use auto destroy !

Ramyz986 commented Feb 2, 2016

how do i use auto destroy !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment