blockUI exception 'parentNode' of undefined

Question

I have huge javascript code and blocking unblocking UI through your blockUI.js (http://malsup.com/jquery/block/)

I get "Cannot read property 'parentNode" of undefined" exception randomly.

It seems like blocking/unblocking sequence in my code got out of sync.ex. because of multiple html template it might be blocking twice and unblocking once or vice versa. It is hard for me to analyze all the code and fix the order.

I was able to generate a fiddle of an issue. Can somebody please take a look and advise a quick fix?

http://jsfiddle.net/pareshvarde/D8KW4/

<script type="text/javascript">
    $(function () {
        $("#blockButton").click(function () {
            myBlock($('#blockSection'));
        });

        window.setInterval(function () {
            myBlock();
            myBlock($('#blockSection'));
            window.setTimeout(function () {
                myUnblock();
                myUnblock($('#blockSection'));
            }, 5000)
        }, 2000);

        $("#unBlockButton").click(function () {
            myUnblock($('#blockSection'));
        });
    });

    myBlock = function (surroundingControl, message) {
        console.log('blocking');

        if (message)
            $("#loader h4").text(message);
        else
            $("#loader h4").text('Loading...');

        if (surroundingControl)
            surroundingControl.block({ message: $('#loader'), baseZ: 1200 });
        else {
            $.blockUI.defaults.message = $('#loader');
            $.blockUI.defaults.baseZ = 1200;
            $.blockUI.apply();
        }
    };

    myUnblock = function (surroundingControl) {
        console.log('unblocking');

        if (surroundingControl)
            surroundingControl.unblock();
        else
            $.unblockUI.apply();
    };
</script>

Answer 1

Usually this problem comes as it could not find the DOM element that's specified in "message" property or message property was not specified at all, in your case you need to make sure that $('#loader') is returning an element.

Hint: You could even pass message: null in case you just need to block without displaying any content or loading image.

Answer 2

OK finally I fixed the issue. Basically I created a dynamic element and placed content of my loader into that div and used it for blocking.

my upldated myBlock function as follows:

myBlock = function (surroundingControl, message) {            
        console.log('blocking');

        if (message)
            $("#loader h4").text(message);
        else
            $("#loader h4").text('Loading...');

        var messageContent = document.createElement('div');
        if ($('#loader') !== undefined)
            $(messageContent).html($('#loader').html());
        else
            $(messageContent).html("Loading....");

        if (surroundingControl)
            surroundingControl.block({ message: messageContent, baseZ: 1200 });
        else {
            $.blockUI.defaults.message = messageContent;
            $.blockUI.defaults.baseZ = 1200;
            $.blockUI.apply();
        }
    };

Answer 3

For me, it was done putting some text, instead of loading the one from an html element.

Before:

 $.blockUI({
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '15px',
            '-moz-border-radius': '15px',
            opacity: 1,
            color: '#fff'
        }, message: $('#loadingMessage')
    });

After

 $.blockUI({
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '15px',
            '-moz-border-radius': '15px',
            opacity: 1,
            color: '#fff'
        }, message: 'Loading'
    })

This way, it worked, with same result!