CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Rajeev Singh
Rajeev Singh

Reputation: 15

Bootstrap toggle not working after on click event

I'm trying to render bootstrap toggle switch through jquery but it's simply not working after the first time, I'm unable to figure out what to do.

$(document).ready(function(){
    
    $('#showHideButton').change(function(){
      var action = $(this).prop('checked');
      
      $('.container').html('<input id="showHideButton" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">');
      $('.container input').bootstrapToggle();
      
      console.log(action);
     //if(action)
     //   console.log('Inside if');
     //else
     //   console.log('Inside else');
    });
    
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
   
<br />&nbsp;
<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">   
<br /><br />


<div class="container">
  <input id="showHideButton" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
</div>

and if I'm using same code without jquery, it is working fine

<input type="checkbox" checked data-toggle="toggle">

check the link https://www.bootstraptoggle.com/

Upvotes: 1

Views: 7407

Answers (4)

Rajeev Singh
Rajeev Singh

Reputation: 15

Check out this

function callOnClick(e){
    var action = $(e).prop('checked');
    console.log('Inside '+action);

    if(action)
      $('.container').html('<input id="showHideButton" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" onchange="callOnClick(this)">');
    else
      $('.container').html('<input id="showHideButton" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" onchange="callOnClick(this)">');

    $('.container input').bootstrapToggle();
  }
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     
<br />

<div class="container">
  <input id="showHideButton" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" onchange="callOnClick(this)">
</div>

Upvotes: 0

Cristian V
Cristian V

Reputation: 166

Can you try to add this line

$('#showHideButton input').bootstrapToggle();

after your line

$('#showHideButton').html(‘.......');

Upvotes: 0

terrymorse
terrymorse

Reputation: 7096

The code above appears to be making a checkbox, and it is. Here's an example that makes a switch instead of a checkbox:

$(document).ready(function() {
  $('#showHideButton').click(function() {
    $('#showHideButton').html('<div class="custom-control custom-switch">' +
    '<input type="checkbox" class="custom-control-input" id="customSwitch1">' +
    '<label class="custom-control-label" for="customSwitch1">' +
    'Dynamic switch</label>' +
    '</div>');
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<div class="container">
  <p>A dynamic switch:</p>
  <div id="showHideButton">Click Me!</div>
  <hr/>
</div>

Upvotes: 1

AndD
AndD

Reputation: 2701

If you are using Bootstrap and in your page you have Bootstrap css loaded, you should insert the correct css classes to the input, in order for the checkbox to be rendered as Bootstrap switch.

Check the Bootrsap examples related to switches (and, look at the class attribute and at the css classes used in the example):

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

You can find all the examples here: https://getbootstrap.com/docs/4.2/components/forms/#switches

Upvotes: 0

Related Questions