How to add a div (complete) to asp: Panel using jquery?

Question

How to add a div (complete) to asp: Panel using jquery?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Hello.

I have the following scenario.

I want to use CollapsiblePanelExtender from AjaxControlToolkit to make a collapsed panel.

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

My div already exists and inside it there are several controls and I want to add this whole 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 dashboard via jquery or javascript.

How can I do this?

HTML (Panels to mount or Collapse)

<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 does not work.)

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

javascript html jquery asp.net ajaxtoolkit

asked by anonymous 29.12.2014 / 14:59

2 answers

TextBox and C # + ASP.NET Dynamic Button Organize folders, subfolders, and files in an array?

score 1 · Answer 1

There are 3 initial questions:

Note that to add inside the panel you should use appendTo , because append adds after the element and not inside

You seem to want to add #divPesquisar within #painelCollapsedCorpo

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

Then your code should look something like:

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

If you are generating "name", use the following:

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

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

The first is the ID name that you may be experiencing in the "sensitive case" or the name is different You look for divPesquisar but it is possible that the generated div has the id so divpesquisar (small).

The ID of painelCollapsedCorpo is "case sensitive" or the name is wrong (even if divPesquisar )

Another possible problem is that pageLoad no 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, it may not yet be available, in which case you can check DOM changes 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);

score 0 · Answer 2

It is not exactly a solution to the problem, I could not find it, even with the help of colleagues here at StackOverFlow.

What I did was change my strategy. Instead of using CollapsiblePanelExtender from AjaxControlToolkit I used the [jQuery UI Accordion] 1 .

See how simple the solution was:

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 will help anyone with the same problem.