2

Olá.

Eu tenho o seguinte cenário.

Eu quero usar o CollapsiblePanelExtender do AjaxControlToolkit para fazer um painel collapsed.

Porém, o conteúdo que esse painel irá exibir será dinâmico e estará dentro de uma div.

A minha div já existe e dentro dela existem vários controles e quero adicionar esta div inteira dentro do asp:Painel que será exibido pelo CollapsiblePanelExtender.

Se eu pudesse fazer isto via codebehind seria só usar o:

Painel.Controls.Add(div);

Porém quero adicionar esta div ao meu painel via jquery ou javascript.

Como posso fazer isso?

HTML (Paineis para montar o 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 (Esta é a forma como eu tencionava adicionar a div ao meu asp:Painel, porém não funciona.)

<script type="text/javascript">
    function pageLoad(sender, args) {
        $("#painelCollapsedCorpo").append($("#divPesquisar"));
    }
</script>
4
  • Podes colocar o teu HTML e explicar melhor o que dispara o jQuery? clic do utilizador ou via JS?
    – Sergio
    Commented 29/12/2014 às 14:01
  • Sérgio, inseri o código solicitado. Commented 29/12/2014 às 14:14
  • Essa função ocorre no Load da página. Commented 29/12/2014 às 16:19
  • 1
    @Sergio a function 'pageLoad(sender, args)' é chamada pelo .NET framework ao carregar a página. Se eu não estiver falando besteira é como o '$(document).ready()' do jQuery ou o 'onload' do javascript. Commented 29/12/2014 às 16:36

2 Respostas 2

1

Existem 3 questões iniciais:

  1. Note que para adicionar dentro do painel você deve usar appendTo, pois append adiciona depois do elemento e não dentro

  2. Você aparentemente quer adicionar #divPesquisar dentro de #painelCollapsedCorpo

  3. O <asp:Panel ID="painelCollapsedCorpo" ...> pode estar gerando um name="" ao invés de um "ID"

Então o seu código deve ser algo como:

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

Se estiver gerando o "name", use assim:

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

Porém se este não for o problema, existem três possibilidades de problema:

  1. A primeira é o nome de ID que você pode estar com problema no "caso sensitivo" ou o nome está diferente Você procura por divPesquisar mas é possível que o div gerado tenha a id assim divpesquisar (p minusculo).

  2. O ID de painelCollapsedCorpo é "caso sensitivo" ou o nome está errado (mesmo caso do divPesquisar)

  3. Outro possível problema é que pageLoad não esteja sendo disparado. Existe um método no próprio Jquery que você pode usar o $.ready:

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

Forma simplificada do ready:

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

Porém se este divPesquisar é gerado automaticamente por outro evento, talvez ela ainda não esteja disponível, neste caso você pode verificar modificações no DOM usando MutationObserver, algo como:

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);
10
  • Guilherme Nascimento, primeiramente muito obrigado pela resposta. Commented 29/12/2014 às 16:05
  • @LeonardoRibeirodeAguiar se a resposta lhe ajudou, por favor marque ela como "correta".
    – Syzoth
    Commented 29/12/2014 às 16:06
  • primeiramente muito obrigado pela resposta. Eu testei as três alternativas que você propôs, $.ready, ready simplificado e o MutationObserver, mas infelizmente não funcionou, a minha div continua não aparecendo dentro do painel collapsed, ela continua aparecendo abaixo do meu painel collapsed. A minha div esta escrita no meu HTLM, ela não é gerada por nenhum outro controle. Commented 29/12/2014 às 16:16
  • @LeonardoRibeirodeAguiar veja eu editei a resposta, teste por favor
    – Syzoth
    Commented 29/12/2014 às 16:25
  • Guilherme, infelizmnete não funcionou como appendTo. Eu notei que no caso do MutationObserver ele não esta "entrando" no mutations.forEach(function (mutation). Em que momento (evento) eu devo chamar este MutationObserver? No load da página mesmo? Commented 29/12/2014 às 17:00
0

Não é exatamente uma solução para o problema, isso não consegui encontrar, mesmo com a ajuda dos colegas aqui do StackOverFlow.

O que eu fiz foi mudar de estratégia. Ao invés de usar o CollapsiblePanelExtender do AjaxControlToolkit eu usei o [Accordion do jQuery UI]1.

Veja como ficou simples a solução:

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>

Sei que não é a resposta, mas espero que sirva de ajuda para quem estiver com o mesmo problema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .