The JQuery loading symbol does not prevent keyboard interactions

I successfully implemented a Jquery busy indicator in my application using the following link:

However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab key. This allows me to input data and press enter without waiting for the loading process to finish, which defeats the purpose of the busy indicator. Does anyone have any suggestions on how I could address this issue?

Below is the CSS code:

.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;
    }
javascriptjqueryhtmlcssangularjs

Answer №1

I successfully resolved the issue by manually disabling keyboard input on the busy indicator. Here is my approach:

Within my AngularJS controller, I initialized a variable to control the option of disabling keyboard input:

$scope.disableKeys = false;

Then, I implemented the following code snippet to handle the keyboard input disabling:

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

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

This is the function responsible for managing the busy indicator:

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

Finally, I utilized this function as follows:

//to display the busy indicator
busyIndicator(1);

//to hide the busy indicator
busyIndicator(0);

And that concludes the resolution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scroll to the top of a new page with Material UI's table component

Feeling a little stuck here. I've tested various settings with scrollTop, but haven't had much luck. To clarify, I'm working with Material UI and their pagination features in conjunction with a table (you can find the documentation here). W ...

javascriptreactjsmaterial-ui

The value stored in $_POST['valuename'] is not being retrieved

Having recently delved into ajax, I am encountering some difficulties in making it function properly. The objective of the code is to send two variables from JavaScript to PHP and then simply echo them back as a string. However, instead of receiving the e ...

javascriptphpajaxpost

Maximizing the impact: tips for utilizing URL links effectively

I am currently utilizing the supersized feature from this source. Could someone guide me on how to utilize the URL of a slide? I have already made use of the title and understand that I need a div slidecaption with an ID, but how do I include a slide URL ...

jquerysupersized

Guide to configuring Javascript as a Blade template for integration into an API endpoint

I am currently developing a Javascript program that is loaded through an external include. Here's how it looks: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ...html code goes here... & ...

javascriptphplaravellaravel-bladeabstraction

Having trouble displaying a set of data points in a React component

Exploring React, I have built a test app and performed an API call to fetch a large JSON object. After breaking it down into 10 arrays with 3 props each, I am now facing a challenge in sending this data to another component. Despite being able to log the ...

javascriptreactjsweb

WP Ajax failing to work in the else statement

I am currently developing a WordPress plugin that includes a special feature. This feature involves a checkbox that, when checked by a user, saves a specific value in the database using ajax. Conversely, when the checkbox is unchecked, the value should be ...

phpjqueryajaxwordpress

Values in the list of onClick events are currently not defined

I'm having trouble importing a list component into my form and capturing the onClick event to submit the information. However, every time I click on the list, the data shows up as undefined. What could I be doing incorrectly? Here is the code for my ...

javascriptreactjsmaterial-ui

How can I prevent my Vue.js application from losing focus when navigating to different components?

I am encountering an issue with my Vue.js app where the focus is lost when changing routes. Initially, when the site loads, the first element of the header component is correctly in focus as desired. However, when navigating to a different link on the site ...

javascriptvue.jsvuejs2vue-componentvue-router

Using an outdated version of Node.js to set up a React App

Attempting to utilize Create React App but encountering an issue that demands Node 10 or above. Presently, my node version is Node 8.10.0 and unfortunately, I am unable to update the Node version as it's a work device. Is there a method to operate an ...

javascriptnode.jsreactjsnpmcreate-react-app

Unusual jQuery error notification

Short Receiving Error in syntax, unrecognized expression: [object Object] @ jquery.js:4267 This code snippet is from jQ: Sizzle.error = function( msg ) { throw new Error( "Error in syntax, unrecognized expression: " + msg ); // Line 4267 }; Detaile ...

javascriptjqueryarraysjsonconsole

Combining Django and chartjs to create stacked multiple charts

Hey there! I'm working on a Django application and using Chart.js to create bar charts. I encountered an issue where, after generating a new chart with a button click, the old one still lingers behind when hovering over the new chart. I have a suspici ...

javascripthtmldjango-templateschart.js

What is the method for sending a down arrow key in Capybara?

My unique requirement involves a specialized listbox automation that would benefit from simulating a down arrow keystroke and then pressing enter. The code snippet for pressing enter looks like this: listbox_example = find(input, "listbox-example") listb ...

htmlrubyseleniumcucumbercapybara

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

csstypescriptangularcomponentsrelative-path

Create a new div element in your HTML structure that is not currently defined in your Sass/CSS

Currently, I am developing a React Component that includes a DatePicker feature using PrimeReact's Calendar component. I have a specific requirement to display an arrow on top of the datepicker when it pops up. You can view the desired layout in the ...

cssreactjssassprimereact

Combining Rails with AngularJS seamlessly

I've spent the last few hours trying to integrate Rails with Angular, following a tutorial that I found. At this point, I'm ready to throw in the towel. The tutorial can be found here. But, I simplified things even more: In my application.js fi ...

ruby-on-railsrubyangularjsruby-on-rails-4

Is it possible to use Vuelidate for password validation in Vue.js?

I found a helpful reference on How to validate password with Vuelidate? validations: { user: { password: { required, containsUppercase: function(value) { return /[A-Z]/.test(value) }, containsLowercase: fu ...

javascriptvue.js

Performing an AJAX Post request with Jquery in a Ruby on Rails web

Using a straightforward controller setup: def new @product = Product.new respond_to do |format| format.html #new.html.erb format.json { render json: @product} end end def create @product = Product.new(params[:product]) ...

ruby-on-railsajaxruby-on-rails-3jquerypost

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

cssreactjstypescriptnext.jstailwind-css

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

javascriptjqueryhtml

Having trouble with nodeJS when running the command "npm install"?

Can anyone help me understand why I'm encountering issues when running "npm install"? Whenever I run npm install, I am bombarded with numerous errors. npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\\Program Files\\nodejs&bsol ...

javascriptnode.jsproxy