Category Archives: bootstrap

Replace confirm with Bootstrap modal and Backbone view

We all hate ugly confirms but now you can use a nice backbone view and bootstrap modal to bug your users and act on btn click.

Modal:

<div class="modal fade" id="confirm-modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <span id="header-text"></span><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Are You Sure?</h4>
 </div>
 <div class="modal-body">
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-ok" data-dismiss="modal">OK</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Backbone View:

App.Views.ConfirmModalClass = Backbone.View.extend({
   el: "#confirm-modal",
   events: {
    "click .btn-ok": "runCallBack"
   },
   initialize: function(args){
	   this.$el.find(".modal-body").html("<p>"+args.body+"</p>");
	   this.cb = args.cb;
   },
   render: function(){
     this.$el.modal("show");
  },
  close: function(){
     this.$el.modal("close");
  },
  runCallBack: function(){
       this.cb();
  }
});

Usage (from inside another view):

var that = this;
	   var confirmModal = new App.Views.ConfirmModalClass({
	      cb: function(){
				//use that to run functions for this view
	      },
		  body: "BODY"
	   });
	    confirmModal.render();
Tagged , ,

Twitter Bootstrap Toggle Dropdown on Mouseover

When combining Bootstrap tables with libraries like datatables for sorting you need to use the click function to sort the field and not initiate the dropdown. So the logical thing to do is to toggle the dropdown on mouseover.

This is how I accomplish this task:

  	  <th>
              <ul class="nav">
	      <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="status_filter_dropdown">
                    Notification Status <span class="caret"></span>
                 </a>
                 <ul class="dropdown-menu">
                   <li><a class="status_filter" selected>Open</a></li>
	           <li><a class="status_filter">Closed</a></li>
	           <li><a class="status_filter">All</a></li>
                  </ul>
              </li>
	     </ul>
	  </th>
$(".dropdown-toggle").mouseover(function(){
	     $(this).dropdown('toggle');
	});
Tagged , , ,