ASP.NET UpdatePanel stopping JQuery from working

Question

Hi All,

I have an update panel on my page with some links that have onClick events that trigger a JQuery box to pop up. This works fine unless an AJAX postback has occurred. I saw some code on another post:

Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);

which I have used but it doesn't seem to be working. I keep getting AsyncDone is not defined. Does anyone have any ideas as to what I can do to sort the issue out please?

Details: ASP.NET 2, IIS7

Thanks in advance.

Answer 1

The problem is that when the updatepanel fires, it replaces a chunk of html in the dom, which means it replaces the elements that you have bound the click event to.

To bypass this look at jquery .live() or .delegate() which keeps looking for events matching the selector you provide, or if you want to bind to content every time the update panel refreshes content look that the jQuery updatepanel plug-in.

Answer 2

I sorted this by not using the document.ready in jQuery. Instead I used:

function pageLoad(sender, args) { //code }

I haven't seen any adverse effects yet so hopefully this will sort my issue.