Javascript not work after firing Updatepanel in asp.net

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:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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!

Method 2

I faced the same problem. I got help from this link. Execute JavaScript when an UpdatePanel is updated

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(
                        upPanel,
                        this.GetType(),
                        "MyAction",
                        "doMyAction();",
                        true);
}

1. The first parameter is the UpdatePanel
2. The second parameter is a type parameter
3. The third parameter, “MyAction”, is a key to identify the script.
4. script itself.
5. The final parameter is a flag to indicate whether the ScriptManager should wrap your code in script tags.

Method 3

If the above does not work, this should reload the events on any postback (partial or full).

Wrap your entire jquery DOM ready event function in the following:

function pageLoad() {

    $(document).ready(function () {
        
        //jquery code and events, event binding.. etc..

    }); }

This can be helpful if you have many asp:update panels..

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0