Question

I need to add a Javascript event for CollapsiblePanelExtender on Javascript pageload of the page. Following is the definition of CollapsiblePanelExtender:

    <cc1:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pnlInstances" 
     BehaviorID="cpe" ImageControlID="lnkWebroleAction" ExpandedImage="~/App_Themes/Default/images/MonitorDownArrow16.png"CollapsedImage="~/App_Themes/Default/images/MonitorLeftArrow16.png" 
     CollapsedSize="0" Collapsed="false" ExpandControlID="lnkWebroleAction" CollapseControlID="lnkWebroleAction"
     AutoCollapse="false" AutoExpand="false" ExpandDirection="Vertical" SuppressPostBack="true" />

And following is the Javascript code I am executing:

window.onload = pageLoad1();
    function pageLoad1() {$find("cpe").add_expandComplete(coll_ExpandedComplete);                                
    }

The problem is $find("cpe") returns null on this event. If I execute the same function from button click I can find the object.
Which other load events of Javascript I can use? I have tried $(documnt).ready.

Answer 1

You’re not assigning the pageLoad1 function to window.onload, you’re calling it immediately and assigning the value it returns (i.e. undefined).

You have to write:

window.onload = pageLoad1;  // No parenthesis.
function pageLoad1() {
    $find("cpe").add_expandComplete(coll_ExpandedComplete);
}

Or, alternatively, write a pageLoad() function, which will be called automatically by the framework when the page finishes loading:

function pageLoad() {
    $find("cpe").add_expandComplete(coll_ExpandedComplete);
}