Collapse.JS creating a dropdown icon on panel heading


By default Bootstrap 3 comes integrated with CollapseJS which offers expandable accordion like panels. These panels are very simple to setup and work great. However, since the font is uncolored it may not be obvious to some users that this panel expands.

Not collapsible

Not user friendly

Using pure CSS a dropdown icon can be placed on all panels that you create. The css places the icon after the link, and switches the icon to a down arrow once the panel has been expanded.


.panel-heading a:after {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   color: grey;

.panel-heading a.collapsed:after {
   content: "\e080";

The result


Appears to be collapsible


The result is a more user intuitive collapsible panel. The main difference between using the Primefaces collapsible panel and the bootstrap js version is data accessibility. Primefaces will call a ajax event once the panel is to be rendered. Whereas CollapseJS will have already loaded the data from the backend bean. This may require you to update at the prerendered content manually, but the benefits of self managing the panels far outweighs the negatives.

HTML5 input type=”date” with javascript fallback


HTML5 brings great new features which will ease development. However, currently there is a gap between browsers that support HTML5 attributes and those who do not. As of October around 60% of desktop browsers and 80% of mobile devices are HTML5 compliant. This means developers still need support the additional 40% which fallback techniques.

HTML5 date input field

A good example is the new date input field. If your browser is HTML5 compliant it generate a date picker for you to use automatically, thus only requiring the developer to create the input field as so:

<input name="start_date" type="date" placeholder="mm/dd/yyyy" />

If the browser does not support HTML5 then no restriction on the date format will occur. This is why javascript is a beautiful tool.

Providing a fallback

Using a combination of Modernizr, jQuery, and bootstrap-datetimepicker javascript libraries a HTML5 date field can be emulated. Modernizr is a library use for feature detection. It can recognize if the HTML5 date object is available to the browser. If the date object is not available then the bootstrap-datetimepicker will bind to the input and provide a calendar for the user.

The following is the javascript which a datetime picker to the input field below if necessary.

$(document).ready(function () {
    // If they do not have HTML5 date then provide a datepicker using javascript
    if (! {
            pickDate: true,
            pickTime: false

The input field has classes attached that are from the bootstrap 3 library. These libraries add a hint of design to the end result.

<div class="input-group date" id="startDatetime">
   <input name="end_date" type="date" placeholder="mm/dd/yyyy" class="form-control"/>
   <span id="endDateIcon" class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>

Note: In this example I used the bootstrap-datetimepicker library, however any javascript date picker may be substituted in its place. The following libraries were used: bootstrap3, modernizr, momentjs (required by bootstrap-datepicker), and jQuery 2.1.0.

A example of this project can be seen on JSFiddle.

Alert unsaved data before unloading page


This post looks to solve the classic problem of navigating away from a unsaved form and loosing all your data. This has caused many end users headaches especially if you have a application with many form pages. This solution uses javascript to alert the user when they are navigating away from a page that has unsaved data. It also has the knowledge to unbind the alert when the user has submitting data to the server.

The Solution:

First we begin by declaring our namespace for the functions are are going to define. I have called it “myApp”. After the document is ready I declare my one and only function “confirmExitIfModified”. This holds all the logic to determine if the form is dirty. This code needs to be included or referenced at the top of your page.

// Declare Namespacing
var myApp = myApp || {};

// Load when document is ready
$(document).ready(function() {

    myApp.confirmExitIfModified = (function() {

        // Determines if a form is dirty by comparing each element to its default value
        function isFormDirty(form) {
            for (var i = 0; i < form.elements.length; i++) {
                var element = form.elements[i];
                var type = element.type;
                if (type === "checkbox" || type === "radio") {
                    if (element.checked !== element.defaultChecked) {
                        return true;
                else if (type === "hidden" || type === "password" || type === "text" || type === "textarea") {
                    if (element.value !== element.defaultValue) {
                        return true;
                else if (type === "select-one" || type === "select-multiple") {
                    for (var j = 0; j < element.options.length; j++) {
                        if (element.options[j].selected !== element.options[j].defaultSelected) {
                            return true;

            return false;

        return function(message) {

            // Bind to all forms, we do not want to alert when we are submitting
            for (var i = 0; i < document.forms.length; i++) {
                var form = document.forms[i];
                $(form).bind('submit', function() {
                    window.onbeforeunload = null;

            window.onbeforeunload = function(e) {
                e = e || window.event;
                for (var i = 0; i < document.forms.length; i++) {

                    if (isFormDirty(document.forms[i])) {
                        // For IE and Firefox
                        if (e) {
                            e.returnValue = message;
                        // For Safari
                        return message;

A critical part of this code is the ability for it to detect when you are submitting data and not navigating. In the return function there is a for loop that iterates through each of the forms. It then binds to that forms submit event using jQuery. When the form is submitted it terminates the function below that calls the onbeforeunload event. Effectively removing the alert from being called.


Place this code at the bottom of your page before thetag. You can add your own custom message.

$(document).ready(function() {
   myApp.confirmExitIfModified('You have unsaved changes.');