Question

I have an ajax accordion, and each pane contains an updatepanel (created dynamically). I want the updatepanels to refresh when the header of the pane is clicked, but there is no click event.

I can pop a button in the header, and register it as an asynch trigger using the scriptmanager, but I don’t want a button, I want the entire header to be a trigger.

I can’t see a way to set a div or a label as a trigger as they don’t have a server side click event. Is there some other way I can do it?

Answer 1

Use jQuery.

The syntax would be as easy as the following:

$('#myHeading').click(function(){
    // Your code here
});

Sometimes with ASP.NET I have had to use a wildcard ID match because ASP.NET creates really long semi-random clientside ID’s for your elements. You would do something like the following:

$('[id*="myHeading"]').click(function(){
    // Your code here
});

Essentially you can select anything on the DOM and attach an event handler to it with jQuery. Sometimes you have to get creative with the selectors.

IMPORTANT: If you are using updatepanels and the heading you want to monitor for a click is inside that panel, you will need to REBIND those event handlers to the element you are selecting after the panel is loaded/re-loaded via ajax. This can be achieved using the following code:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_pageLoaded(panelLoaded);

function panelLoaded(sender, args){

    $('[id*="myHeading"]').click(function(){
        // Do something after there is a click
    });

}