1

Estou com um problema um pouco complexo e espero que vocês consigam me ajudar.

Tenho um código que faz uma consulta (Via AJAX e PHP) e preenche uma tabela com o retorno dessa consulta. Até ai tudo bem. Tudo funciona certinho.

Sendo que um dos que são retornado nessa consulta, é um button que trás o status daquela respectiva atividade daquela linha .

Esses Status podem ser "PENDENTES", "INICIADO", "CONCLUIDO". (E cada status possui uma respectiva cor)

Só que eu fiz um outro código que realiza um evento ao clicar nesse botão (que mostra o status) que é gerado na consulta, então o status é mudado também. Por exemplo. Se o botão possuir o status "PENDENTE", ao clicar nele, o status passa a ser "INICIADO" (É mudado tanto o seu código HTML e também é feito um UPDATE no banco via AJAX e PHP que muda o status na tabela MySQL).

O meu problema é o seguinte: "Quando eu clico no botão na primeira vez, é feito tudo certinho como eu quero. É feito a mudança das cores do botão, do texto do botão e é feito o UPDATE no banco de dados. O problema é quando clico novamente, o botão não muda seu status novamente. Então tenho que atualizar a página com um F5 para que eu possa mudar o status do botão novamente. Só que eu gostaria que eu pudesse fazer isso tudo sem ter que dar refresh na página."

Por exemplo: Se eu clicar no botão "Pendente", ele vira "Iniciado". Porém se logo em seguida em clicar no botão "Iniciado", ele não vira "Concluído". Eu tenho que dar um F5 para conseguir passar de "Iniciado" para "Concluído". Não consigo fazer as duas solicitações na mesma tela sem Refresh

O código está bem complexo, tanto quando a explicação que coloquei aqui. Mas foi a melhor forma que achei pra explicar.

Vou deixar a imagem do sistema aqui e também parte do código.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

//CÓDIGO PARA PREENCHIMENTO DA LISTA COM OS DADOS DA PESQUISA 
	
	$('#formulario-consulta').submit(function(e)
	{			
		e.preventDefault();
		var formulario = $(this);
		var retorno = inserirFormulario(formulario);
	
	});

	function inserirFormulario(dados)
	{
		$.ajax
		({
			//dataType: "json",
			type:"POST",
			data:dados.serialize(),
			url:"banco/pagina-minhas-tarefas/interface-resultado-pesquisa.php",
			
			
			
		}).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);
				
				
				
				atividades += '<tr id="'+ valor.codigo +'">';
				//atividades += '<td>' + valor.codigo + '</td>';
				atividades += '<td>' + valor.COD + '</td>';
				atividades += '<td>' + valor.EMPRESAS + '</td>';
				atividades += '<td>' + valor.TRIBUTACAO + '</td>';
				atividades += '<td>' + valor.TIPO_ATIVIDADE + '</td>';
				atividades += '<td>' + vencimento + '</td>';
				atividades += '<td>' + inicio + '</td>';
				atividades += '<td>' + fim + '</td>';
				//atividades += '<td><button class="btn-warning" value="'+ valor.codigo +'">Detalhes</button></td>';
				
				
				if(valor.STATUS == "INICIADO")
				{
					atividades += '<td><button type="button" class="btn '+ valor.STATUS +'" style="background-color: ForestGreen; color:white; font-weight: bold" value="'+ valor.codigo +'">'+ valor.STATUS +'</button></td>';
				}
				
				else if(valor.STATUS == "CONCLUIDO")
				{
					atividades += '<td><button type="button" class="btn '+ valor.STATUS +'" style="background-color: DodgerBlue; color:white; font-weight: bold" value="'+ valor.codigo +'">'+ valor.STATUS +'</button></td>';
				}
					 				
				
				else if(valor.STATUS == "PENDENTE")
				{
					atividades += '<td><button type="button" class="btn '+ valor.STATUS +'" style="background-color: DarkOrange; color:white; font-weight: bold" value="'+ valor.codigo +'">'+ valor.STATUS +'</button></td>';
				}
				   				
				   				
				atividades += '</tr>';
							
				
			});
			
			$('#registros-atividades').html(atividades);
			
			
			//CÓDIGO PARA QUANDO CLICAR NA LINHA DA TABELA <TR> QUE ESTÁ DENTRO DA <TABLE>
			
			$('#registros-atividades tr').click(function(e)
			{           
				e.preventDefault();
				
				var botao = $(this).attr('id');
				$("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 PARA PREENCHIMENTO DA LISTA COM OS DADOS DA PESQUISA 
	
			$('#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","button#PENDENTE", function(e)
			{      
											
				$(this).html('INICIADO');
				$(this).css('background-color','ForestGreen');
				
				var estate = "INICIADO";
				var codigo = $(this).val();

				
				$.ajax
				({
					url:"banco/pagina-minhas-tarefas/mudarstatus.php",		
					type:"POST",
					data:{estate:estate , codigo:codigo},
					async:false
					
				}).done(function(data)
				{
					
										
					
				}).fail(function()
				{
					
					
				});					
				
			});
			
				
			
			//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","button#INICIADO", function(e)
			{           
				
					
				$(this).html('CONCLUIDO');
				$(this).css('background-color','DodgerBlue');
				
				var estate = "CONCLUIDO";
				var codigo = $(this).val();

				
				$.ajax
				({
					url:"banco/pagina-minhas-tarefas/mudarstatus.php",		
					type:"POST",
					data:{estate:estate , codigo:codigo},
					async:false
					
				}).done(function(data)
				{
						
					
				}).fail(function()
				{
					
					
				}).always(function()
				{
					
					
				});					

				
			});
			
			
			
			
			//CÓDIGO PARA QUANDO CLICAR NO BOTÃO QUE ESTÁ DENTRO DO <TD> DA <TABLE>
			
			$('#registros-atividades tr td button').click(function(e)
			{           
				e.preventDefault();

				var botao = $(this).attr('id');
							

			});
			
			
		}).fail(function()
		{
			
			
		});
		
	}

   


function pesquisarDetalhes(dados)
{
	
	
	$.ajax
	({
				
		type:"POST",
		data:{botao:dados},
		url:"banco/pagina-minhas-tarefas/interface-consulta-comentarios.php",
		async:false
		
	}).done(function(retornodobanco)
	{
		
		var detalhes = "";
		var feedback = "";
		   		
		
		$.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  ------------------- //


function inserirDetalhes(parametro)
{	
	
	$.ajax
	({
		dataType: "html",
		type:"POST",
		data:parametro.serialize(),
		url:"banco/pagina-minhas-tarefas/inserir-observacoes.php",
		
		
		
	}).done(function(data)
	{
		alert(data);
		
		
	}).fail(function()
	{
		
		
	}).always(function()
	{
		
		
	});
		
		
	
}
?php
	
	
	//CHAMANDO O ARQUIVO DE CONEXÃO COM O BANCO DE DADOS
	require_once("banco/conexao/conexao-com-banco.php"); 

   	  
	$user = $_SESSION["nome"];
	
?>


<?php
	//Consultas ao banco de dados
	require_once("banco/pagina-minhas-tarefas/interface-consulta-banco.php"); // CHAMANDO ARQUIVO DE CONSULTA AO BANCO PARA PREENCHER OS CAMPOS "AUTOMATICAMENTE" DO FORMULÁRIO DE PESQUISA COM INFORMAÇÕES DO USUÁRIO

?>

<?php
	
	
	require_once("banco/pagina-minhas-tarefas/prencher-dashboard.php"); 

?>

<!DOCTYPE html>

<html>
<head>
		<title>Sistema - JCA</title>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=devide-width, initial-scale=1">
          						
		<link href="_css/pagina-minhas-tarefas/estilo-minhas-tarefas.css" rel="stylesheet"> <!-- ARQUIVO CSS DESTA PÁGINA -->
		<link href="_css/menu/estilo-menus.css" rel="stylesheet"> <!-- ARQUIVO CSS DESTA PÁGINA -->
		<link href="_bootstrap4.1.1/css/bootstrap.min.css" rel="stylesheet"> <!-- ARQUIVO CSS DO BOOTSTRAP -->
		

						
		
</head>


<body>		
			<?php
			
				require_once("dashboard/menus.php");
			
			?>
			
				
		<div class="container-fluid">
			
							
			
			<div class="row" id="row-resultados-dashboard">
				
				<div class="col-lg-10 col-lg-offset-2" id="resultados-dashboard">
					
					<div class="col-lg-2 .relatorios" id="resultados-pendentes">
						
						<?php
							while($linha_pendentes = mysqli_fetch_assoc($lista_pendentes))
							{
						?>	
							<h1>	
								<?php echo $linha_pendentes['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
							
						
						<p style="font-size: 90%">Pendentes</p>
					</div>
					
					<div class="col-lg-2 .relatorios" id="resultados-iniciados">
						<?php
							while($linha_iniciados = mysqli_fetch_assoc($lista_iniciados))
							{
						?>	
							<h1>	
								<?php echo $linha_iniciados['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						<p style="font-size: 90%">Em Andamento</p>
					</div>
					
					<div class="col-lg-2 .relatorios" id="resultados-iniciados-vencidos">
						<?php
							while($linha_iniciados_vencidos = mysqli_fetch_assoc($lista_iniciados_vencidos))
							{
						?>	
							<h1>	
								<?php echo $linha_iniciados_vencidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						<p style="font-size: 80%">Em Andamento / Fora do Prazo</p>
					</div>
					
					<div class="col-lg-2 .relatorios" id="resultados-vencidos">
						<?php
							while($linha_vencidos = mysqli_fetch_assoc($lista_vencidos))
							{
						?>	
							<h1>	
								<?php echo $linha_vencidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						<p style="font-size: 90%">Fora do Prazo</p>
					</div>
					
					<div class="col-lg-2 .relatorios" id="resultados-concluidos">
						<?php
							while($linha_concluidos = mysqli_fetch_assoc($lista_concluidos))
							{
						?>	
							<h1>	
								<?php echo $linha_concluidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						<p style="font-size: 90%">Concluidos</p>
					</div>
					
					<div class="col-lg-2 .relatorios" id="resultados-concluidos-vencidos">
						<?php
							while($linha_concluidos_vencidos = mysqli_fetch_assoc($lista_concluidos_vencidos))
							{
						?>	
							<h1>	
								<?php echo $linha_concluidos_vencidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						<p style="font-size: 85%">Concluidos Fora do Prazo</p>
					</div>
					
				</div>
				
			</div>
			
			<div class="row" id="row-pesquisa">
				
				<!-- INÍCIO DA DIV COM O FORMULÁRIO DE PESQUISA -->
				
				<div class="col-lg-12" id="pesquisa">
				
					<form id="formulario-consulta"> <!-- FORMULÁRIO DE PESQUISA -->
						<div class="form-inline">			
						
								<div class="row">
								
									<div class="col-lg-10 col-lg-offset-2">
										
										<div class="col-lg-4 form-group">
											<h5>Filtrar:</h5>
											<div class="radio">
												<select name="prioridade" id="prioridade" class="input-sm form-control">
													<option  value="Todos" selected>TODOS</option>
													<option  value="Comum">COMUM</option>
													<option  value="Extra">EXTRA</option>
													<option  value="Urgente">URGENTE</option>
												</select>
											</div>
										</div>
										
										<div class="col-lg-2 form-group">
											<h5>Filtrar por data de:</h5>
											<div class="radio">
												<select name="data" id="data" class="input-sm form-control">
													<option  value="inicio">INÍCIO</option>
													<option  value="finalizacao">FINALIZAÇÃO</option>
													<option  value="vencimento" selected>VENCIMENTO</option>
												</select>
											</div>
																																		
										</div>
										
										<div class="col-lg-6 form-group">
											<h5>Filtrar por período:</h5>
											De: <input type="date" name="dataInicial" id="dataInicial" class="input-sm form-control" style="width:40%;">
											Até: <input type="date" name="dataFinal" id="dataFinal" class="input-sm form-control" style="width:40%;">
																																								
										</div>	
									</div>
								</div>

							
							<div class="row">
								
								<div class="col-lg-10 col-lg-offset-2">
										
									<div class="">
									
										<div class="col-lg-1 form-group">
											<div class="radio">
												<h5>COD</h5>
												<select name="cod" id="cod" class="input-sm form-control">
												<option></option>
												<?php
													while($linha_cod = mysqli_fetch_assoc($lista_cod))
													{
												?>	
													<option id="<?php echo $linha_cod['EMPRESAS'];?>" value="<?php echo $linha_cod["COD"];?>">	
														<?php echo $linha_cod["COD"]; ?>
													</option>

												<?php
													}
												?>
												</select>
											</div>
										</div>	
										
										<div class="col-lg-3 form-group">
											<div class="radio">
												<h5>Empresa</h5>
												<select name="empresas" id="empresas" class="input-sm form-control" style="width: 100%">
												<option></option>
													<?php
													while($linha_empresas = mysqli_fetch_assoc($lista_empresas))
													{
													?>	
														<option id="<?php echo $linha_empresas['COD'];?>" value="<?php echo $linha_empresas["EMPRESAS"];?>">	
															<?php echo $linha_empresas["EMPRESAS"];?>
														</option>

													<?php
														}
													?>
												</select>
											</div>
										</div>	
											
										<div class="col-lg-2 form-group">
											<div class="radio">
												<h5>Tributação</h5>
												<select name="tributacao" id="tributacao" class="input-sm form-control">
												<option></option>
												<?php
													while($linha_tributacao = mysqli_fetch_assoc($lista_tributacao))
													{
												?>	
													<option value="<?php echo $linha_tributacao["TRIBUTACAO"];?>">	
														<?php echo $linha_tributacao["TRIBUTACAO"];?>
													</option>

												<?php
													}
												?>
												</select>
											</div>
										</div>
										
										<div class="col-lg-2 form-group">
											<div class="radio">
												<h5>Atividade</h5>
												<select name="atividade" id="atividade" class="input-sm form-control">
												<option></option>
													<?php
														while($linha_atividade = mysqli_fetch_assoc($lista_atividade))
														{
													?>	
													<option value="<?php echo $linha_atividade["TIPO_ATIVIDADE"];?>">	
														<?php echo $linha_atividade["TIPO_ATIVIDADE"]; ?>
													</option>

													<?php
														}
													?>
												</select>
											</div>
										</div>
										
										<div class="col-lg-1 col-lg-offset-1 form-group">
											<div class="radio">
												<h5>Status</h5>
												<select name="status" id="status" class="input-sm form-control">
												<option></option>
													<?php
														while($linha_status = mysqli_fetch_assoc($lista_status))
														{
													?>	
													<option value="<?php echo $linha_status["STATUS"];?>">	
														<?php echo $linha_status["STATUS"]; ?>
													</option>

													<?php
														}
													?>
												</select>
											</div>
										</div>
										
										<div class="col-lg-1 col-lg-offset-1 form-group">
											<h5>Pesquisar</h5>
											<input name="enviar" id="enviar" class="btn btn-sm btn-primary btn-block" type="submit" value="Buscar">
											
										</div>
																				
									</div>
								</div>														
							</div>
						</div>
					</form>
				</div>	
				
			</div>			
						
			
						
			<div class="row" id="row-resultado-pesquisa">
				
				<!-- DIV QUE EXIBE O RESULTADO DA PESQUISA DO FORMULÁRIO -->
				
				<div class="col-lg-10 col-lg-offset-2" id="resultado-pesquisa">
										
					
					<!-- DIV QUE EXIBE AS INFORMAÇÕES DE RETORNO DA CONSULTA -->
					
					<div class="col-lg-12" id="exibicao">
						
						<!-- TABELA QUE EXIBE DINAMICAMENTE COM O PHP OS RESULTADOS DA CONSULTA AO BANCO -->
						
						<table class="table table-bordered table-condensed table-hover" id="resultado-exibicao">
							
							<thead class="">
								<tr><!--<th>Código</th>--><th>COD</th><th>EMPRESA</th><th>TRIBUTAÇÃO</th><th>TIPO DE ATIVIDADE</th><th>DT.VENC</th><th>DT.INÍCIO</th><th>DT.FIM</th><th>STATUS</th><!--<th>DETALHES</th>--></tr>
							</thead>
							
							<tbody id="registros-atividades">
								
								
								
							</tbody>
							
							
						
						</table>
												
						
					</div>
					
					
				</div>
				
			</div>
			
			<!-- DIV PARA EXIBIÇÃO DO RETORNO DA CONSULTA DOS CAMPOS DETALHES E FEEDBACK -->
			
			
				<!-- DIV COM OS BOTÕES QUE EXECUTAM AÇÕES NO BANCO -->
				
				<div class="col-lg-10 col-lg-offset-2" id="botoes-detalhes-feedback">
								
					<a class="btn btn-md btn-primary" href="#" data-toggle="modal" data-target="#modal-observacoes">Inserir Observações</a></button>
					<a class="btn btn-md btn-success" href="#" >Reabrir Atividades</a></button>
					<!--<button class="btn btn-md btn-danger"><a href="#" data-toggle="modal" data-target="#modal-reabrir-atividades">Sem Movimento/Arquivo</a></button>-->
					
				</div>
				
				
				
				<div class="modal" tabindex="-1" id="modal-observacoes">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header bg-success">
								<button class="close"
										aria-label="close"
										data-dismiss="modal">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">Inserir Observações na Atividade</h4>
							</div>
							
							<div class="modal-body bg-success">
															
								<form id="inserir-observacoes"> 
									
									<div class="form-group col-lg-12" style="font-size: 120%">
										<label for="observacoes-modal">Observações - Máximo de 500 caracteres</label>
										<textarea class="form-control" name="observacoes-modal" id="observacoes-modal" style="resize: none" rows="4" maxlength="500" required></textarea>
									</div>
									
									<input type="text" name="codigo-modal-observacoes" id="codigo-modal-observacoes">
									<input type="submit" class="btn btn-primary" name="enviar-modal-observacoes" id="enviar-modal-observacoes" value="Inserir">
																
									
								</form>
								
								<!--
								<div id="confirmacao-inserir-informacoes">
									
									<h4></h4>
									
								</div>
								-->
								
						
							</div>
							
						</div>
					</div>
				</div>
			
				
				
			</div>
			
			
			
		</div>
		
		<!-- SCRIPTS -->
		
		
		<script src="_jquery/jquery-3.2.1.min.js"></script> <!-- ARQUIVO JQUERY -->
		<script src="_bootstrap4.1.1/js/bootstrap.min.js"></script>
		<script src="_scripts/script-pagina-interface/interface-script.js"></script>
		
		
		
		
	
		
</body> <!-- FIM DO BODY -->
</html> <!-- FIM DO HTML -->

<?php
	// Fechando Conexão
	
	mysqli_close($conecta);
	
	
?>


<!-- ARQUIVO MUDARSTATUS.PHP (QUE FAZ A ALTERAÇÃO DO STATUS NO BANCO --> 

<?php

		date_default_timezone_set('America/Sao_Paulo');

		// CHAMANDO O ARQUIVO DE CONEXÃO AO BANCO
		require_once("../conexao/conexao-com-banco.php"); 
		
		//CONSULTA NO BANCO QUE MUDA O STATUS NO BANCO DE DADOS 
		
	
		
			session_start();
		
			$usuario = $_SESSION["nome"];
			
			$estate = $_POST['estate'];
			$codigo = $_POST['codigo'];
			$data = date("Y-m-d H:i:s");
		
			
			if($estate == 'INICIADO')
			{
				$alterarStatus = "UPDATE tbl_atividades set STATUS = '$estate', DT_INICIO = '$data' WHERE codigo = '$codigo'";
			}
			
			
			else if($estate == 'CONCLUIDO')
			{
				$alterarStatus = "UPDATE tbl_atividades set STATUS = '$estate', DT_FIM = '$data' WHERE codigo = '$codigo'";
			}
			  			
			
			
			$resultado_update = mysqli_query($conecta, $alterarStatus) or die("ERRO na conexão com banco de dados");
			
		
		
			unset($_SESSION);
	?>
  
  
  
  
  <!-- ARQUIVO INTERFACE-RESULTADO-PESQUISA.PHP (REALIZA A CONSULTA E O PREENCHIMENTO DA TABELA --> 
  
 <?php 

	require_once("../conexao/conexao-com-banco.php"); // CHAMANDO O ARQUIVO DE CONEXÃO AO BANCO

	    		
	
	session_start();	
	
			
			//PREENCHE AS VARIÁVEIS COM OS DADOS VINDOS DOS CAMPOS DO FORMULÁRIO
			$pegaropcao   = $_POST["prioridade"];
			$tipodedata = $_POST["data"];
			$dataInicial = !empty($_POST["dataInicial"]) ? $_POST["dataInicial"] : null;
			$dataFinal  = !empty($_POST["dataFinal"]) ? $_POST["dataFinal"] : null;
			$cod = $_POST["cod"];
			$empresas   = !empty($_POST["empresas"]) ? $_POST["empresas"] : "";
			$tributacao = !empty($_POST["tributacao"]) ? $_POST["tributacao"] : "";
			$atividade  = !empty($_POST["atividade"]) ? $_POST["atividade"] : "";
			
			
			$status = $_POST["status"];
			$responsavel = $_SESSION["nome"];
			
				
			
			//IF PARA VERIFICAR POR QUAL TIPO DE DATA O BANCO IRÁ FILTRAR 
						
			if (!is_null($dataInicial) AND !is_null($dataFinal))
			{
				
				
				
				if($tipodedata == "vencimento")
				{
					$variavel = " AND DT_VENCIMENTO BETWEEN '$dataInicial' AND '$dataFinal' ORDER BY DT_VENCIMENTO";	
				}
				else if ($tipodedata == "finalizacao")
				{
					$variavel = " AND DT_FIM BETWEEN  '$dataInicial' AND '$dataFinal' ORDER BY DT_FIM";
				}
				else if($tipodedata == "inicio")
				{
					$variavel = " AND DT_INICIO BETWEEN '$dataInicial' AND '$dataFinal' ORDER BY DT_INICIO";
				}
				
			}
		
			else if (is_null($dataInicial) AND is_null($dataFinal))
			{	
				
				$variavel = " ORDER BY DT_VENCIMENTO asc";
			}			
			
			
			
			//REALIZA A CONSULTA NO BANCO DE DADOS COM OS DADOS VINDOS DO FORMULÁRIO
			
			if($status == "CONCLUIDO_VENCIDO" OR $status == "INICIADO_VENCIDO" OR $status == "VENCIDO")
			{
				
			$pesquisar    = "SELECT COD, EMPRESAS, TRIBUTACAO, TIPO_ATIVIDADE, STATUS, DETALHES, FEEDBACK, DT_VENCIMENTO, DT_INICIO, DT_FIM, codigo FROM tbl_atividades";
			$pesquisar    .= " WHERE COD like '%$cod' AND EMPRESAS like '%$empresas' AND TRIBUTACAO like '%$tributacao' AND TIPO_ATIVIDADE like '%$atividade' AND RESPONSAVEL = '$responsavel' AND STATUS = '$status' $tipodeatividade $variavel";
			
			}
			
			else 
			{
				
			$pesquisar    = "SELECT COD, EMPRESAS, TRIBUTACAO, TIPO_ATIVIDADE, STATUS, DETALHES, FEEDBACK, DT_VENCIMENTO, DT_INICIO, DT_FIM, codigo FROM tbl_atividades";
			$pesquisar    .= " WHERE COD like '%$cod' AND EMPRESAS like '%$empresas' AND TRIBUTACAO like '%$tributacao' AND TIPO_ATIVIDADE like '%$atividade' AND RESPONSAVEL = '$responsavel' AND STATUS like '%$status' $tipodeatividade $variavel";
			
			}
			
			
			
			
			$operacao_consulta = mysqli_query($conecta, $pesquisar) or die("Erro na conexão com banco de dados");	
			
			
			
				$retorno = array();
				while($linha = mysqli_fetch_object($operacao_consulta))
				{				
						
					$retorno[] = $linha;
							
				} 	
				
				
				echo json_encode($retorno);
				
					
		
?>

Sei que vai ser muito difícil me ajudarem, pois o problema é muito particular e complexo. Enxuguei bastante o código para ele caber aqui no Stake. Mas desde já, agradeço. Obrigado!

6
  • Até onde vi do seu código, todos os seus botões que tem o mesmo status mantém o mesmo ID. Utilize ID único, caso precise "generalizar" o evento dos botões passe esse seletor como classe ou o evento onclick. E também acho que dava pra deixar esse código mais enxuto com o que realmente é pertinente, ou melhor identado
    – JrD
    Commented 26/03/2019 às 18:00
  • Um teste rápido... vá ao topo da listagem e clique no segundo elemento "pendente" e olhe se algum vai alterar.
    – JrD
    Commented 26/03/2019 às 18:02
  • Já fiz coisa parecida aqui e me parece muito fácil, na real o ideal seria que após a execução do ajax a página fosse atualizada aí mostraria a alteração ao vivo Commented 26/03/2019 às 18:03
  • JrD, obrigado. Na correria de fazer o código, acabei me esquecendo disso. Já corrigi e transformei todos os ID's em classes. Já fiz esse teste de clicar em um elemento, mas realmente só um é alterado mesmo. Pois fiz essa condição se baseando no código, que é o value do button. Commented 26/03/2019 às 18:19
  • @ViniciusDeJesus, Mas ai no caso da página atualizar, a tabela que foi carregada com resultado de uma pesquisa php, iria desaparecer. A ideia de usar o AJAX é justamente isso, não alterar a página. Commented 26/03/2019 às 18:21

2 Respostas 2

1

Bom, primeiramente recomento que remova os status do id (uma vez que o id de um elemento precisa ser único) e altere ele para classe, assim evita conflito de id's, suas linhas onde são adicionados os botões ficaria mais ou menso assim:

atividades += '<td><button type="button" class="btn '+ valor.STATUS +'" style="background-color: DarkOrange; color:white; font-weight: bold" value="'+ valor.codigo +'">'+ valor.STATUS +'</button></td>';

E o real problema é, ao clicar no botão você está mantendo a mesma classe, gerando assim o mesmo evento sempre que clicado. Você também deve alterar o botão para o próximo estágio após clicado:

$(document).on("click","button.PENDENTE", function(e){                              
    $(this).html('INICIADO');
    $(this).css('background-color','ForestGreen');

    var estate = "INICIADO";
    var codigo = $(this).val();

    $(this).removeClass("PENDENTE"); //remove a classe atual
    $(this).addClass("INICIADO"); //adiciona a classe do próximo estágio

    $.ajax({
        url:"banco/pagina-minhas-tarefas/mudarstatus.php",      
        type:"POST",
        data:{estate:estate , codigo:codigo},
        async:false

    }).done(function(data){
    }).fail(function(){                                 
        });                     
    });
}

fiz o exemplo usando apenas um dos status.

1
  • O JrD me salvou. E foi antes dessa última resposta dele agora, Quando ele comentou para eu alterar a classe dos botões também. Eu só estava alterando o HTML e a cor do botão. Muito obrigado, JrD. Te amo! Commented 26/03/2019 às 18:38
1

Não use id's para pegar o click nos botões. Isso é ruim porque você terá que criar várias id's diferentes para cada botão e torna o seletor do evento do click mais confuso.

O ideal é usar uma classe específica que identifique apenas esses botões, idependentemente do seu status, por exemplo:

<button class="btn btncontrole">CONCLUÍDO</button>
<button class="btn btncontrole">INICIADO</button>

Veja que usei uma classe específica .btncontrole nos botões. A partir dessa classe irei capturar os cliques.

Para pegar o valor do botão clicado, utilize o atributo data-*, que pode ser data-status. Nesse atributo você coloca o valor do botão. Veja:

<button class="btn btncontrole" data-status="CONCLUÍDO">CONCLUÍDO</button>
<button class="btn btncontrole" data-status="INICIADO">INICIADO</button>

No evento que chama o Ajax, você deve pegar esse valor da seguinte forma:

$(document).on("click", ".btncontrole", function(){

   var $this = $(this); // guarda o botão clicado em uma variável
   var estado = $this.data("status"); // status atual do botão
   ...AQUI VC CHAMA DO AJAX E ENVIA O ESTADO DO BOTÃO

});

No retorno do Ajax, você altera o botão como vem fazendo (cores, texto etc...) e altera também o data-status com o novo "estado" do botão, que pode ser PENDENTE, INICIADO ou CONCLUÍDO. Por exemplo:

$this.attr("data-status", "CONCLUÍDO"); //  altera o atributo

Desta forma, sempre que você clicar em qualquer desses botões, irá enviar para o Ajax o valor atual e na resposta do PHP alterar o data-status com o valor correto.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .