Compatibility Fixes - Avenger

Some plugins listed requires special modifications to work with Bootstrap 3, and thus, the theme.

## Data Tables

Datatables has built in support for jQueryUI, however, to make it play nicely with Bootstrap 3, include the dataTables.bootstrap.js script, and the dataTables.bootstrap.css and dataTables.fontAwesome.css files.

All other functions to initialize the table remains the same, however we also recommend adding a placeholder for overall UX/UI look

    $(document).ready(function() {
        $('#example').dataTable();
        $('.dataTables_filter input').attr('placeholder','Search...');
    });

## Form Validation / Stepy Plugin

Add the following line of code after you call the `.stepy()` plugin. This ensures that the back and next buttons are properly indented to the `panel-footer`. jQuery.steppy.js has been lightly modified with classnames used in Bootstrap 3

    $('.stepy-navigator').wrapInner('<div class="pull-right"></div>');

Form Validation / jQuery Validation Plugin

    Add these properties to the jQuery Validation plugin to make it work with Avenger. Note that this is not the plugin demonstrated in the Form Validation demo of the site but just with the wizard. The jQuery Validator support is built in to the Wizard

    $('#form').validate({
        errorClass: "help-block",
        validClass: "help-block",
        highlight: function(element, errorClass,validClass) {
           $(element).closest('.form-group').addClass("has-error");
        },
        unhighlight: function(element, errorClass,validClass) {
            $(element).closest('.form-group').removeClass("has-error");
        }
    });

## Parsley.js

Add these properties whenever you use Parsley before loading parsley.js

    window.ParsleyConfig = {
          successClass: 'has-success'               // Class name on each valid input
        , errorClass: 'has-error'                   // Class name on each invalid input
        , errorElem: '<span></span>'            // each field constraint fail in an li
        , errorsWrapper: '<span class="help-block"></span>' // ul elem that would receive errors’ list
        , errorTemplate: "<div></div>"          // li elem that would receive error message
        , classHandler: function(el) {
            return el.$element.closest(".form-group");
        }
    };

More information: http://parsleyjs.org/doc/annotated-source/defaults.html

« Previous Next »