BlockUI "parentNode" exception from undefined

Question

I have huge javascript code and an interface unlock lock through your UI.js block ( http://malsup.com/jquery/block/ )

I get "Unable to read property" parentNode "from undefined" randomly.

It seems that the lock / unlock sequence in my code came out of sync.ex. due to the multiple html template it can lock twice and unlock once or vice versa. I find it difficult to analyze all the code and fix the order.

I managed to create a problem violin. Can someone please take a look and advise a quick solution?

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 problem. I basically created a dynamic element and put the contents of my loader in this div and used it to lock.

my improved 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 2

Usually this problem arises because the DOM element specified in the "message" property or cannot be found as the message property is not specified at all, in your case you need to make sure $('#loader') returns the element.

Hint: you can even pass message: null in case you just need to lock without displaying any content or loading an image.

Answer 3

This was done for me by putting some text instead of loading one of the 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' }) 

So it works, with the same result!