Bootstrap toggle doesn't work after ajax loaded
micif
I am using ajax load to get some content on a page. I am using bootstrap 3 and bootstrap switch. The bootstrap 3 content works fine when loading the content (you can clearly see the panel panel-primary). But the bootloader content doesn't get loaded (you can only see some checkboxes). Does annyone know how to make it work? Or should I be aware of some other toggle switch? If so which one?
EDIT: I haven't tested out the event binding as I can't get the bootstrap toggle CSS to work on Ajax loaded code. Is event binding independent of CSS?
- Script used by main html code (script loaded with ajax)
- main HTML code
- The main HTML code loads the code into a div
<!-- 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>
Wesley Smith
Make sure bootstrap-toggle js files and css files are loaded correctly. Specifically check that they are where the link points to, or even use the CDN version listed below:
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
Your path must be wrong or you forgot to include the js file completely and you should see a warning about this in the console because otherwise the code works fine.
About dynamically loaded content.
The first element works because after the first load of the html, bootstrap-toggle.min.jsall elements with that attribute are looked up and data-toggle="toggle"then called .bootstrapToggle()to apply the plugin. This only happens when the page loads.
If you add more toggles later, you will need to initialize it by yourself .bootstrapToggle(). I've updated the example below to simulate adding toggles dynamically and illustrate the approach I would take. See the 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.github.io/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.github.io/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>