JQuery/JavaScript addClass doesn't work

Question

I have a div which contains elements. When I click on one element an action will occur. During the action time I want to make my div colors change to black & white and after the action it will reset the color.

So I create a simple css3 class :

gray {
    background-color:red;
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

And in my script I have two functions :

function enableWaitState( ) {
   $($("#chart")).addClass( "gray"); 
}

function disableWaitState( ) {
    $($("#chart")).removeClass( "gray");
}

in my javascript code I write the method which is called when clicking on a button:

function back() {
    enableWaitState( ); 
    // here doing some javascript code
    disableWaitState(  );
}

}

Unfortunately it doesn't work. But If I make an ajax call between enableWaitState() and disableWaitState(), it works!

Any ideas?

The code you provided is not enough to reproduce your problem here. Please create a minimal reproducible example inside the question, (using the <> button), linking required external resources and making sure you problem can be experienced. — tao
– tao, Commented Aug 20, 2017 at 8:40
Just a guess: is '// here doing some javascript code' a synchronous computation? In that case you won't see a change of classes since after the (single threaded) execution of the function has returned the state of the class didn't change. In that case you need to change the computation into an asynchronous execution. — obecker
– obecker, Commented Aug 20, 2017 at 8:42

Beri · Accepted Answer · 2017-08-20 09:19:51Z

1

You need to remve additional $() from your selector.

function enableWaitState( ) {
   $("#chart").addClass( "gray"); 
}

function disableWaitState( ) {
    $("#chart").removeClass( "gray");
}

Also this code will work only after chart element is loaded in the DOM. You can use console to check that:

 console.log($("#chart").length)

answered Aug 20, 2017 at 9:19

Beri

11.6k4 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Fritsch · Accepted Answer · 2017-08-20 09:31:34Z

0

Try this

 function enableWaitState() {
   $("#chart").addClass("gray"); 
 }

function disableWaitState() {
    $("#chart").removeClass("gray");
 }

edited Aug 20, 2017 at 9:31

Thomas Fritsch

10.3k33 gold badges42 silver badges49 bronze badges

answered Aug 20, 2017 at 9:06

gbu

565 bronze badges

Comments

Chaitanya Ghule · Accepted Answer · 2017-08-20 09:31:50Z

0

As per your requirement of enabling and disabling background-color of div, i think that you want a blink effect when user clicks on elements within div.

Just check the code snippet below.

function blinkEffect() {
  let elem = '#chart';
  $(elem).addClass('gray');

  setTimeout(function() {
    $(elem).removeClass('gray');
  }, 200);
}

$('#btn1, #btn2, p').on('click', function() {
  blinkEffect();
});

div {
  width: 600;
}

.gray {
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart'>
  Some elements in this div to change background color on click and reset it after 200ms<br><br>
  <button id='btn1'>Btn 1</button><br><br>
  <button id='btn2'>Btn 2</button>
  <p>Welcome..<br>I am a paragraph...!!! <br>Click me to see the change</p>
</div>

Hope, it works for you.

answered Aug 20, 2017 at 9:31

Chaitanya Ghule

4511 gold badge5 silver badges11 bronze badges

2 Comments

ATN54 Over a year ago

So, It's me again for more details. I'm using DevExtreme and the code is executed when a click an o bar in a chart. Now I'm sure that it works if a synchronized ajax call is done.

ATN54 Over a year ago

But doens't work if I run javascript only like : var clickedPoint = e.target; var length = responseData[depth].values.length; var index = -1; var name = ""; for(i = 0; i< length; i++) { if ( responseData[depth].values[i].name == clickedPoint._dataItem.argument ) { name = responseData[depth].values[i].name; index = i; break; } }

ATN54 · Accepted Answer · 2017-08-20 12:24:53Z

0

OK, I found the solution

My probleam was :

function back() {
    enableWaitState( ); 
    // here doing some javascript code
    disableWaitState(  );
}

The UI was never updated.

The solution is :

        enableWaitState( depth); 
        setTimeout( function() {        
          // here doing some javascript code...
        disableWaitState( depth );
       }, 50 );

Explanation : The function enableWaitState() add a class in the DOM and BECAUSE the javascript code now wait 50 milliseconds before running the UI has the time to refresh itself.

answered Aug 20, 2017 at 12:24

ATN54

1372 gold badges2 silver badges6 bronze badges

1 Comment

Beri Over a year ago

Pleae close the question then, so that it will dissapear from open queue.

Collectives™ on Stack Overflow

JQuery/JavaScript addClass doesn't work

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related