Geek Answers Handbook

Bootstrap toggle not working after ajax load

I am using ajax download to get some content on my page. I work with bootstrap 3 and bootstrap toggle. when loading the contents, the contents of bootstrap 3 works fine (you can clearly see the panel panel - the primary one). But bootstrap boot content does not load (you can just see some checkboxes). Does annyone know how to make this work? Or should I look at some other toggle switches? Ifso what?

EDIT: I have not tested event binding yet because I cannot get bootstrap to switch css to work with loaded ajax code. Event binding has nothing to do with css?

  • Scripts used by main html code (with ajax download)
  • Basic html code
  • code is loaded into a div using the main html code

<!-- jQuery --> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Bootstrap Toggle JavaScript --> <script src="../bower_components/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="../bower_components/metisMenu/dist/metisMenu.js"></script> <!-- Custom Theme JavaScript --> <script src="../dist/js/sb-admin-2.js"></script> <!-- Custom Domotica JavaScript --> <script> $(document).ready(function(){ // Set trigger and container variables var trigger = $('#side-menu li ul li a'), container = $('#page-wrapper'); // Fire on click trigger.on('click', function(){ // Set $this for re-use. Set target from data attribute var $this = $(this), target = $this.data('target'); alert("target: " + target) // Load target page into container container.load(target + '.html', function (response, status, xhr) {}); // Stop normal link behavior return false; }); }); </script> 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Home automation web page"> <meta name="author" content=""> <title>Home</title> <!-- Bootstrap Core CSS --> <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap toggle --> <link href="../bower_components/bootstrap-toggle-master/css/bootstrap-toggle.min.css" rel="stylesheet"> <!-- MetisMenu CSS --> <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="../dist/css/sb-admin-2.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <!-- Navigation --> <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Home</a> </div> <!-- /.navbar-header --> <ul class="nav navbar-top-links navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-alerts"> <li> <a href="#"> <div> <i class="fa fa-comment fa-fw"></i> Failure <span class="pull-right text-muted small">No respons from Controller 1</span> </div> </a> </li> </ul> <!-- /.dropdown-alerts --> </li> <!-- /.dropdown --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-gear fa-fw"></i> </a> <!-- /.dropdown-user --> </li> <!-- /.dropdown --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-sign-out fa-fw"></i> </a> </li> <!-- /.dropdown --> </ul> <!-- /.navbar-top-links --> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li> <a href="index"><i class="glyphicon glyphicon-home"></i> House<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="#">Weather</a> </li> <li> <a href="#">Energy</a> </li> <li> <a href="#">Water</a> </li> </ul> </li> <li> <a href="#"><i class="glyphicon glyphicon-star"></i> 1st floor<span class="fa arrow"></span></a> <ul class="nav nav-second-level" id="side-menu2"> <li> <a href="#" data-target="index">Hallway</a> </li> <li> <a href="#">Main bedroom</a> </li> </ul> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="glyphicon glyphicon-star"></i> main floor<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="#">Kitchen</a> </li> <li> <a href="#">Living room</a> </li> <li> <a href="#">Garage</a> </li> </ul> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="glyphicon glyphicon-star"></i> Basement</a> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="glyphicon glyphicon-tree-deciduous"></i> Garden</a> <!-- /.nav-second-level --> </li> </ul> </div> <!-- /.sidebar-collapse --> </div> <!-- /.navbar-static-side --> </nav> <div id="page-wrapper"> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> </body> </html> 
  <div class="panel panel-primary" id="switchespanel"> <div class="panel-heading"> <h3 class="panel-title">Switches</h3> </div> <div class="panel-body"> <table class="table"> <tr> <th>Location</th> <th>State</th> </tr> <tr> <td>Testswitch0</td> <td> <label> <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini"> </label> </td> </tr> </table> </div> </div>
+6
source share
1 answer

Make sure you download the js file of the bootstrap-toggle file and the css file correctly. In particular, check that they are in the place where your links are listed, or even use the cdn versions listed below:

 <link href="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>

Your paths must be incorrect or you forgot to include the js file as a whole, and you should see a warning about this in your console, because otherwise the code works fine.

Regarding dynamically loaded content.

The first elements work because after html first loads, bootstrap-toggle.min.js looks for any elements that have the data-toggle="toggle" attribute and calls .bootstrapToggle() on them using the plugin. This only happens when the page loads.

If you add more switches later, you need to initialize them yourself through .bootstrapToggle() . Iv'e updated the example below to simulate adding speakers dynamically and explain the approach I would take for this. See comments in the code for more details.

  // timeout to simulate ajax setTimeout(function(){ // add an element dynamically, $('.table').append('<tr><td>Testswitch0</td><td><label><input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S2" data-size="mini"></label></td></tr>'); // now that we have dynamically loaded elements // we need to initialize any toggles that were added // you shouldn't re-initialize any toggles already present // but we also do want to have to figure out how to find the ones we added // instead, we'll destroy all toggles and recreate all new ones $("[data-toggle='toggle']").bootstrapToggle('destroy') $("[data-toggle='toggle']").bootstrapToggle(); }, 2000) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> <div class="panel panel-primary" id="switchespanel"> <div class="panel-heading"> <h3 class="panel-title">Switches</h3> </div> <div class="panel-body"> <table class="table"> <tr> <th>Location</th> <th>State</th> </tr> <tr> <td>Testswitch0</td> <td><label> <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini"> </label></td> </tr> <tr> <td>Testswitch0</td> <td><label> <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S1" data-size="mini"> </label></td> </tr> </table> </div> </div>
+5
source

More articles:


All Articles