vrijdag 17 juni 2011

JQuery UI Buttons lose styling after postback

A couple of days ago I had this annoying problem: I had a page with some standard ASP.NET buttons in an update panel which I styled using JQuery UI.

$(".btnInsert").button();


Everything worked well until I caused a postback in the update panel. It seemed that my JQuery would not execute anymore.



I just want to share a simple solution to overcome this:



<script type="text/javascript">
    $(document).ready(function () {
       
        // Launch JQuery at first page load
        ApplyJQuery();
        // Register event so code executes at the end of each request
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        // Event code
        function EndRequestHandler(sender, args) {
            ApplyJQuery();
        }
        function ApplyJQuery() {
            $(".btnInsert").button();
        }
    });
</script>