Question

86

Javascript not work after firing Updatepanel in asp.net

rated 0 times [ 93] [ 7] / answers: 1 / hits: 19912 / 10 Years ago, fri, june 13, 2014, 12:00:00

My website's template is based on bootstrap and in the nav menu, I used the below code for some effects!

$('.productbar .dropdown').on('show.bs.dropdown', function (e) {

        $(this).find('.dropdown-menu').first().stop(true, true).fadeIn(300);

        $(this).find('.dropdown-menu').first().stop(true, true).animate({ top: "45px" }, 300);

    });



    $('.productbar .dropdown').on('hide.bs.dropdown', function (e) {

        $(this).find('.dropdown-menu').first().stop(true, true).fadeOut(300);

        $(this).find('.dropdown-menu').first().stop(true, true).animate({ top: "55px" }, 300);

        $(this).find('.sub-menu').hide();

        $(this).find('.left-caret').addClass("right-caret").removeClass("left-caret");

    });

After firing the action button, updatepanel will fire and after this, the menu effect doesn't work!

What is the solution?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruz

Add To Favorites

Follow

Total Points: 415

Total Questions: 98

Total Answers: 109

Location: France

Member since Thu, May 6, 2021

3 Years ago

answered 10 Years ago clifford · Accepted Answer

This occurs due to the Partial Postback using UpdatePanel. The Events that you subscribe for the controls are rendered partially hence the events looses. To overcome this situation you need to rebind the control events.

This is a common problem caused by mixing the conventional ASP.Net Ajax and jQuery events. When you do the partial postback, the DOM is recreated and the jQuery events are lost.

Example:

<script type="text/javscript">

    // bind the events (jQuery way)

        $(document).ready(function() {

            bindEvents();   

        });

    

        // attach the event binding function to every partial update

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(evt, args) {

            bindEvents();

        });

<script/>

Read More about PageRequest Manager on MSDN

Here bindEvents() method contains all the script that you need to reload again after Partial Page Postback.

Hope this helps you!