Bootstrap css not working after ajax update
I am using Bootstrap to turn on / off a toggle switch. On this page, it refreshes the ajax every 5 seconds to reload the page content. The problem I'm running into is when the page is refreshed via ajax, the bootstrap-switch loses its CSS styling.
I am using firefox validation and this is what I saw:
before ajax update:
<div id="override">
.....
<div class="margin-bottom-10"> <label for="option1"></label> <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-small bootstrap-switch-animate bootstrap-switch-id-1234>
<div class="botstrap-switch-container">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary">On</span>
<label class="bootstrap-switch-label" for="1234"></label>
<span class="bootstrap-switch-handle-off bootstrap-switch-default">Off</span>
<input id="1234" name="radio1" class="make-switch" data-size="small" checked="" type="checkbox">
</div>
</div>
</div>
......
</div>
After ajax update:
<div id="override">
.....
<div class="margin-bottom-10">
<label for="option1"></label>
<input id="1234" name="radio1" class="make-switch" data-size="small" checked="" type="checkbox">
</div>
..........
</div>
Ajax code:
$.get(url, function(data) {
$("#override").html(data);
}
How do I reload those necessary bootstrap css and maybe even js ??
+3
source to share