none
Botão de fechar o modal está dando PostBack. RRS feed

  • Pergunta

  • Bom dia pessoal.

    Estou com um problema e espero que alguém possa me ajudar.

    Tenho a seguinte estrutura numa aplicação Web:

    <%-------------------------Início do Conteúdo------------------------%>            
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="True">
                    <ProgressTemplate>
                        <div align="center" class="updating">
                            <div class="area" style="top: 45%; left: 48%; ; padding-bottom: 10px; padding-right: 10px;">
                                <img id="Img1" src="images/loading.gif" runat="server" />
                            </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:Panel ID="pnlConteudo" runat="server">
                    <asp:UpdatePanel runat="server" ID="updProdutos">
                        <ContentTemplate>
                            <div id="conteudo" class="conteudo">
                                <asp:ContentPlaceHolder ID="FeaturedContent" runat="server">
                                </asp:ContentPlaceHolder>
                            </div>
    
         </ContentTemplate>
                    </asp:UpdatePanel>
                </asp:Panel>

    Essa é a parte do UpDate Panel que está na minha Master Page. Uso apenas esse update panel pra todos os postbacks.

    Numa outra página (filha da master) tenho alguns modais utilizando o AjaxToolKit. Segue a estrutura de um deles:

    <asp:ModalPopupExtender ID="popPesquisaClientes" PopupControlID="pnlPesquisaCliente" runat="server" TargetControlID="imgConsultar" BackgroundCssClass="modalBackground" CancelControlID="imgFecharPesquisaCliente"> </asp:ModalPopupExtender> <asp:Panel runat="server" ID="pnlPesquisaCliente" CssClass="modalPedidos" Width="800px"> <div class="header modalHeader"> <asp:Label runat="server" Text="Pesquisa de Clientes"></asp:Label> <asp:ImageButton runat="server" ID="imgFecharPesquisaCliente" ImageUrl="Images/fecharTool.png" Width="20px" Style="float: right"/> </div><hr/> <div style="clear: both;"> Aqui é o corpo do modal </div>

    </asp:Panel>

    Tudo funciona perfeitamente. Nos modais eu tenho alguns processos e tal q dão postback e retornam valores do banco e etc...essa parte está td bem.

    O problema é que quando clico no botão de fechar do modal (Ex.: imgFecharPesquisaCliente) ele dá um postback ao invés de simplesmente fechar o modal.

    Será q alguém pode me ajudar a entender oq está acontecendo?

    Obrigado a todos pela ajuda...




    • Editado Miguel_Passos segunda-feira, 10 de novembro de 2014 12:48
    segunda-feira, 10 de novembro de 2014 12:43

Respostas

  • Que droga heim...
    Seguinte pesquisando um pouco antes de apelar encontrei o seguinte link:
    http://www.jonathanjungman.com/blog/post/Hiding-ASPNET-Ajax-Modal-Popup-Dialog-Using-JavaScript.aspx

    Outra solução seria adicionar um UPDATEPANEL dentro da PANEL que possui a modal, por que?
    Como a atualização da área está atrelada a todos os postbacks com essa solução você iria disparar o evento dentro da MODAL e não de todo o container.

    Ainda temos uma opção de sumir com tudo via JQUERY...

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Sugerido como Resposta Mr. GMSOFT segunda-feira, 10 de novembro de 2014 19:54
    • Marcado como Resposta Ricardo Barbosa Cortes terça-feira, 11 de novembro de 2014 18:09
    segunda-feira, 10 de novembro de 2014 18:19
  • Opa Lucas...valeu pela dica...

    Vi essa idéia tb pesquisando por aqui.

    Bom, resolvi a questão do botão de fechar da seguinte maneira:

    Tenho 3 modais na mesma página. Criei um Button escondido (com display none) e chamei de btnFechar, em seguida atribui a propriedade CancelControlID = "btnFechar" em todos os modais.

    Criei uma função javascript para fechar os modais conforme abaixo:

    function fecharModal(buttonId) {
                $('#FeaturedContent_btnFechar').click();
                return false;
            }

    Nos respectivos botões de fechar, atribui o OnClientClick=return fecharModal(this.id).

    Ou seja, todos os botões de fechar chamarão essa função em JS que irá provocar o CLICK do botão escondido que foi setado como CancelControlID dos modais...e como retorno FALSE para o botão de fechar...ele não irá executar o postback.

    OK...problema do botão de fechar resolvido...porém....

    Lembram q eu comentei lá no começo que pra cada postback realizado na página é "concatenado" uma VÍRGULA (,) dentro dos textboxes? Então....esse problema persiste...e nos campos que possui algum valor padrão (ex.: R$ 0,00 para campos monetários) ele tb concatena...ficando assim em cada textbox -> R$ 0,00, R$ 0,00, R$ 0,00 (1x R$ 0,00 para cada postback)....

    e assim por diante...

    Estou achando que tem algum "conflito" por causa do UpDatePanel...pois utilizo apenas o da Master Page para fazer todas as requisições.

    Agradeço pelo esforço em ajudar Lucas.

    • Sugerido como Resposta Mr. GMSOFT segunda-feira, 10 de novembro de 2014 19:54
    • Marcado como Resposta Ricardo Barbosa Cortes terça-feira, 11 de novembro de 2014 18:10
    segunda-feira, 10 de novembro de 2014 19:04

Todas as Respostas

  • Miguel,

    Tenta adicionar o parâmetro POSTBACKURL, exemplo:

     PostBackUrl="javascript:void(0);"

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    segunda-feira, 10 de novembro de 2014 16:13
  • Coloca na sua imagem AutoPostBack="False":


    <asp:ImageButton runat="server" ID="imgFecharPesquisaCliente" ImageUrl="Images/fecharTool.png" AutoPostBack="False" Width="20px" Style="float: right"/>

    segunda-feira, 10 de novembro de 2014 16:21
  • Valeu pela ajuda Lucas, mas infelizmente não deu certo.

    Se coloco o PostBackUrl="javascript:void(0);" o botão de fechar perde a função e não fecha mais o modal.

    Veja bem, ele está fechando o modal, mas está recarregando a página e qdo faz isso, ele coloca umas "," (vírgulas) nos textboxes dos modais para cada vez que fecho um modal. Mto estranho.

    Se tiver mais alguma idéia é só mandar q testo...

    Abraço.

    segunda-feira, 10 de novembro de 2014 16:22
  • Teste o que coloquei
    segunda-feira, 10 de novembro de 2014 16:24
  • Valeu pela ajuda Mr. GMSOFT, mas sem sucesso tb...

    Na vdd o ImageButton nem tem a propriedade AutoPostBack, mas se forçar ele aceita. Porém não resolveu, continua agindo da mesma forma.

    Vou tentar detalhar um pouco melhor como é esse form...

    É uma tela de lançamento de pedidos, onde:

    Existe um DropDown com uma lista de Clientes que faz postback para buscar os dados do cliente selecionado.

    E existe um ImageButton para pesquisar por clientes que abre um Modal (usando ajaxtoolkit) com os campos para pesquisa e um botão de BUSCAR.

    Obs.: Se clico na pesquisa de cliente ou qq outro modal sem selecionar o cliente, não é feito postback qdo fecho o modal, mas após selecionar o cliente, ou seja, no retorno de um primeiro postback, os modais passam a fazer postback quando são fechados.

    Não sei se tenho explicado de forma clara o meu problema....mas agradeço pelas tentativas do pessoal...

    Abraços

    segunda-feira, 10 de novembro de 2014 16:37
  • Que droga heim...
    Seguinte pesquisando um pouco antes de apelar encontrei o seguinte link:
    http://www.jonathanjungman.com/blog/post/Hiding-ASPNET-Ajax-Modal-Popup-Dialog-Using-JavaScript.aspx

    Outra solução seria adicionar um UPDATEPANEL dentro da PANEL que possui a modal, por que?
    Como a atualização da área está atrelada a todos os postbacks com essa solução você iria disparar o evento dentro da MODAL e não de todo o container.

    Ainda temos uma opção de sumir com tudo via JQUERY...

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Sugerido como Resposta Mr. GMSOFT segunda-feira, 10 de novembro de 2014 19:54
    • Marcado como Resposta Ricardo Barbosa Cortes terça-feira, 11 de novembro de 2014 18:09
    segunda-feira, 10 de novembro de 2014 18:19
  • Opa Lucas...valeu pela dica...

    Vi essa idéia tb pesquisando por aqui.

    Bom, resolvi a questão do botão de fechar da seguinte maneira:

    Tenho 3 modais na mesma página. Criei um Button escondido (com display none) e chamei de btnFechar, em seguida atribui a propriedade CancelControlID = "btnFechar" em todos os modais.

    Criei uma função javascript para fechar os modais conforme abaixo:

    function fecharModal(buttonId) {
                $('#FeaturedContent_btnFechar').click();
                return false;
            }

    Nos respectivos botões de fechar, atribui o OnClientClick=return fecharModal(this.id).

    Ou seja, todos os botões de fechar chamarão essa função em JS que irá provocar o CLICK do botão escondido que foi setado como CancelControlID dos modais...e como retorno FALSE para o botão de fechar...ele não irá executar o postback.

    OK...problema do botão de fechar resolvido...porém....

    Lembram q eu comentei lá no começo que pra cada postback realizado na página é "concatenado" uma VÍRGULA (,) dentro dos textboxes? Então....esse problema persiste...e nos campos que possui algum valor padrão (ex.: R$ 0,00 para campos monetários) ele tb concatena...ficando assim em cada textbox -> R$ 0,00, R$ 0,00, R$ 0,00 (1x R$ 0,00 para cada postback)....

    e assim por diante...

    Estou achando que tem algum "conflito" por causa do UpDatePanel...pois utilizo apenas o da Master Page para fazer todas as requisições.

    Agradeço pelo esforço em ajudar Lucas.

    • Sugerido como Resposta Mr. GMSOFT segunda-feira, 10 de novembro de 2014 19:54
    • Marcado como Resposta Ricardo Barbosa Cortes terça-feira, 11 de novembro de 2014 18:10
    segunda-feira, 10 de novembro de 2014 19:04
  • Sobre o problema da virgula eu andei lendo algumas coisas e muita gente tem o mesmo problema, veja esse link http://stackoverflow.com/questions/1588026/modalpopupextender-and-commas-appearing-in-my-textbox-asp-net é o mais indicado na comunidade e possui várias possíveis soluções. 

    Já que podemos arriscar então achei legal montar uma, veja:

    $(function(){
        $('.texto').each(function(){
            var conteudo = $(this).val();
            
            $(this).val(conteudo.substr(0, conteudo.length-1));
        });
    });

    Esse pequeno método vai remover o último caractere de todos os campos com CssClass="texto", veja ele em funcionamento em http://jsfiddle.net/3Lfw2x89/1/

    Espero ter ajudado!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    terça-feira, 11 de novembro de 2014 01:42
  • Entendi oq vc tentou fazer Lucas....mas não funciona mto bem pro problema...

    Eu não quero apenas remover o último caracter adicionado....até pq, dependendo do campo, pode ser adicionado mais de 1 caracter.

    Ainda não consegui entender oq acontece...

    Assim é como as modais devem ficar...


    quarta-feira, 12 de novembro de 2014 18:01
  • Porém...qdo realizo algum postback na página...os campos de TextBox têm seus valores alterados como podemos ver nas imagens abaixo...

    Percebe a diferença que dá nos campos?

    Quando carrego a página, esses modais aparecem com os campos normais...mas qdo eu fecho o modal e realizo uma operação qualquer q faça PostBack....ao abrir novamente o modal...os campos ficam alterados como nas 2 últimas imagens...

    Outro detalhe....após fazer esse processo...se eu INSPECIONAR os elementos da página...e procurar pelo ID de uma dos campos de texto...aparecem mais de 1 ocorrência (Não estou contando com CSS ou JS)...me refiro à ocorrências do mesmo objeto...apenas com diferença no Value....

    Nunca tinha visto acontecer isso...e não estou conseguindo entender o pq....

    Obrigado pelas ajudas....abraço

    quarta-feira, 12 de novembro de 2014 18:03
  • Aqui mando uma imagem do q comentei sobre a inspeção de um dos textboxes...

    Não sei pq isso acontece...pois no código da página existe APENAS 1 textbox desse...

    Tô ficando maluco já com esse problema....affffff....

    quarta-feira, 12 de novembro de 2014 18:13