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

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();
        }
    };