How to add a (full) div to Asp:Panel using jquery?

Question

Hello.

I have the following scenario.

I want to use Ajaxcontroltoolkit’s Collapsiblepanelextender to make a collapsed panel.

However, the content that this panel will display will be dynamic and within a div.

My div already exists and within it there are several controls and I want to add this entire div inside the Asp:Panel that will be displayed by Collapsiblepanelextender.

If I could do this via codebehind I would just use the:

Painel.Controls.Add(div);

But I want to add this div to my panel via jquery or javascript.

How can I do that?

HTML (Collapse Mount Panels)

<asp:Panel ID="painelCollapsedCabecalho" runat="server" CssClass="cpHeader">
    <asp:Label ID="lblCabacalho" runat="server" Text="Click here" />
</asp:Panel>
<asp:Panel ID="painelCollapsedCorpo" runat="server" CssClass="cpBody"/>
<cc1:CollapsiblePanelExtender ID="cpeCollapsed" runat="server" TargetControlID="painelCollapsedCorpo"
                              CollapseControlID="painelCollapsedCabecalho" ExpandControlID="painelCollapsedCabecalho"
                              Collapsed="true" TextLabelID="lblCabacalho" CollapsedText="Click to Show Search..."
                              ExpandedText="Click to Hide Search..." CollapsedSize="0" BehaviorID="collapsibleBehavior" />

Script (This is how I intended to add the div to my Asp:Panel, but it doesn’t work.)

<script type="text/javascript">
    function pageLoad(sender, args) {
        $("#painelCollapsedCorpo").append($("#divPesquisar"));
    }
</script>

Answer 1

There are 3 initial questions:

1. Note that to add inside the panel you should use appendTo, for append add after element and not inside

2. You apparently want to add #divPesquisar inside #painelCollapsedCorpo

3. The <asp:Panel ID="painelCollapsedCorpo" ...> may be generating a name="" instead of an "ID"

So your code must be something like:

function pageLoad(sender, args) {
    $("#divPesquisar").appendTo($("#painelCollapsedCorpo"));
}

If generating the "name", use this way:

function pageLoad(sender, args) {
    $("#divPesquisar").appendTo($("[name=painelCollapsedCorpo]"));
}

But if this is not the problem, there are three possibilities of problem:

1. The first is the ID name you may be having trouble with in the "sensitive case" or the name is different You search for divPesquisar but it is possible that the generated div has id like this divpesquisar (p minuscule).

2. The ID of painelCollapsedCorpo is "case sensitive" or the name is wrong (same case of divPesquisar)

3. Another possible problem is that pageLoad nay is being fired. There is a method in Jquery itself that you can use $.ready:

   $(document).ready(function() {
       $("#divPesquisar").appendTo($("#painelCollapsedCorpo"));
       //ou assim $("#divPesquisar").appendTo($("[name=painelCollapsedCorpo]"));
   });
   

Simplified form of ready:

$(function() {
    $("#divPesquisar").appendTo($("#painelCollapsedCorpo"));
    //ou assim $("#divPesquisar").appendTo($("[name=painelCollapsedCorpo]"));
});

But if this divPesquisar is automatically generated by another event, maybe it is not yet available, in this case you can check modifications in the DOM using MutationObserver, something like:

var isReady = 0;

var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var nn = mutation.addedNodes;
    if(nn !== null) {
        var nodes = $(nn);
        nodes.each(function() {
            if(this.id === "divPesquisar" || this.id === "painelCollapsedCorpo") {
                isReady++;
            }

            if(isReady > 1) {
                $("#divPesquisar").appendTo($("#painelCollapsedCorpo"));
                //ou assim $("#divPesquisar").appendTo($("[name=painelCollapsedCorpo]"));
                observer.disconnect();
            }
        });
    }
  });    
});

var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

observer.observe(document, config);

Answer 2

It’s not exactly a solution to the problem, I couldn’t find it, even with the help of colleagues here at Stackoverflow.

What I did was change the strategy. Instead of using the Collapsiblepanelextender of Ajaxcontroltoolkit I used the [Accordion of jQuery UI]1.

See how simple the solution has become:

Script

$(function () {
    $("#accordion").accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        beforeActivate: function (event, ui) {
            // faço algumas coisas aqui.
        }
    });
});

HTML

    <div id="accordion">
        <h3>
            <asp:Label runat="server" ID="lblAbrirBusca" Text="Click here to search" />   </h3>
        <div>
             // minha div com os meus controles
        </div>
   </div>

I know it’s not the answer, but I hope it helps anyone with the same problem.