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
.
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);
}