Jquery BlockUI plugin - blocking input field

Question

I would like to know if JQuery BlockUI plugin can be used to disable a input field directly.

I see the samples on jquery plugin.

http://jquery.malsup.com/block/#element.

when I give just the input field id in the jquery selector, it is not working.

$(document).ready(function() { 

    $('#blockButton').click(function() { 
        $('#inputId').block({ message: null }); 
    })

when I just give the input field id, it doesn't work, but instead if i give anchor tag id or a div tag id it is working fine.

is there a solution to block just the input fields(text, select etc).

please do let me know.

Answer 1

You could just set the input to readonly instead of trying to block it:

$('#inputId').attr('readonly', 'readonly');

or

$('#inputId').prop('readonly', true);

Answer 2

I wrote a pair of wrapper functions to make calls to BlockUI's block() function. I wrote them for two reasons: 1. To set up some default options, 2. To prevent elements from being blocked more than once.

I ran across this same issue as you, where IE throws an exception when trying to block an INPUT element. I modified my block function to check to see if the element being blocked is an INPUT, and if so, it disables the INPUT and blocks the INPUT's parent instead. You'll want to wrap the input inside a DIV (to act as the parent) so that only a small portion of your UI is blocked.

// Wrapper function for the BlockUI Plugin http://jquery.malsup.com/block/
// This function blocks an element.
// @param {String, Object} element - Reference to the element to block, either the selector string, or the jQuery object itself
// @param {Object} options - a hash of options to pass to the block() call
function blockElement(element, options) {

    if (typeof element == 'string') {
        element = $(element);
    }

    if (element.length > 0) {
        if (typeof options == 'undefined') {
            options = {};
        }        

        initHash(options,
            { message: 'Please Wait',
                css: { width: '20%', padding: '3px' },
                overlayCSS: {},
                cursor: 'wait'
            }
        );

        initHash(options.css, { cursor: options.cursor });
        initHash(options.overlayCSS, { cursor: options.cursor });

        var blockOptions = {
            message: options.message,
            css: options.css,
            overlayCSS: options.overlayCSS,
            fadeIn: 0
        }

        if (!$.support.leadingWhitespace) {
            // disable fading in IE browsers less than IE9, it's slow to animate
            blockOptions.fadeIn = 0;
        }

        // if an element is already blocked, do not try to block it again
        var isBlocked = element.attr('data-isBlocked');
        if (isBlocked != 'true') {
            element.attr('data-isBlocked', true);
            // do not try to block input elements, it breaks in IE
            // instead disable the input and block it's parent
            if (element.is('input')) {
                element.parent().block(options);
                element.attr('disabled', 'disabled');
            } else {
                element.block(blockOptions);
            }

        }
    }
}

// Unblocks an element that was blocked using blockElement()
// @param {String, Object} element - Reference to the element to block, either the selector string, or the jQuery object itself
function unblockElement(element) {
    if (typeof element == 'string') {
        element = $(element);
    }

    var options = {};
    if (!$.support.leadingWhitespace) {
        // disable fading in IE browsers less than IE9
        options.fadeOut = 0;
    }

    if (element.length > 0) {
        element.attr('data-isBlocked', false);
        if (element.is('input')) {
            element.removeAttr('disabled');
            element.parent().unblock(options);
        } else {
            element.unblock(options);
        }
    }
}


// initalize a hash/map/associative-array with default values
// if the keys already exist, then they are left alone
// @param: {Object} targetHash - the hash that is going to be initalized
// @param: {Object} defaults - a hash containing the default values that should be added to targetHash
// @usage: initHash(targetHash, {a:1,b:2,c:3});
function initHash(targetHash, defaults) {
    $.each(defaults, function (index, value) {
        if (!(index in targetHash)) {
            targetHash[index] = value;
        } else {
            if (targetHash[index] == null || targetHash[index] == undefined) {
                targetHash[index] = value;
            }
        }

    });
}