Javascript does not work after activating Updatepanel in asp.net

Question

This is my website → www.superim.ir Its template base is bootstrap, and in the navigation menu I used the code below 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 starting the add to cart button, the update panel will be updated, after which the menu effect will not work!

What's the solution?

Answer 1

This is due Partial Postbackto using UpdatePanel. Eventsthat you subscribe to controls are partially displayed, so events are lost. To overcome this situation, you need to reinstall control events.

, ASP.NET Ajax jQuery. , DOM jQuery .

:

<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/>

PageRequest Manager MSDN

bindEvents() script, .

, !

Answer 2

. . JavaScript UpdatePanel

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

• UpdatePanel
• -
• "MyAction" - script.
• script.
• - , , ScriptManager script.