Why Collapsible Panel Cannot be found in jQuery

Question

I have nine collapsible panels on a page. I can expand or collapse them from either jQuery or C# code behind. It was all working fine until I broke something and now the $find(cpe) returns null for two of the nine.

The panels are defined and visible to the C# but their outerHTML settings in the DOM (Firebug) suggest the problem:

These work:

<input name="ctl00$body$cpOutsideSales_ClientState" id="ctl00_body_cpOutsideSales_ClientState" value="true" type="hidden">
<input name="ctl00$body$cpGeneral_ClientState" id="ctl00_body_cpGeneral_ClientState" value="false" type="hidden">

These don't work:

<input name="ctl00$body$cpDuties_ClientState" id="ctl00_body_cpDuties_ClientState" type="hidden">
<input name="ctl00$body$cpAnalyst_ClientState" id="ctl00_body_cpAnalyst_ClientState" type="hidden">

The problem is that the "value='true'" is missing, but I see no obvious way to set it. Here is a declaration of one that works:

<asp:CollapsiblePanelExtender ID="cpGeneral" runat="server" 
    TargetControlID="pnlGeneral" 
    BehaviorID="cpGeneral" 
    TextLabelID="lblGeneral" 
    SuppressPostBack="true" 
    Collapsed="true" 
    ImageControlID="icnGeneral" 
    ExpandControlID="pnlGeneralcp" 
    CollapseControlID="pnlGeneralcp"
    ExpandedText="Collapse" 
    CollapsedText="<b>Position/Organization</b>">
</asp:CollapsiblePanelExtender>

and one that doesn't:

<asp:CollapsiblePanelExtender ID="cpDuties" runat="server" 
    TargetControlID="pnlDuties"
    BehaviorID="cpDuties" 
    TextLabelID="lblDuties" 
    SuppressPostBack="true" 
    Collapsed="true"
    ImageControlID="icnDuties" 
    ExpandControlID="pnlDutiescp" 
    CollapseControlID="pnlDutiescp"
    ExpandedText="Collapse" 
    CollapsedText="<b>Duties</b>">
</asp:CollapsiblePanelExtender>

I have tried setting ClientState in C#, and the code executes, but the jQuery code still cannot find the control. I.E. This works when pn="cpGeneral" but fails when pn="cpDuties':

function addPanelHandler(panel, pn) {
    extender = $find(pn);
    if (extender != null) {
        extender.add_expanded(function () {
            loadPanel(panel, pn);
        });
    }
}

Here is an image from FireBug. Note that the "true" is missing from two of the nine:

Answer 1

I see no reason the two shouldn't work. I believe it is input/data related.
But because it is a fast check:
1) Try another browser. And another.
If they all behave the same way:
2) Make sure the inputs to addPanelHandler are totally correct. If they are - find someone to rubber duck the inputs and problem with.
3) If you still have the problem: ditch aspnet for the time being and copy/paste the code into HTML and distill the code. IMHO: getting rid of the server fastens up the debugging turnaround.

---

Answer 2

I never came up with a definitive answer to what caused this, but by carefully recreating the control, I created another one that worked and gradually moved the functionality from the bad control to the good one. I was able to isolate it to something in the declaration of the control, but that's as close as I got.