Jquery stops working in Asp.net control when loaded by a partial postback

Question

in an ASP.net/C# application. I am using the an update panel and a Placeholder inside it to dynamically load controls

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click"/>
    </Triggers>
    <ContentTemplate>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server">
        </asp:PlaceHolder>
    </ContentTemplate>
</asp:UpdatePanel>

When I click on the LinkButton1 I load a user control in the PlaceHolder:

protected void LinkButton1_Click(object sender, EventArgs e)
{
    PlaceHolder1.Controls.Clear();
    MyControl C;
    C = (MyControl1 )LoadControl("Controls/MyControl.ascx");
    PlaceHolder1.Controls.Add(C);
}

All the control I have are loadded correctly.

But the problem is this:

I have a control that uses Javascript and Jquery to create a drop down animation when I click on a div. This control works correctly when loaded on a page by a Normal PostBack But When I load it in the update panel using a partial post back, it loads but the javascript stops working (No more drop down animation and other stuff)

How can I make them work when loading the control via a partial postback?

Answer 1

I think using Jquery "Live" could be the answer your looking for, this will monitor changes in the DOM.

$("{YOURQUERY}").live("click", function(){ alert("Goodbye!"); });

Look at the jquery documentation for further information.

Answer 2

I think your animation is being registered at a $(document).ready() event. Then it registers on the all divs, the specific animation. If you do a postback to your updatepanel, then the document ready event isn't fired, so the animation is registered. You should do it yourself again after a postback in an updatepanel.

Answer 3

My guess is that your animation for drop downs is executed on ready of the dom. So your intial page load sets up the animation wherever it's needed on the drop downs.

With a partial post back its only that section that gets loaded and so the animation is not set up. As it was not a part of the Dom on the initial ready.

You will need to trigger some javascript on return of that partial post back to run the same function you probably have to set up the animation.

Edit

How to control which JavaScript gets run after UpdatePanel partial postback endRequest?

Should help you execute the javascript after the update panel has returned.

Answer 4

When you do a .bind() you only wire up the event for the elements present in the DOM at the given moment, i.e. when you execute the .bind(). The controls you load asynchronously via the partial postback are not present at document.ready which is why your events don't work.

You should use live or delegate or, even better, if you are using jQuery 1.7 or later you should use the new on-function:

$(function(){
    $('placeholder-selector').on('click' , 'your-clickable-selector', function(){
        //do your animation here
    });
});