Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.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">×</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
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;