Javascripts not working after postback [closed]

Question

I'm working with bootstrap components on a asp.net web application. It's works fine, but curiously, they stop working after a page postback. The appearance is fine, but the behavior isn't. That's why i supose that the problem envolves the javascript files.

For example, a dorp down button: after postback, the expand action doesn't work.

Do you have an idea what could be the cause of this?

Answer 1

If you are using an UpdatePanel to do a partial page refresh, then when the contents of the panel are updated via AJAX, the usual $(document).ready(...) / $(...) stuff does not fire again, which means that the custom JS functionality (like the dropdowns) that is part of Bootstrap does not get re-bound to the new elements.

What I usually do is extract my code that sets up the javascript event handlers and behaviour into their own function (e.g. function BindEvents() { ... }), and then I use the following code inside the update panel to ensure it gets re-run after the partial postback (as well as on the initial page load):

<script type="text/javascript">
    Sys.Application.add_load(BindEvents);
</script>

EDIT: Here is a suggested basic BindEvents() function that should re-initialise the dropdowns for you:

function BindEvents() {
    $('[data-toggle=dropdown]').dropdown();
    // other bootstrap binding code - see the combined Bootstrap.js for ideas
}

Answer 2

If you use this line of code, anything in the endRequestHandler should fire everytime an update panel updates.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

        function endRequestHandler(){

             // initialize controls here...

        }