Clever Geek Handbook

"Uncaught TypeError: Unable to read property" apply "from undefined" Using Bootstrap-Switch JQuery

I am using: http://www.bootstrap-switch.org/ and getting the above error. Basically I'm trying to make it so that when the user starts typing into a form field, the toggle switch switches from "off" to "on".

HTML:

 <div class="row">

    <div class="col-sm-2 pull-right toggle">
      <input name="assessment[answer][tracking]" type="hidden" value="0" /><input class="trackable" data-on-text="Yes" data-off-text="No" data-on-color="success" type="checkbox" value="1" name="assessment[answer][tracking]" id="assessment_answer_tracking" />
    </div>

    <div class="col-sm-10 question">
        <textarea class="form-control" name="assessment[answer][content]" id="assessment_answer_content">
        </textarea>
     </div>

  </div>

JS:

<script>

  $("[name='my-checkbox']").bootstrapSwitch();
  $(".trackable").bootstrapSwitch();

  $('.form-control').on("click paste", function(event){
         $("[name='my-checkbox']").bootstrapSwitch('setState', true);
   });

</script>

Any ideas?

EDIT - Callstack:

Uncaught TypeError: Cannot read property 'apply' of undefined
  (anonymous function) @ bootstrap-switch-174a86fa717c568c8ba0a257ad07ce25.js?body=1:682
  jQuery.extend.each @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:385
  jQuery.fn.jQuery.each @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:137
  $.fn.bootstrapSwitch @ bootstrap-switch-174a86fa717c568c8ba0a257ad07ce25.js?body=1:674
  (anonymous function) @ new?utf8=✓&assessment[patient_id]=1&assessment[user_id]=1&assessment[template_id]=2&commit=Create+A…:1114
  jQuery.event.dispatch @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:4666
  elemData.handle @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:4334
+3


source to share


4 answers


I have the same problem. There seems to be a bug with bootstrap. If you only want to switch it from "off" to "on", you can apply it to your code:

$('.form-control').on("click paste", function(event){
     $("[name='my-checkbox']").each( function(){
         if ( ! $(this).bootstrapSwitch('state')) { //check if is not checked
              $(this).bootstrapSwitch('toggleState'); //change the checkbox state
         }
     });
});


The setState method has problems, then if you check the state for each of your checkboxes and then toggle it under any condition, you can have the same result.

To disable it, just remove the negative "!" This solution worked for me.

+4


source


try it



$("[name='my-checkbox']").bootstrapSwitch('state', true);
+1


source


Make sure you include the JQuery and Bootstrap libraries before enabling Bootstrap.

0


source


In my case it was v3, exposed as a library in my HTML, but the API is referencing v2. You might want to check the version you are using and find the correct documentation

0


source






More articles:


All Articles