Olá. Estou com um problema muito sério com uns eventos que são disparados diversas vezes ao clicar em um determinado botão.
Tenho o sistema de gerenciamento de tarefas abaixo:
Quando eu clico no botão dos status (Que estejam com o status de PENDENTE ou STAND_BY) o botão passa a ter o Status "CONCLUIDO" e cria uma nova atividade para o mês seguinte (Tudo isso feito com AJAX e PHP).
Temos também aquele botão (com um íconte de atenção) que está na coluna STAND BY. Esse botão, ao ser clicado, faz com que qualquer atividade receba o status de "STAND_BY" (em espera) e a recebe o texto "ATIVIDADE PARADA POR FALTA DE ARQUIVOS". O problema está nesse botão da coluna STAND BY.
PROBLEMA: Quando clico nesse botão (da coluna STAND BY), ele transforma normalmente o status para "STAND_BY" e insere o comentário da e quando clico no botão "STAND_BY" ele se tranforma no status "CONCLUIDO". O problema é que quando vou fazer essas situações novamente, sem dar refresh na página, ao clicar no botão da coluna STAND BY e concluir uma atividade, começa a ser geradas múltiplas atividades. Ou seja, parece que os eventos começam a ser executados mais de uma vez ao clicarmos no botão. Quando damos refresh na página, tudo volta o ciclo inicial.
Resumindo: Os eventos estão sendo executados mais de uma vez após o primeiro eventos ser executado.
Sei que o problema é muito particular e fica difícil explicar por aqui, por vocês não terem familiaridade com o código. Rodei tudo e não consegui achar uma solução pra isso. Vou deixar o código abaixo e se vocês puderem me ajudar, eu ficaria agradecido. Obrigado!
Segue o código jQuery abaixo: (Vou tentar tirar as partes menos importantes do código).
$(document).ready(function() {
//Chamando Função de Preencher Dashboard
update_dashboard();
//Aqui repitimos a cada 1 segundo
setInterval(function() {
update_dashboard();
}, 1 * 1000);
//CÓDIGO PARA PREENCHIMENTO DA LISTA COM OS DADOS DA PESQUISA
$('#formulario-consulta').submit(function(e) {
e.preventDefault();
$('#botao-click-dashboard').val("submit-vindo-do-formulario");
var formulario = $(this);
var retorno = inserirFormulario(formulario);
});
//CÓDIGO PARA QUANDO CLICAR NO DASHBOARD "RESULTADOS-PENDENTES"
$(document).on("click", "#resultados-pendentes", function(e) {
e.preventDefault();
$('#botao-click-dashboard').val("PENDENTE");
var formularioPendente = $("#formulario-consulta");
var retorno = inserirFormulario(formularioPendente);
});
function inserirFormulario(dados) {
$.ajax({
//dataType: "json",
type: "POST",
data: dados.serialize(),
url: "banco/pagina-minhas-tarefas/interface-resultado-pesquisa.php",
cache: false,
}).done(function(data) {
var atividades = "";
$.each($.parseJSON(data), function(chave, valor) {
//FUNÇÃO PARA FORMATAR AS DATAS QUE VEM DO PHP
function dataAtualFormatada(parametro) {
if (parametro == null) {
parametro = "";
return parametro;
} else {
var data = new Date(parametro),
dia = data.getDate().toString(),
diaF = (dia.length == 1) ? '0' + dia : dia,
mes = (data.getMonth() + 1).toString(), //+1 pois no getMonth Janeiro começa com zero.
mesF = (mes.length == 1) ? '0' + mes : mes,
anoF = data.getFullYear();
return diaF + "/" + mesF + "/" + anoF;
}
}
var vencimento = dataAtualFormatada(valor.DT_VENCIMENTO);
var inicio = dataAtualFormatada(valor.DT_INICIO);
var fim = dataAtualFormatada(valor.DT_FIM);
//CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO
atividades += '<tr class="' + valor.codigo + '" name="' + valor.STATUS + '">';
//atividades += '<td>' + valor.codigo + '</td>';
atividades += '<td class="th-ocultar-responsivo-tbody">' + valor.COD + '</td>';
atividades += '<td>' + valor.EMPRESAS + '</td>';
atividades += '<td class="th-ocultar-responsivo-tbody">' + valor.TRIBUTACAO + '</td>';
atividades += '<td>' + valor.TIPO_ATIVIDADE + '</td>';
atividades += '<td>' + vencimento + '</td>';
atividades += '<td class="th-ocultar-responsivo-tbody">' + inicio + '</td>';
atividades += '<td class="th-ocultar-responsivo-tbody">' + fim + '</td>';
if (valor.STATUS == "INICIADO") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-iniciado" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "CONCLUIDO") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-concluido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "CONCLUIDO_VENCIDO") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-concluido-vencido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "VENCIDO") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-vencido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "PENDENTE") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-pendente" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
} else if (valor.STATUS == "INICIADO_VENCIDO") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-iniciado-vencido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
}
//botão stand_by do status
else if (valor.STATUS == "STAND_BY") {
atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' css-stand-by" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
}
//botão reabrir atividade coluna
atividades += '<td class="th-ocultar-responsivo-tbody"><button type="button" class="btn css-reabrir REABRIRATIVIDADE data-toggle="tooltip" data-placement="bottom" title="Clique aqui caso tenha iniciado a atividade ou concluido indevidamente, reabrir a atividade não altera a duração de execução da atividade" " name="' + valor.STATUS + '" value="' + valor.codigo + '"><img src="_imagens/reabrir.png"></button></td>';
//botão stand_by da coluna
atividades += '<td class="th-ocultar-responsivo-tbody"><button type="button" class="btn btn-primary stand-by-coluna data-toggle="tooltip" data-placement="bottom" title="Clique aqui caso você tenha algum tipo de problema que impeça de iniciar ou concluir uma atividade, Exemplo: Não envio de documentação de um cliente"" id="' + valor.codigo + '" value="' + valor.COD + '"><img src="_imagens/stand_by.png"></button></td>';
//botão inserir detalhes
atividades += '<td class="th-ocultar-responsivo-tbody"><button type="button" class="btn css-detalhes" <a class="" href="#" data-toggle="modal" data-target="#modal-observacoes"><img src="_imagens/historicotarefa.png"></a></button></td>';
//botão inserir detalhes
//atividades += '<td><a class="btn btn-md btn-primary css-detalhes " href="#" data-toggle="modal" data-target="#modal-observacoes"><img src="_imagens/historicotarefa.png"></a></button></td>';
atividades += '</tr>';
});
$('#registros-atividades').html(atividades);
//CÓDIGO PARA QUANDO CLICAR NA LINHA DA TABELA <TR> QUE ESTÁ DENTRO DA <TABLE>
$(document).on("click", "#registros-atividades tr", function(e) {
e.preventDefault();
var botao = $(this).attr('class');
$("input[name='codigo-modal-observacoes']").val(botao);
//Código para tirar e remover background no tr ao clicar nele
$(this).siblings().removeClass('ativo');
$(this).toggleClass('ativo');
var retorno = pesquisarDetalhes(botao);
});
//CÓDIGO ENVIAR OS DADOS DO MODAL DE DETALHES PARA O BANCO DE DADOS
$('#inserir-observacoes').submit(function(e) {
e.preventDefault();
var formulariodetalhes = $(this);
var retorno = inserirDetalhes(formulariodetalhes);
});
//CÓDIGO PARA QUANDO CLICAR NOS BOTÕES, ELES ALTERAREM SUA COR, TEXTO E CONSULTA AO BANCO
//CÓDIGO PARA QUANDO CLICAR NO BOTÃO 'PENDENTE' ELE VIRAR 'INICIADO' (NO TEXTO, COR DO BOTAO E NO BANCO DE DADOS)'
$(document).on("click", ".PENDENTE", function(e) {
$(this).html('INICIADO');
//andrews//////////////////////////////
$(this).css('background-color', 'rgb(236, 200, 70)');
$(this).css('border', '1px solid gray');
$(this).css('color', 'royalblue');
$(this).css('font-weight', 'bold');
$(this).css('border-radius', '5px');
//andrews//////////////////////////////
$(this).attr('class', 'btn INICIADO');
var estate = "INICIADO";
var codigo = $(this).val();
var antigoestado = "NAO_ERA_STAND_BY"; //ESSA VARIÁVEL FOI CRIADA SÓ PARA A FUNÇÃO DE MUDAR STANDY_BY PARA CONCLUÍDO FUNCIONAR. ELA NÃO TEM VALOR AQUI
var alterar = alterarStatus(estate, codigo, antigoestado);
});
//CÓDIGO PARA QUANDO CLICAR NO BOTÃO 'INICIADO' ELE VIRAR 'CONCLUIDO' (NO TEXTO, COR DO BOTAO E NO BANCO DE DADOS)'
$(document).on("click", ".INICIADO", function(e) {
$(this).html('CONCLUIDO');
//andrews//////////////////////////////
$(this).css('background-color', 'rgb(86, 137, 73)');
$(this).css('border', '1px solid gray');
$(this).css('color', 'rgb(255, 255, 255)');
$(this).css('font-weight', 'bold');
$(this).css('border-radius', '5px');
//andrews//////////////////////////////
$(this).attr('class', 'btn CONCLUIDO');
var estate = "CONCLUIDO";
var codigo = $(this).val();
var antigoestado = "NAO_ERA_STAND_BY"; //ESSA VARIÁVEL FOI CRIADA SÓ PARA A FUNÇÃO DE MUDAR STANDY_BY PARA CONCLUÍDO FUNCIONAR. ELA NÃOO TEM VALOR AQUI
var criar = criarAtividade(codigo);
var alterar = alterarStatus(estate, codigo, antigoestado);
});
//CÓDIGO PARA QUANDO CLICAR NO BOTÃO 'VENCIDO' ELE VIRAR 'INICIADO/VENCIDO' (NO TEXTO, COR DO BOTAO E NO BANCO DE DADOS)'
$(document).on("click", ".VENCIDO", function(e) {
$(this).html('INICIADO_VENCIDO');
//andrews//////////////////////////////
$(this).css('background-color', 'rgb(196, 95, 49)');
$(this).css('border', '1px solid gray');
$(this).css('color', 'white');
$(this).css('font-weight', 'bold');
$(this).css('border-radius', '5px');
//andrews//////////////////////////////
$(this).attr('class', 'btn INICIADO_VENCIDO');
var estate = "INICIADO_VENCIDO";
var codigo = $(this).val();
var antigoestado = "NAO_ERA_STAND_BY"; //ESSA VARIÁVEL FOI CRIADA SÓ PARA A FUNÇÃO DE MUDAR STANDY_BY PARA CONCLUÍDO FUNCIONAR. ELA NÃOO TEM VALOR AQUI
var alterar = alterarStatus(estate, codigo, antigoestado);
});
//CÓDIGO PARA QUANDO CLICAR NO BOTÃO 'INICIADO/VENCIDO' ELE VIRAR 'CONCLUIDO/VENCIDO' (NO TEXTO, COR DO BOTAO E NO BANCO DE DADOS)'
$(document).on("click", ".INICIADO_VENCIDO", function(e) {
$(this).html('CONCLUIDO_VENCIDO');
//andrews//////////////////////////////
$(this).css('background-color', 'rgb(106, 83, 157)');
$(this).css('border', '1px solid gray');
$(this).css('color', 'white');
$(this).css('font-weight', 'bold');
$(this).css('border-radius', '5px');
//andrews//////////////////////////////
$(this).attr('class', 'btn CONCLUIDO_VENCIDO');
var estate = "CONCLUIDO_VENCIDO";
var codigo = $(this).val();
var antigoestado = "NAO_ERA_STAND_BY"; //ESSA VARIÁVEL FOI CRIADA SÓ PARA A FUNÇÃO DE MUDAR STANDY_BY PARA CONCLUÍDO FUNCIONAR. ELA NÃOO TEM VALOR AQUI
var criar = criarAtividade(codigo);
var alterar = alterarStatus(estate, codigo, antigoestado);
});
//CÓDIGO PARA QUANDO CLICAR NO BOTÃO 'STANDY BY DA COLUNA', ENTÃO ALTERAR O STATUS DA ATIVIDADE PARA STANDY_BY
$(document).on("click", ".stand-by-coluna", function(e) {
e.preventDefault();
var tipo_ativ = 'STAND_BY'; /*$(this).attr('class')*/
//andrews//////////////////////////////
$(this).css('background-color', '#424242');
$(this).css('border', '1px solid gray');
$(this).css('color', 'white');
$(this).css('font-weight', 'bold');
$(this).css('border-radius', '5px');
//andrews//////////////////////////////
var codigo_emp = $(this).attr('id');
var cod_emp = $(this).val();
$("tr." + codigo_emp + " button.colocarstandby").html("STAND_BY");
$("tr." + codigo_emp + " button.colocarstandby").css('background-color', 'black');
$("tr." + codigo_emp + " button.colocarstandby").attr('class', 'btn STAND_BY');
//CHAMANDO FUNÇÃO QUE UTILIZA O AJAX PARA ALTERAR O STATUS PARA STAND_BY NO BANCO DE DADOS
var alterarstandby = transformarStandBy(tipo_ativ, codigo_emp, cod_emp);
tipo_ativ = "";
});
//CÓDIGO PARA TRANSFORMAR O BOTÃO STAND BY EM CONCLUIDO
$(document).on("click", ".STAND_BY", function(e) {
e.preventDefault();
$(this).html('CONCLUIDO');
//andrews//////////////////////////////
$(this).css('background-color', 'rgb(86, 137, 73)');
$(this).css('border', '1px solid gray');
$(this).css('color', 'rgb(255, 255, 255)');
$(this).css('font-weight', 'bold');
$(this).css('border-radius', '5px');
//andrews//////////////////////////////
$(this).attr('class', 'btn CONCLUIDO');
var estate = "CONCLUIDO";
var codigo = $(this).val();
var antigoestado = "STAND_BY";
var criar = criarAtividade(codigo);
var alterar = alterarStatus(estate, codigo, antigoestado);
});
}).fail(function() {
}).always(function() {
});
//CÓDIGO PARA QUANDO CLICAR NO BOTÃO 'REABRIR ATIVIDADES', ENTÃO A ATIVIDADE SERÁ REABERTA
$(document).on("click", ".REABRIRATIVIDADE", function(e) {
e.preventDefault();
var elemento = $(this);
var sts = $(this).attr('name');
var codigo_empr = $(this).val();
//PASSAR BOTÃO DE CONCLUIDO PARA INICIADO
if (sts == "CONCLUIDO") {
$("tr." + codigo_empr + " button.reabriratividade").html("INICIADO");
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").css('background-color', 'rgb(236, 200, 70)');
$("tr." + codigo_empr + " button.reabriratividade").css('border', '1px solid gray');
$("tr." + codigo_empr + " button.reabriratividade").css('color', 'royalblue');
$("tr." + codigo_empr + " button.reabriratividade").css('font-weight', 'bold');
$("tr." + codigo_empr + " button.reabriratividade").css('border-radius', '5px');
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").attr('class', 'btn INICIADO REABRIRATIVIDADE');
//Altera o atributo name do elemento
elemento.attr('name', 'INICIADO');
var novo_status = "INICIADO";
var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
}
//PASSAR BOTÃO DE CONCLUIDO_VENCIDO PARA INICIADO_VENCIDO
else if (sts == "CONCLUIDO_VENCIDO") {
$("tr." + codigo_empr + " button.reabriratividade").html("INICIADO_VENCIDO");
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").css('background-color', 'rgb(196, 95, 49)');
$("tr." + codigo_empr + " button.reabriratividade").css('border', '1px solid gray');
$("tr." + codigo_empr + " button.reabriratividade").css('color', 'white');
$("tr." + codigo_empr + " button.reabriratividade").css('font-weight', 'bold');
$("tr." + codigo_empr + " button.reabriratividade").css('border-radius', '5px');
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").attr('class', 'btn INICIADO_VENCIDO REABRIRATIVIDADE');
//Altera o atributo name do elemento
elemento.attr('name', 'INICIADO_VENCIDO');
var novo_status = "INICIADO_VENCIDO";
var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
}
//PASSAR BOTÃO DE INICIADO PARA PENDENTE
else if (sts == "INICIADO") {
$("tr." + codigo_empr + " button.reabriratividade").html("PENDENTE");
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").css('background-color', 'RoyalBlue');
$("tr." + codigo_empr + " button.reabriratividade").css('border', '1px solid gray');
$("tr." + codigo_empr + " button.reabriratividade").css('color', 'white');
$("tr." + codigo_empr + " button.reabriratividade").css('font-weight', 'bold');
$("tr." + codigo_empr + " button.reabriratividade").css('border-radius', '5px');
//andrews//////////////////////////////
$("tr#" + codigo_empr + " button.reabriratividade").attr('class', 'btn PENDENTE REABRIRATIVIDADE');
//Altera o atributo name do elemento
elemento.attr('name', 'PENDENTE');
var novo_status = "PENDENTE";
var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
}
//PASSAR BOTÃO DE INICIADO_VENCIDO PARA VENCIDO
else if (sts == "INICIADO_VENCIDO") {
$("tr." + codigo_empr + " button.reabriratividade").html("VENCIDO");
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").css('background-color', 'rgb(165, 42, 42)');
$("tr." + codigo_empr + " button.reabriratividade").css('border', 'px solid gray');
$("tr." + codigo_empr + " button.reabriratividade").css('color', 'white');
$("tr." + codigo_empr + " button.reabriratividade").css('font-weight: bold;', 'bold');
$("tr." + codigo_empr + " button.reabriratividade").css('border-radius', '5px');
//andrews//////////////////////////////
$("tr." + codigo_empr + " button.reabriratividade").attr('class', 'btn VENCIDO REABRIRATIVIDADE');
//Altera o atributo name do elemento
elemento.attr('name', 'VENCIDO');
var novo_status = "VENCIDO";
var reabrir = reabrirAtividade(sts, novo_status, codigo_empr);
}
});
}
// ---------------------------------- FUNÇÕES -------------------------------------------------------//
//Criação da função que altera o dashboard
function update_dashboard() {
$.ajax({
url: "banco/pagina-minhas-tarefas/prencher-dashboard.php",
type: "post",
dataType: "json"
}).done(function(retornodashboard) {
//Aqui atualizamos os H1 do Dashboard com os novos resultados:
$("h1#pendentes").html(retornodashboard.pendentes);
$("h1#iniciados").html(retornodashboard.iniciados);
$("h1#iniciados-vencidos").html(retornodashboard.iniciados_vencidos);
$("h1#vencidos").html(retornodashboard.vencidos);
$("h1#concluidos").html(retornodashboard.concluidos);
$("h1#concluidos-vencidos").html(retornodashboard.concluidos_vencidos);
}).fail(function() {
console.log("Erro ao atualizar");
}).always(function() {
});
}
// FUNÇÃO QUE FAZ O POST DE QUANDO CLICAR NO BOTÃO DE DETALHES, APARECER O DETALHE (do campo da tabela) na DIV id#espaco-detalhes //
function pesquisarDetalhes(dados) {
$.ajax({
type: "POST",
data: {
botao: dados
},
url: "banco/pagina-minhas-tarefas/interface-consulta-comentarios.php",
cache: false,
async: false
}).done(function(retornodobanco) {
var detalhes = "";
var feedback = "";
//Aqui abaixo, preenchemos as divs com os dados vindo da consulta ao arquivo php do AJAX
$.each($.parseJSON(retornodobanco), function(chave, valor) {
if (valor.DETALHES == null) {
info = "Não Possui Observações";
detalhes = "<p>" + info + "</p>";
} else {
detalhes = "<p>" + valor.DETALHES + "</p>";
}
if (valor.FEEDBACK == null) {
info2 = "Não Possui Feedback";
feedback = "<p>" + info2 + "</p>";
} else {
feedback = "<p>" + valor.FEEDBACK + "</p>";
}
});
$('#espaco-detalhes').html(detalhes);
$('#espaco-feedback').html(feedback);
}).fail(function() {
}).always(function() {
});
}
// --------- FUNÇÃO PARA INSERIR OBSERVAÇÕES NO CAMPO DO BANCO DA RESPECTIVA ATIVIDADE SELECIONADA ------------------- //
function inserirDetalhes(parametro) {
$.ajax({
data: parametro.serialize(),
url: "banco/pagina-minhas-tarefas/inserir-observacoes.php",
type: "POST",
cache: false,
}).done(function(data) {
alert(data);
}).fail(function() {
}).always(function() {
});
}
//FUNÇÃO PARA ALTERAR OS STATUS QUANDO CLICAR NOS BOTÕES "STATUS"
function alterarStatus(estate, codigo, antigoestado) {
$.ajax({
url: "banco/pagina-minhas-tarefas/mudarstatus.php",
type: "POST",
data: {
estate: estate,
codigo: codigo,
antigoestado: antigoestado
},
async: false
}).done(function(data) {
}).fail(function() {
}).always(function() {
});
}
//FUNÇÃO PARA CRIAR ATIVIDADE QUANDO CLICAR NO BOTÃO STANDY BY E PASSAR PARA CONCLUÍDO
function criarAtividade(codigo) {
$.ajax({
url: "banco/pagina-minhas-tarefas/criar-atividade.php",
type: "POST",
data: {
codigo: codigo
},
async: false
}).done(function(data) {
}).fail(function() {
}).always(function() {
});
}
//FUNÇÃO PARA A AÇÃO DE TRANSFORMAR O STATUS DA ATIVIDADE EM STAND BY
function transformarStandBy(tipo_ativ, codigo_emp, cod_emp) {
$.ajax({
url: "banco/pagina-minhas-tarefas/tarefa-stand-by.php",
type: "POST",
data: {
tipoatividade: tipo_ativ,
codigo: codigo_emp,
cod: cod_emp
},
async: false
}).done(function(data) {
}).fail(function() {
}).always(function() {
});
}
//FUNÇÃO PARA A AÇÃO QUE OCORRE QUANDO CLICAMOS NO BOTÃO DE REABRIR A ATIVIDADE
function reabrirAtividade(sts, novo_status, codigo_empr) {
$.ajax({
url: "banco/pagina-minhas-tarefas/reabrir-atividades.php",
type: "POST",
data: {
sts: sts,
novo_status: novo_status,
codigo_empr: codigo_empr
},
async: false
}).done(function(data) {
}).fail(function() {
}).always(function() {
});
}
});
O Código está bem extenso. Desculpem, tentei reduzir ao máximo. Desde já, agradeço. Obrigado!