Mostrar/Ocultar DIV e controles no client-side - sem postback (updatepanel)

Question

Ola, pessoal

estou programando em aspnet (.vb) , e para mostrar/ocultar paineis, é pelo codigo vb mesmo.

Tem formularios que são muito grandes e acaba ficando pesado para intercalar entre paineis (por exemplo) clicando em botão e dando postback... Então estou planejando algumas mudanças para melhorar isso...

Uma delas seria não deixar os paineis invisiveis (no servidor), apenas controlar a visibilidade pelo client (clicando num link ou botão, aparece ou esconde um painel, por exemplo)

- uso masterpage
- na pagina tem um scriptmanager e uso um updatepanel na pagina toda

Acontece o seguinte: funciona tranquilamente, até que clico num botão que executa um postback com algum codigo... daí para de funcionar o "exibir / ocultar" paineis via jQuery...

A ideia seria exibir/ocultar paineis sem a necessidade de dar postback em toda a pagina (updatepanel), deixar para o usuario visualizar ou entrar com algumas informações, e fechar o painel novamente.. (sem postback)

Estou fazendo dessa forma (um exemplinho bem basico):

<script type="text/javascript">
                $(document).ready(function () {
                    $("#MostrarPainel").click(Mostrar);
                    $("#EsconderPainel").click(Esconder);
                    $("#MostrarEsconderPainel").click(MostrarEsconder);
                });

                function Mostrar() {
                    $("#PainelTeste").show();
                }
                function Esconder() {
                    $("#PainelTeste").hide();
                }
                function MostrarEsconder() {
                    $("#PainelTeste").toggle("slow");
                }
            </script>

E no html, 3 botões e a div (painel)

<button type="button" id="MostrarPainel">Mostrar Painel</button>
                         <button type="button" id="EsconderPainel">Esconder Painel</button>
                         <button type="button" id="MostrarEsconderPainel">Mostrar e Esconder Painel</button>
                         <div id="PainelTeste" style="display: none; background: rgba(82,82,82,.4); padding: 15px; top: 20px; left: 300px; width: 560px; ; border-radius: 6px; ">Painel de teste</div>

O que pode estar acontecendo? Estou tentando dessa forma simples, pois não vai "interferir" (muito) no que ja tenho pronto...

mas sera que não é por aí? 


Obrigado!!

---

Julio C.

Answer 1

Olá Júlio,

Olhando alguns artigos parece que ao fazer o refresh do conteúdo no updatepanel atualiza o DOM e por isso as chamadas referenciadas pelo jquery são perdidas.

Encontrei este artigo que explica alternativas que pode ajudar você.

http://weblogs.asp.net/hajan/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions

Também a partir do seu código o erro parou de acontecer fazendo da seguinte maneira:

        function pageLoad() {

            $(function () {

                $(document).ready(function () {

                    $("#MostrarPainel").click(Mostrar);

                    $("#EsconderPainel").click(Esconder);

                    $("#MostrarEsconderPainel").click(MostrarEsconder);

                });

            });

        }

Abraço,

Answer 2

Ola, Demetrio, blz

Que bom que é um problema já relatado, que acontece com outros tambem (eu ja tava achando que estava fazendo algo "errado")

-

Ja funcionou , dessa simples forma que voce colocou (pageLoad)

eu não entendi o porque... vou ver o artigo inteiro.

Muito obrigado pela ajuda!!

---

Julio C.

Answer 3

Um problema, porém, com o exemplo

Uma div que está "display: none" style dela (no inicial, pq não quero que apareça no inicio), qualquer botão que eu pressiono (que causa postback, no updatepanel), faz a div sumir, mesmo estando visivel no momento em que o botão é pressionado.

Acho que deve haver 2 alternativas, 1 seria controlar esse atributo display quando apertar algum botão que causa postback no updatepanel (meio complicado); 

Outra, seria não colocar display none no style da div... e sim, por jquery (acho) setar display none inicialmente... alguma ideia?

---

Julio C.

Answer 4

Na verdade mesmo, testando melhor...

O "mostrar/ocultar" via componentes client, funciona e continua funcionando apos postaback,

porém, o problema não é apenas "sumir" a div que estava aberta, e sim, tambem "aparece" as que estão aparecendo inicialmente (mesmo ocultando via jQuery);

só para constar... lendo o artigo acredito que vou entender melhor

Obrigadão, de qualquer forma :)

---

Julio C.