Jump to content
manolegal

Limpar modal bootstrap ao fechar

Recommended Posts

Bom dia

Após selecionar a Pessoa em um formulário, tenho um botão para editar os dados desta pessoa em um Modal:

<span class="input-group-addon"><a href="#" id="btn_editar" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modal_edit_pessoa_red"></a></span>

Busco os dados no BD e preencho os inputs do modal:

<script type="text/javascript">
$(document).ready(function () {
    $('#btn_editar').click(function () {

        var id = $("#id_cont_hid").val();
        var id_cont= JSON.stringify(id);

  $.ajax({
    type: "POST",
    url: "minha_busca_bd?id=" + id,
    cache: false,
    data: "{'id':'" + id_cont + "'}",
    dataType: 'json',           
        }).done(function(retorno){
                    if (retorno.inserido == true) {
                      $('#md_edit_pes_cpf').val(retorno.dados.cpf); // Atualizo valor campo cpf
                      $("#md_edit_pes_cpf").mask("999.999.999-99"); // Adiciono máscara cpf
                    }
    ..........

Em relação aos dados está funcionando corretamente.

O problema é em relação às máscaras de entrada dos campos (cpf) que na primeira vez que for alterar os dados está vindo corretamente, porém, caso tente alterar novamente os dados da mesma pessoa, a máscara não funciona (não vem formatado corretamente).

Outro detalhe é  que o modal não está sendo resetado (limpo), principalmente após tentativa de edição e ser mostrada mensagem do arquivo PHP que faz a validação dos dados inseridos, uma vez que ao fechar o modal e ao reabri-lo novamente continua mostrando a mensagem de validação, o que eu não gostaria que acontecesse, mas que cada vez que o modal fosse fechado ou finalizado, limpassem os seus dados, para novamente serem carregados após clicar no botão de edição.

Partes do código que faço a validação do modal:

 

var serialize_dados = $('#form_mod_pes_edit_red').serialize();

		$.ajax({
			type: "POST",
			url: "arquivo_validar.php",
			data: serialize_dados,                
                        dataType: 'json',
                        encode: true,
                        cache: false,

                    }).done(function(retorno){
                                if (retorno.inserido == true) {
                                    $("#mensagem_edit_pes_red").html("Cadastro alterado com sucesso!");
                                    //auto.trigger('click');
                                    $('#form_mod_pes_edit_red').each (function(){ // Limpar campos do Form
                                        this.reset();
                                        $('#mensagem_edit_pes_red').html("");
                                        $('#form_mod_pes_edit_red')[0].reset();
                                    });
                                    
                                    setTimeout(function () {
                                        //$('#modal_edit_pessoa_red').on("hidden.bs.modal", function(){ $(this).removeData(); }); 
                                        $('#mensagem_edit_pes_red').html("");   // Limpa mensagens
                                        $('#modal_edit_pessoa_red').modal('hide')
                                        //$('#form_mod_pes_edit_red').on('hidden.bs.modal', function () {            
                                        //$('#modal_edit_pessoa_red').on('hidden.bs.modal', function(){ $(this).find('form')[0].reset(); });
                                    }, 2000); // 2seg
                                    
                                         $('#obs_ped').val("Endereço: "+ retorno.dados.endereco+ " Telefone: "+ retorno.dados.telefone);
                                }
                                 
                                else{
                                    if (retorno.erros){
                                        $('#mensagem_edit_pes_red').html("");
                                        for(var i=0;i<retorno.erros.length;i++) {
                                            $('#mensagem_edit_pes_red').append(retorno.erros[i] + "<br>");
                                        }
                                    }
                                    else{
                                        $("#mensagem_edit_pes_red").html("Não foi possível completar o cadastro. Tente novamente!");
                                    }
                                }
                                
                    });
		 

Já tentei de várias maneiras, porém não consigo encontrar a solução.

No botão fechar do modal também inseri vários códigos para tentar limpar o modal ao sair, porém não obtive sucesso.

Se alguém tiver alguma dica, agradeço.

Share this post


Link to post
Share on other sites

Podes postar a estrutura HTML do modal?

Porque ao meu ver você está executando ajax em um determinado lugar dentro do modal.

Então é simples ao frecha-lo basta re-definir o html do local

 

local_do_ajax.innerHTML = null;

Share this post


Link to post
Share on other sites

Bom dia. Obrigado pela ajuda.

<div class="modal fade" id="modal_cad_pessoa_red" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Cadastrar Pessoa (RD)</h4>
    </div>
        <div class="modal-body">
            <div class="container-fluid" id="container">
            
                                <div class="row">
                        <div class="form-group col-md-5">
                            <label>Nome</label>
                            <input class="form-control form_input_recebe_foco" type="text" id="md_red_pes_nome" name="md_red_pes_nome" autofocus value="<?php echo $nome;?>" placeholder="Informe o Nome da Pessoa (Obrigatório)" required maxlength="50" title='Nome da Pessoa. Antes de cadastrar uma Pessoa, certifique-se de que ela realmente não está cadastrada.' onkeypress="return handleEnter(this, event)">
                        </div>     
  	
                        <div class="form-group col-md-3">
                            <label>Data Nascimento</label>
                            <input class="form-control form_input_recebe_foco" type="text" id="md_red_dt_nasc" name="md_red_dt_nasc" value="<?php echo $data_nascimento;?>" maxlength="10" placeholder="Data Nascimento" title='Data de Nascimento. Digite somente números.' onkeypress="return handleEnter(this, event)" onkeypress="formatar_mascara(this, '##/##/####')" onKeyUp="this.value=formateadata(this.value);">
                        </div>      
        
                        <div class="form-group col-md-3">
                            <label for="cpf">CPF</label>
                            <input class="form-control form_input_recebe_foco" type="text" id="md_red_cpf" name="md_red_cpf" pattern="\d{3}\.\d{3}\.\d{3}-\d{2}" value="<?php echo $_POST ["cpf"];?>" placeholder="Digite o CPF..." maxlength="14" autocomplete="off" title='CPF. Digite somente números. Formato final deve ser: 111.111.111-11' onkeypress="return handleEnter(this, event) && formatar_mascara(this, '###.###.###-##')" onblur="return validacpf()">
                        </div>
                    </div> <!-- /row -->

                </form>
                </div>
                 
            <div class="modal-footer">
                <button type="button" id="grav_md_pes_red" nome="grav_md_pes_red" class="btn btn-primary">Cadastrar</button> 
                <button type="button" class="btn btn-default" data-dismiss="modal" id="fechar_md_edit_pes_red">Fechar</button>    
            </div>
                
            </div>
        </div>     
       
    </div>
    </div>
</div>

Att

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
    • By manolegal
      Boa tarde
      Gostaria de colocar o valor de um campo bootstrap/vue.js em uma variável php, porém não estou conseguindo. É a primeira vez que estou trabalhando com vue.
      O campo está trazendo o valor correto:
      <section class="scans"> <h2>Scans</h2> <ul v-if="scans.length === 0"> <li class="empty">No scans yet</li> </ul> <transition-group name="scans" tag="ul"> <li v-for="scan in scans" key="scan.date" title="scan.content">{{ scan.content }}</li> </transition-group> </section> var app = new Vue({ el: '#app', data: { scanner: null, activeCameraId: null, cameras: [], scans: [] }, mounted: function () { var self = this; self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 }); self.scanner.addListener('scan', function (content, image) { var element = document.getElementById('valor'); element.innerHTML = content self.scans.unshift({ date: +(Date.now()), content: content }); }); Instascan.Camera.getCameras().then(function (cameras) { self.cameras = cameras; if (cameras.length > 0) { self.activeCameraId = cameras[1].id; self.scanner.start(cameras[1]); } else { console.error('Nenhuma Câmera conectada. Verifique!'); } }).catch(function (e) { console.error(e); }); }, methods: { formatName: function (name) { return name || '(unknown)'; }, selectCamera: function (camera) { this.activeCameraId = camera.id; this.scanner.start(camera); } } }); Preciso pegar o valor escaneado constante no campo, para passar para próximo formulário. No aguardo.
    • By henriquers
      Bom Dia,
       
      Estou fazendo um sistema para armazenar documento e tenho algumas tabelas de consulta onde a mesma aparece algumas informações necessarias como ID , Nome etc
      e estou tentando Ocultar a coluna que esta o ID para que o usuario não consiga ver,estou utilizando o seguinte codigo para ocultar a coluna.
      <script> $("#tabela_cons").ready(function () { $('td:nth-child(1),th:nth-child(1)').hide(); }); </script>  
      A coluna fica oculta certinho do modo que eu quero, mas esse código esta afetando as outras tabelas que eu tenho na pagina também, e não sei como ocultar apenas na tabela que eu desejo que seja oculta no caso a tabela com ID = tabela_cons;
    • By joicitias
      Bom dia, 
      Ainda sou novata na área e estou criando um site com Bootstrap , JavaScript , e gostaria de uma ajuda. Crie alertas no form com o booststrap notify, entretanto a notificação de obrigatório aparece no topo da página e eu gostaria que ela aparecesse ao lado do campo. Como posso fazer isso?  


    • By Gilberto Jr
      Boa tarde;
       
      Eu estou com um probleminha aqui que eu não consegui resolver.
       
      O que eu quero, eu tenho uma pagina com 2 modal.
       
      Um modal dentro do outro.
      Exemplo: 
      Quando eu abro um MODAL, eu tenho uma botão para abrir um novo modal. Ele abre certinho, porem na hora de fechar. Eu clico no botão fechar, ele fecha os dois MODAL.
       
      E eu quero fechar somente o segundo modal que abre.
       
      Abaixo segue o meu codigo.
       
      <div class="modal fade" id="ListagemRede" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title font-weight-bold" id="exampleModalLabel">LISTA DE REDES CADASTRADAS</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table text-center"> <thead> <tr> <th scope="col">#</th> <th scope="col">Nome Rede</th> <th scope="col">Ação</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Rede 1</td> <td> <i class="fa fa-pencil fa-2x" style="color:#FB8A52;" data-toggle="modal" data-target="#EditarRede<%=r("id")%>"></i> <!-- Modal Editar a Rede --> <div class="modal fade" id="EditarRede<%=r("id")%>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" action="insere_rede.asp" id="forcadrede"> <div class="form-row"> <div class="form-group col-md-4"> <input type="hidden" name="master" value="1" required> <label for="inputEmail4" class="font-weight-bold">*Nome Rede</label> <input type="text" name="nome" class="form-control blocochamada text-center" id="inputEmail4" placeholder="*Nome da Rede" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Grupo Coord.</label> <select id="inputEstado" name="coorden" class="form-control blocochamada text-center" autocomplete="off" required> <% set rscoord = conn.execute("select * from Inv_coord_grupo") %> <option selected>Escolher...</option> <% while rscoord.eof = false %> <option value="<%=rscoord("id")%>"><%=rscoord("nome_coordenador")%></option> <% rscoord.movenext wend %> </select> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Contrato Qtde</label> <input type="number" name="contratoqtde" class="form-control blocochamada text-center" id="inputCEP" placeholder="Contrato Qtde" autocomplete="off" required> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputEmail4" class="font-weight-bold">*Valor Contrato</label> <input type="text" name="vlrcontrato" class="form-control blocochamada text-center" id="vlrContrato" placeholder="*Valor Contrato" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Valor Cont. Adici.</label> <input type="text" name="vlrcontadici" class="form-control blocochamada text-center" id="vlrContAdicion" placeholder="Valor Cont. Adici." autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Status</label> <select id="inputEstado" name="status" class="form-control blocochamada text-center" autocomplete="off" required> <option selected>Escolher...</option> <option value="1">Ativo</option> <option value="0">Desativado</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btnfechar" data-dismiss="modal">Fechar</button> <button type="submit" class="btn btn-primary btnsubmit">Salvar</button> </div> </form> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> Quem puder me ajudar.
       
      Att;
      Gilberto Jr
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.