Bootstrap toggle inside update panel using jQuery in ASP.Net

Last Reply on Apr 25, 2017 04:19 AM By AnandM

Posted on Apr 24, 2017 10:34 PM

Hello guys,

I'm using html checkbox with bootstrap toggle styles applied but it's not working in side update panel.

It is rendering as it is like normal checkbox.

My requirement is not for bootstarp tool tip!

Screenshot For Reference

<%--jQuery Version--%>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
 
<%-- Bootstrap Toggles --%>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
    <style>
        .toggle.ios, .toggle-on.ios, .toggle-off.ios {
            border-radius: 20px;
            width: 110px;
        }
 
            .toggle.ios .toggle-handle {
                border-radius: 20px;
                width: 40px;
            }
    </style>
 
<%--HTML Control Inside Update Panel--%>
<input type="checkbox" id="msgtoggle" runat="server" tabindex="19" checked="checked" data-toggle="toggle" data-on="<i class='fa fa-paper-plane-o'/> Send" data-onstyle="success" data-off="<i class='fa fa-ban'/> Don't send" data-offstyle="danger" />

Help me to get rid of this.

Posted on Apr 25, 2017 04:19 AM

Hi YacharuP,

It is getting displayed normal checkbox after the page is postbacked in updatepanel which means the page gets partially postback and the checkboxe looses all its attributes which you have assigned so you need to use "bootstrapToggle" plugin for applying toggle functionality to the checkbox and maintain the functionality after page postback and you can achieve it like below and for more details on plugin events and options refer below link

Bootstrap Toggle

Refer below sample code and modify the code according to your need.

HTML

<div>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <input type="checkbox" id="msgtoggle" runat="server" tabindex="19" checked="checked" />
                <asp:Button ID="Button1" Text="Submit" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div>
        <style type="text/css">
            .toggle.ios, .toggle-on.ios, .toggle-off.ios
            {
                border-radius: 20px;
                width: 110px;
            }
                
            .toggle.ios .toggle-handle
            {
                border-radius: 20px;
                width: 40px;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
        <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"
            rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <script type="text/javascript">
            function ApplyToggle() {
                $('[id*=msgtoggle]').bootstrapToggle({
                    on: '<i class="fa fa-paper-plane-o"/> Send',
                    off: '<i class="fa fa-ban"/> Dont send',
                    onstyle: 'success',
                    offstyle: 'danger'
                });
            }
            $(function () {
                ApplyToggle()
            });
            function pageLoad(sender, args) {
                ApplyToggle()
            }
        </script>
    </div>
</div>