Usuário com melhor resposta
Botão de fechar o modal está dando PostBack.

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
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.aspxOutra 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
-
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
Todas as Respostas
-
-
-
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.
-
-
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
-
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.aspxOutra 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
-
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
-
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" -
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...
-
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
-