remove and add class with javascript on page load issue

Question

When i add or remove a class with javascript then reload the page ..

it wont work

I tried this code, and put it in on the header

<script>
    $(document).ready(function() {
  $('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>

and this is my HTML I want to remove the class boxAdRight and change it with .active class

<div class="panel-body">
   <div class="tab-content">
      <div class="tab-pane fade in active" id="data">
         <div class="getData">
            <div class="row">
               <div class="col-md-12 col-sm-12 col-xs-12">
                  <div class="servers">
                     <ul>
                        <li class="active" 
                           id="s_0"onclick="getServer(this.id,0);"> 
                           <i class="fa fa-video-camera"></i> server1
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="col-md-3 col-sm-4 col-xs-12 fRight">
                  <div class="episodes boxAdRight">
                     <h2>episodes</h2>
                     <ul>
                        <li>
                           <a href="http://localhost/wordpress/newarticle13/">                                  episode 1</a>
                        </li>
                        <li class="active"><a href="http://localhost/wordpress/newarticle13/"> episode 2</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="col-md-9 col-sm-8 col-xs-12 fRight">
                  <div class="boxVideos">
                     <div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

thank you

what do you mean by "it won't work?" have you checked your browser console on error messages? — errand, Sep 17 '18 at 13:34
thank you for your reply, yes i checked my browser, no errors ! — bilalchina, Sep 17 '18 at 13:40
you change the class with javascript and that's ok. Then you say you reload the page. Are you saying that you expect the change to be persistent on page reload? — Lelio Faieta, Sep 17 '18 at 13:53
@LelioFaieta That reloading page part caught my eye too, however the code should execute the same way every time the page is loaded, so I'm still confused as to what the OP's issue is. Unclear. — j08691, Sep 17 '18 at 14:03
I'm working on wordpress, I can see the code of javascript on source code of the page, but nothing change — bilalchina, Sep 17 '18 at 14:17
Wait, are you adding JavaScript to a post, or is your JavaScript in a template, plugin, or functions.php? WordPress will strip out any JavaScript you enter in a post or page. — j08691, Sep 17 '18 at 14:19
I'm working on page, and I add the code to the section on the file Header.php — bilalchina, Sep 17 '18 at 14:28

score 4 · Answer 1 · answered Sep 17 '18 at 13:41

As a first observation I would like to mention the fact that JQuery's removeClass function returns one or more space separated class names that should be removed. As a consequence, you should not apply addClass over the result of removeClass.

There might be other issues also in your code though...

score 1 · Accepted Answer · answered Sep 17 '18 at 14:08

1

Replace your .boxAdRight class with .episodes class and it'll work as you want.

  <script>
        $(document).ready(function() {
            $(".episodes").removeClass("boxAdRight").addClass("active");
       });
    </script>

answered Sep 17 '18 at 14:08

Nitin Vaghani

297
4
14

Works fine with it – j08691 Sep 17 '18 at 14:10
Have you removed "episodes" class from "
" this line? OR Check in private browser or CTRL+F5. may be it's cache issue.
– Nitin Vaghani Sep 17 '18 at 14:19

score 0 · Answer 3 · answered Sep 17 '18 at 13:43

0

I believe that the order of the method calls should be

$('.boxAdRight').addClass('active').removeClass('boxAdRight');

In the original example $('.boxAdRight').removeClass('boxAdRight').addClass('active'); the selector .boxAdRight is being used, but then that class is being removed with .removeClass('boxAdRight'), so .addClass('active') is being called on a selector with no matching elements.

answered Sep 17 '18 at 13:43

Michael Hurley

369
2
5
15

2

No, this is not correct. It will work fine. Testing a simple example demonstrates this. http://jsfiddle.net/j08691/2aqt7uow/ – j08691 Sep 17 '18 at 13:49

score 0 · Answer 4 · answered Sep 17 '18 at 13:48

0

get it like that will solve it

$('.episodes').addClass('active').removeClass('boxAdRight');

in normal case yours too must work ?

answered Sep 17 '18 at 13:48

Muhammed Sami

110
9

I tried on http://jsfiddle.net/j08691/2aqt7uow/ and its working well ! if you wanna have active class. open the console with f 12 and you will see active is added to your div – Muhammed Sami Sep 17 '18 at 14:28
yes i see, it works for you, but in my case, I'm working on wordpress, and I added the code in section of header.php – bilalchina Sep 17 '18 at 14:31

score -1 · Answer 5 · answered Sep 17 '18 at 13:55

-1

You can also simplify this code by replacing of class instead of removing it.

$('.boxAdRight').className = 'active';

how to replace class HTML name with javascript

answered Sep 17 '18 at 13:55

Nadiia

1
1

thank you, I tried that code too, but tha class still – bilalchina Sep 17 '18 at 14:19

remove and add class with javascript on page load issue

5 Answers5