ASP.NET Update Panel stops jquery from working

Question

I have binded jquery events set for mouseenter mouseleave, as well as jquery draggable. The divs are placed in an update panel and when a button is clicked information is sent to the database and the update panel is updated. However when the panel is updated the jquery events no longer work. Any idea as to why this would be the case?

Answer 1

You can add an Asynchronous trigger to your page to call a JavaScript/jQuery function after any async call.

Place this code in your Page_Load() of your aspx code behind:

//This script handles ajax postbacks, by registering the js to run at the end of *AJAX* requests
Page.ClientScript.RegisterStartupScript(typeof(Page), "ajaxTrigger", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);", true);
Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "EndRequest", "function EndRequestHandler(sender, args){AsyncDone();}", true);

This code snippet will specifically call the JavaScript/jQuery function AsyncDone();

Answer 2

try using

function pageLoad(sender, args)
{ 
   // JQuery code goes here
}

instead of

   $(document).ready(function() {
      // JQuery code goes here
   });

This will work when a button that is within an update panel is clicked; it goes to the server and will re-add the jquery when it comes back. However, this does not work with Asynchronous postbacks caused by a control such as the eo:AJAXUploader but combining this with Bryans version you can handle Asynchronous postbacks as well

Answer 3

Have a look a this blog post from Encosia which gives you a couple of ways of rebinding after async updates. I found this resolved my issue which was similar.

Answer 4

Use live.

$("div").live("mouseenter", function(){
      // do something
    });

Answer 5

Bryan's got the answer. I typically append that with some event handlers, for skinning and such, that fire after PostBacks with this:

    /**
    *   .NET Event Handlers
    *   When new code is added on to the client by way of
    *   .NET PostBacks, CSS is typically ignored.  This method
    *   can be used to add CSS to new elements as they are added
    *   asynchronously.  It calls a script at the end of every 
    *   partial post back request.
    *
    *   @example - Core.NETEventHandlers.AsyncPostBack.Init();
    */    
    var NETEventHandlers: {
        /**
        *   Async Post Back Handler
        *   calls a script at the end of every partial post back request
        */          
        AsyncPostBack: {
            EndRequest: {
                Add: function() {
                    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(NETEventHandlers.AsyncPostBack.EndRequest.Handler);
                } // EO Add
                , Handler: function(sender, args) {
                    // Handlers here.
                    alert('Hello World');
                } // EO Handler
            } // EO endRequest
            , Init: function() {
                Sys.Application.add_init(NETEventHandlers.AsyncPostBack.EndRequest.Add);
            }
        } // EO AsyncPostBack
    } // EO dotNETEventHandlers