Tahreem Iqbal Tahreem Iqbal - 2 months ago 7
AngularJS Question

JQuery busy indicator doesn't disable keyboard events

I have integrated a Jquery busy indicator in my app from this link: http://www.aspsnippets.com/demos/1331/

It doesn't let the user click on input elements while loading. But if I press tab I can easily navigate to those input elements and enter whatever I want and press enter on button to send a service call. This defeats the whole purpose of busy indicator. Any idea how I can fix it?

This is the css:

.busy-modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.busy-center
{
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.busy-center img
{
height: 128px;
width: 106px;
}

Answer

I fixed it by manually disabling keyboard input on busy indicator. Here's how I did it:

In my angularJS controller I declared a variable that will decide whether to disable keyboard input or not

$scope.disableKeys = false;

then I added following code that disables keyboard input

window.addEventListener('keydown', function (event) {

    if ($scope.disableKeys == true) {
        event.preventDefault();
        return false;
    }
});

this is my busyIndicator function:

function busyIndicator(type)
{
    if(type == 1)
    {           
        $scope.disableKeys = true;
        $(".busy-modal").show();
    }
    else if (type == 0)
    {
        $scope.disableKeys = false;
        $(".busy-modal").hide();
    }
}

Finally, calling this function:

//to show busy indicator
busyIndicator(1);

//to hide busy indicator
busyIndicator(0);

and that's it.

Comments