search

minhur / bootstrap-toggle

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles
http://www.bootstraptoggle.com
MIT License
1.48k stars 440 forks source link

Toggle button disappears when i reload my ViewComponent #211

Closed suryadatta closed 5 years ago

suryadatta commented 5 years ago

I am working in .NET Core and whenever i refresh my ViewComponent the Toggle button gets hidden. This is the generated HTML:

<div class="toggle btn btn-primary btn-xs ios" data-toggle="toggle" style="width: 39.4219px; height: 24px;">
<input type="checkbox" id="check1" class="addInSwitched" checked="checked" data-toggle="toggle" data-size="mini" data-style="ios">
<div class="toggle-group"><label class="btn btn-primary btn-xs toggle-on">On</label><label class="btn btn-default btn-xs active toggle-off">Off</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>

After ViewComponent Refresh: <input type="checkbox" id="check1" class="addInSwitched" checked="checked" data-toggle="toggle" data-size="mini" data-style="ios">

The rest of the generated Html of bootstrap disappears. Please help me find why this is happening.

suryadatta commented 5 years ago

I found the solution over at stackoverflow. https://stackoverflow.com/questions/45879986/adding-bootstrap-component-to-an-html-element-on-runtime-doesnt-render-properly Just had to add the bootstrap jquery on DOM reload. $("[data-toggle='toggle']").bootstrapToggle();