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

  • Pergunta

  • 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.

    quinta-feira, 20 de agosto de 2015 11:55

Respostas

  • 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,

    • Editado Demetrio Costa quinta-feira, 20 de agosto de 2015 18:54
    • Marcado como Resposta Marcos SJ sexta-feira, 21 de agosto de 2015 19:08
    quinta-feira, 20 de agosto de 2015 18:50

Todas as Respostas

  • 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,

    • Editado Demetrio Costa quinta-feira, 20 de agosto de 2015 18:54
    • Marcado como Resposta Marcos SJ sexta-feira, 21 de agosto de 2015 19:08
    quinta-feira, 20 de agosto de 2015 18:50
  • 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.

    sábado, 22 de agosto de 2015 14:22
  • 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.

    sábado, 22 de agosto de 2015 14:34
  • 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.

    sábado, 22 de agosto de 2015 14:46