detecting class changes in Bootstrap Switch Jquery (converting working checkbox JS to button js)

Question

I am trying to convert a piece of JQuery that changes the class of a tr when checked to a piece of JQuery that changes the class of a tr when a button gets a class called "active". I am a JQuery/Javascript newbie and I am at a loss.

For those who have suggested it's a duplicate, I have tried to detect class and failed (updated code below).

ORIGINAL CODE (THAT WORKS)

javascript:
  var $input_class = $('.addCheckbox');
  function setClass() {
    var tr = $(this).closest( "tr" );
    if ($(this).prop('checked') == true){
      tr.addClass( "highlight" );
    }
    else{
      tr.removeClass( "highlight" );
    }
  }
  for(var i=0; i<$input_class.length; i++) {
    $input_class[i].onclick = setClass;
  }

MY HORRIBLE TRY (UPDATED BELOW...NO LONGER THIS)

javascript:
  var $input_class = $('.btn-group .btn-toggle .btn');
  function setClass() {
    var tr = $(this).closest( "tr" );
    if ($(this).prop('.btn-success .active')){
      tr.addClass( "highlight" );
    }
    else{
      tr.removeClass( "highlight" );
    }
  }
  for(var i=0; i<$input_class.length; i++) {
    $input_class[i].onclick = setClass;
  }

I am using the Bootstrap Switch Plugin which converts checkboxes to toggles http://www.bootstrap-switch.org/

The converted html looks like this:

<tr>  
  <td width="15px"><input class="addCheckbox" type="checkbox" value="true" style="display: none;">
    <div class="btn-group btn-toggle" style="white-space: nowrap;">
      <button class="btn active btn-success btn-md" style="float: none; display: inline-block; margin-right: 0px;">YES</button>
      <button class="btn btn-default  btn-md" style="float: none; display: inline-block; margin-left: 0px;">&nbsp;&nbsp;&nbsp;</button>
    </div>
  </td>
  <td width="85px">May 2016</td><td class="restaurant-name">
      Joe's Crab Shack
  </td>
  <td class="text-center">
    #my table info
  </td>
</tr>

UPDATE!!! As per 'duplicate' suggestions.

After looking through this question (which was very helpful), I have changed my code to this, and I still can't get it to work. I am wondering if it is having trouble finding the exact input class? Because the plugin converts the checkbox to html, I can't (or don't know how) set specific names or ids for the buttons.

 javascript:
      var $input_class = $('.btn');
      var tr = $(this).closest( "tr" );
      function checkForChanges()
      {
        if ($('.btn').hasClass('btn-success')) 
          tr.addClass( "highlight" );

        else 
          tr.removeClass( "highlight" );
      }
      for(var i=0; i<$input_class.length; i++) {
        $input_class[i].onclick = checkForChanges;
      }

Possible duplicate of [JQuery Detect class changes](http://stackoverflow.com/questions/9599818/jquery-detect-class-changes) — omarjmh, Mar 31 '16 at 18:54

score 1 · Answer 1 · 2016-03-31T20:26:30.637

1

There are issues in your code resulting from not being familiar with the language. Also keep in mind this jQuery what you posted, not javascript.

As I am not quite sure what is your final objective here so let's go step by step.

First of all:

$('.btn-group .btn-toggle .btn');

The above means an element with all three classes class="btn-group btn-toggle btn" and I do not see such in your code. Are you sure you didn't want to use $('.btn-group, .btn-toggle, .btn'); ? At the moment var $input_class is empty, so later in your code you loop through nothing.

Second thing: as I posted in the comments make sure you run your script after loading jQuery and rest of the content of the page. If your script is above jQuery, like this:

<head>
<script type="text/javascript">/* Your script here */</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>

Above won't work for two reasons:

You run your script before you load the jQuery, so commands like $(".class") aren't understood.
You run your script before loading the content, so for example var $input_class = $('.addCheckbox'); will be empty, because the element with class addCheckbox doesn't exist yet. [for this one assume jQuery is included before the script, but the script is still inside the <head>].

edited Mar 31 '16 at 20:26

answered Mar 31 '16 at 19:12

I have now changed it to just .btn ... but it still doesn't work. – NothingToSeeHere Mar 31 '16 at 19:23
1

Well, it will push you a little bit forward but not necessarily fix your issue so feel free to update how you are doing with it. Don't forget the most powerful tool for js is the console and built in console.log(). Unfortunately I am still not sure what is the objective here. You want to remove class from one element and add it to another on button click? – Mar 31 '16 at 19:24
No, when the toggle/checkbox is "checked", which is when the button (which is converted from a checkbox to a toggle by bootstrap-switch), it then sets the class of the tr that the toggle/checkbox is in to tr class="highlight". I can get that to work WITHOUT using bootstrap-switch.js, but I can't figure out how to do it with the toggle conversion. – NothingToSeeHere Mar 31 '16 at 19:27
1

Ok, so, how is it going? Next thing would be to make sure your script is not being executed before loading jQuery or rest of the code. Keep your jQuery defined in head, but move the script you want to run at the bottom of everything, inside body. Eventually modify your script and wait with running it till the entire page loads. Where you define `var $input_class...` add a line below `console.log($input_class);` and check the console to see if the output is correct. If it's empty or gives you error jQuery didn't load or you fire your script before the page loads and elements don't exist yet. – Mar 31 '16 at 20:17

detecting class changes in Bootstrap Switch Jquery (converting working checkbox JS to button js)

1 Answers1