Sequence of background colors not altering as intended

After clicking a button, I included the following jQuery code in a code snippet on my WordPress site:

jQuery("#cf_course_planner tr").css("background-color", "#f66");
jQuery("#cf_course_planner tr:eq(0)").css("background-color", "#fff");
if (confirm("Confirm deletions of all entries\nEither OK or Cancel.") ==  true){
  alert("You pressed OK!");
  } else {
  return false;
  }

However, the background color does not change until after pressing the OK button on the alert. How can I get the background-color to change before the confirm request?

I attempted using a console.log command just to trigger an action, but it did not work as expected.

javascriptjquerycsswordpress

Answer №1

The reason for this issue lies in the synchronous nature of JavaScript code execution. When the confirm() function is used, it stops any further JavaScript execution until the user interacts with the dialog by clicking OK or Cancel. This can create a delay in applying your background color change.

To resolve this, you can implement a timeout to achieve the desired functionality.

Updated code:

jQuery("#cf_course_planner tr").css("background-color", "#f66");
jQuery("#cf_course_planner tr:eq(0)").css("background-color", "#fff");

setTimeout(function() {
  // Display confirmation dialog
  if (confirm("Confirm deletions of all entries\nEither OK or Cancel.")) {
    alert("You pressed OK!");

  } else {
    return false
  }
}, 100); // Delay time specified in milliseconds

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

The resolvers contain the Query.Mutation but it is not specified in the schema

const { ApolloServer, gql } = require('apollo-server-express'); const express = require('express'); const port = process.env.PORT || 4000; const notes = [ { id: '1', content: 'This is a note', author: 'Adam ...

javascriptexpressgraphql

Tips for enabling autofocus in mat-select列表。

I am working on an angular project where I am using Angular Material and a mat-select element. In my form, the mat-select is the first element, and I want to set auto-focus on it when the page loads. However, I have been facing some difficulties achieving ...

javascriptangulartypescriptangular-material

Is there a way to retrieve the id of a jQuery autocomplete input while inside the onItemSelect callback function?

I am currently utilizing the jquery autocomplete plugin created by pengoworks. You can find more information about it here: Within the function that is triggered when an entry is selected, I need to determine the identifier of the input element. This is i ...

javascriptjqueryautocomplete

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

Enhancing the functionality of the jquery-ui-carousel by integrating the jQuery Touchwipe Plugin

I've been working on extending a jQuery UI Widget. If you're interested, the widget can be found at this link: https://github.com/richardscarrott/jquery-ui-carousel. My current challenge is with version 0.8.5 where the Touch extension isn' ...

jqueryjquery-ui

Only a select few expandable elements in the jQuery accordion

How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu: Home, Support, Sales, Other The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a spec ...

javascriptjqueryhtmlcssaccordion

What is the method for altering a CSS element's keyframe animation while it is currently running?

My little mouse speed detector, although not perfect, provides me with the current mouse speed every 100ms in the variable window.mouseSpeed.t. I decided to implement this feature because I wanted to create a whimsical animation at the bottom edge of the s ...

javascriptanimationcss-transitionsaccelerometermousemove

Enhance the language with react-intl and MobX State Tree integration

Currently, I am integrating react-intl with Mobx state tree for the first time. Within my project, there are two buttons located in the header section - one for 'it' and the other for 'en'. Upon clicking these buttons, the selected lan ...

javascriptreactjsmobxreact-intlmobx-state-tree

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

htmlcss

Are certain browsers unable to play dynamically generated HTML5 audio files?

While working on my project, I encountered an issue with creating and controlling an audio element in JavaScript. The element works perfectly fine in Firefox, Chrome, and Opera; however, it fails to function properly in IE and Safari. In these browsers, ...

javascripthtmlaudio

Attempting to invoke a static function from a imported ES6 module

Currently, I am utilizing Firefox 56 with the setting dom.moduleScripts.enabled enabled. This configuration allows me to engage with native ES6 modules seamlessly. In my Vue2 component, there is a method that I have defined: import StorageZonesAjaxMethod ...

javascriptmoduleecmascript-6vue.js

How can I pass a value as an attribute from an Angular template to a directive?

Here's a directive I'm working with: <g-map-locations center={{myLocation}} zoom="4" id="map" class="map"></g-map-locations> The zoom parameter is used in Angular to set the zoom level for a Google Map: attrs.zoom = zoom setMapOpti ...

javascriptangularjsgoogle-maps

Problem with datepicker interface not aligning properly with Bootstrap grid

I am encountering a challenge with aligning the input controls in my UI design. Specifically, I am trying to create rectangular borders/containers around each set of input controls and looking for a way to achieve this using Booststrap. For reference, y ...

htmlcssbootstrap-4

How to eliminate quotation marks from an array in JavaScript?

const original_data = ["alpha,beta,gamma","1,2,3","apple,banana,cake"]; updated_data = ["alpha,beta,gamma,1,2,3,apple,banana,cake"] The function is returning the original_data, but I require the updated_data. ...

javascriptjsonnode.jsmongodb

What steps can I take to set a strict boundary for displaying the address closer to the current location?

While the autocomplete feature works perfectly for me, I encountered an issue where it suggests directions away from my current location when I start typing. I came across another code snippet that uses plain JavaScript to solve this problem by setting bou ...

javascripthtmlangulartypescriptgoogle-maps-api-3

Is it redundant to use flatMap in RXJS?

I recently came across an enlightening article on RXJS which delves into the concept of flatMap. After understanding its purpose - to flatten observable of observables into a single observable sequence (similar to SelectMany in C#) - I noticed an interes ...

javascriptrxjsflatmap

Using ajax to submit variables may not function properly

I have a set of data that has been processed using JavaScript and I am looking to save it to a database. I have been attempting to code something with AJAX, but so far, I have had no success... What I require: Two variables (id, name) need to be sent to a ...

javascriptphpajaxvariables

jQuery drag and drop for more than one object

I am in the process of building a web-based file browser using jQuery and PHP. One of the tasks I need to accomplish is the ability to select multiple files/folders and drag them into another folder. My research so far indicates that jQuery UI's drag ...

javascriptjquerydrag-and-drop

Is it better to specify one root element or render the entire layout in ReactDOM.render()?

Currently in the process of learning React.js and I have a question. Is it more beneficial to keep my ReactDOM.render() as it is currently set up: ReactDOM.render( <div className="container"> <div className="row"> <div className ...

javascriptreactjs

Checking the length of user input with JavaScript

To ensure that the user enters at least 4 letters in a text box and show an error if they don't, I need help with the following code. It is partially working but currently allows submission even after showing the error message. I want to prevent subm ...

javascripthtml