Keystrokes are not blocked

[cesarvinas]

I have a dropdown in my page, when user selects an element an ajax call is made to get data for a second dropdown. I'm using this, in a ASP.Net master page, to block the page when an ajax request happens in any page:

jQuery(document).ajaxStart(function () {
jQuery.blockUI({
bindEvents: true,
constrainTabKey: true,
css: {
border: "1px solid #000000",
padding: "20px 0px 20px 0px"
},
focusInput: false,
ignoreIfBlocked: true,
message: jQuery("#loadingMessageBox")
})
}).ajaxComplete(jQuery.unblockUI);

However, when after selecting an element from the first dropdown the user presses the arrow-down key the keystroke is accepted by the page even though it's blocked. Therefore, subsequent ajax requests are made to the server and if the user keeps doing this eventually an error is thrown by the blockui plugin: Line 242: Unable to get property 'parentNode' of undefined or null reference.

[mrfatguy]

Instead of using global-blocking approach (jQuery(document).ajaxStart), try to block particular object (dropdown), as in this example and add additional line of $('#object-you-re-blocking').attr('disabled', 'disabled');.

Then, after unblocking that object, try to use $('#object-you-re-blocking').attr('disabled', '');. Should work.