the Javascript "function pageLoad()" doesn't play nice with UpdatePanel...

Question

So I've got this UpdatePanel. Inside it I have a nifty little jQuery scroll gallery of thumbnails which shows the full image in a container after posting back to get the full image URL from the server. Each thumbnail in the scroll gallery is an imageButton with an onCommand event.

What's happening is that when a thumbnail is clicked it posts back to the server and changes the full image container. Since this is happening in an update panel, I'm using the javascript "function pageLoad(){}" to re-apply my jQuery after the partial postback. It works great! After every postback I don't lose my jQuery visuals.

The problem is that I can only get one post back to work before I have to refresh the page. It seems that after the first postback, the view gets updated, and the pageLoad JS fires to reinitialize the jQuery as expected. The next time I click a thumbnail to see it's full view, I can watch the onCommand event execute on the server, but nothing happens to my view; no full image change, no pageLoad() JS firing. Nothing. It's like the postback doesn't make the round trip and send data back to the client after it's processed on the server.

Not only that, but other update panels also experience the same effect regardless of whether there's a jQuery element in them that would be affected by my pageLoad() JS. The first postback updates the panel fine, but subsequent postbacks appear to do nothing.

I think the problem is with the pageLoad() JS, but I'm not sure what I'm missing.

Here's the JS method which should run after every full or partial postback and appears to be causing my grief. It's located in my < head >.

<script type="text/javascript"> 
  function pageLoad(){   
    $("div.scrollable1").unbind();
    $("div.scrollable").unbind();
    // initialize small scrollable.
    $("div.scrollable1").scrollable({size: 1,clickable: false});
    // initialize scrollable    
    $("div.scrollable").scrollable({size: 1,clickable: false}).mousewheel().find("a[rel]").overlay(); 
  }
</script>

Answer 1

First of all I'd like to advice against using two different javascript libraries. In many cases it will (as you see by your problem) cause problems that can be quite hard to solve.

But you could try this:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function endRequest() {
    //Set your jquery stuff here.
}

I think this would work. This code should be outside of any updatepanel so it doesn't get reloaded.