JQuery Block UI element blocking issues

Question

I am developing a Web application which is based on ASP.NET 4.0, jQuery, Ajax and JavaScript. I have used AJAX for binding the cascaded comboBoxes, populating values on fields and etc etc.

I wanted to block an element if AJAX request is in progress for e.g. If I select country so the State comboBox should be blocked.

For this Purpose, I have used JQuery Block UI plugin which works well with mouse but when you access the element via tab then the blocked element can be accessed and manipulated.

I want to block the state ComboBox fully i.e. user cannot access it via mouse, keyboard etc but unable to do with Jquery Block UI.

Is there anything I am missing.

Block Code:

$('#statecombo').wrap(<div id='state_div'></div>); //wrapping the div to control

$('#state_div').block({ message: 'Images/busy.gif' Processing....', css: { width: 'auto', height: 'auto' },  bindEvents: true, constrainTabKey: false });

and I am unblocking where AJAX request ends.

Any suggestions?

Kindly help as I am stuck. Any help would be much appreciated !!

Answer 1

When you block it set $('#statecombo').attr("tabindex",-1), set it back when you unblock it $('#statecombo').attr("tabindex","")