Search code examples
javascriptc#asp.netvb.netupdatepanel

CSS and JS of Bootstrap Toggle are not working after UpdatePanel was triggered in Asp.Net


Do you have any ideas on how the JS and CSS of Bootstrap toggle (www.bootstraptoggle.com) will work after an UpdatePanel trigger in ASP.net?

I tried Sys.WebForms.PageRequestManager.getInstance() and pageLoad but it did not load. Please see the images:

**Initial Load: https://i.sstatic.net/WG6At.png

**After UpdatePanel trigger: https://i.sstatic.net/Ib1G1.png


Solution

  • Try this - the secret is to create a function that you want to run each time a page is loaded - and use add_pageLoaded to make sure it's called after an async postback too.

    <script type="text/javascript">
        $(document).ready(function(){        
            docReadyHandler();
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
               docReadyHandler
            );
        });
        
        function docReadyHandler(){
            // code you want to run when the document is ready
        }
    </script>
    

    You can also set it in codebehind

    ScriptManager.RegisterStartupScript(Me.UpdatePanel, GetType(string), "startupScript", "docReadyHandler();", true)