AJAX envio de formulário funciona apenas uma vez

[Bsalvo 0]

Um bom dia a todos!

Estou desenvolvendo uma página de controle de gastos apenas por diversão (que está me tirando do sério :huh: )

Na página existe uma tabela e cada linha tem uma despesa e o custo dessa despesa de janeiro a dezembro.

Estou utilizando um código em Ajax proporcionado pelo William Bruno aqui do fórum para adicionar uma nova despesa a tabela.

jQuery(document).ready(function(){
		jQuery('#despesaAjax').submit(function(){
			var dados = jQuery( this ).serialize();

			jQuery.ajax({
				type: "POST",
				url: "php/cadastrarDespesa.php",
				data: dados,
				success: function( data )
				{
					$("#tableDespesa").load("gastos.php #tableDespesa");
					$("#newDespesa").val('');
				}
			});
			
			return false;
		});
	});

Até ai tudo ocorre muito bem! Consigo adicionar quantas despesas novas eu quiser!

Depois da despesa adicionada posso editar os valores de Janeiro a Dezembro na própria tabela.

<td>{$despesa['nome']}</td>
 <form method='post' action='php/alterarDespesa.php' id='alterTable-$i'>
  <td><input type='text' value='{$despesa['janeiro']}' class='precoTabela' name='{$despesa['id']}-janeiro'></td>
   ";$i++; echo "
   </form>
   <form method='post' action='php/alterarDespesa.php' id='alterTable-$i' >
   <td><input type='text' value='{$despesa['fevereiro']}' class='precoTabela' name='{$despesa['id']}-fevereiro' ></td>
   ";$i++; echo "
   </form> 

isso se repete até dezembro.

Beleza, para que eu consiga editar os valores na tabela sem que a página seja carregada, estou utilizando novamente o código do William

 jQuery(document).ready(function(){
		jQuery('#alterTable-0').submit(function(){
			var alter = jQuery( this ).serialize();

			jQuery.ajax({
				type: "POST",
				url: "php/alterarDespesa.php",
				data: alter,
				success: function( data )
				{
					$("#tableDespesa").load("gastos.php #tableDespesa");
				}
			});
			
			return false;
		});
	}); 

O problema é que eu só consigo alterar o preço apenas 1 vez!! Depois de alterado o preço não consigo mais alterar é como se a função parasse de funcionar, diferentemente da primeira função que adiciona uma nova despesa e funciona todas as vezes.

ps: Caso eu adicione uma nova despesa, a função de alterar o preço não funciona nenhuma vez!

Alguém poderia me ajudar ? Obrigado!

[William Bruno 1501]

opa.. tudo bem cara?

acho que o teu problema está no ID:

jQuery('#alterTable-0').submit(function(){

já que você tem um $i ali.. então o teu seletor deveria refletir isso também.

Em vez de usar ID, use class:

jQuery('.alterTable').submit(function(){

e o html:

<td>{$despesa['nome']}</td>
 <form method='post' action='php/alterarDespesa.php' class='alterTable'>
  <td><input type='text' value='{$despesa['janeiro']}' class='precoTabela' name='{$despesa['id']}-janeiro'></td>
   ";$i++; echo "
   </form>
   <form method='post' action='php/alterarDespesa.php' class='alterTable' >
   <td><input type='text' value='{$despesa['fevereiro']}' class='precoTabela' name='{$despesa['id']}-fevereiro' ></td>
   ";$i++; echo "
   </form> 

esse foi o primeiro "erro" que vi, dai continuamos e procuramos mais coisas.

[Bsalvo 0]

William! Obrigado pela resposta!

Fiz da maneira que você fez, mais o erro persiste. Ali no id eu estava testando o código apenas na primeira célula da tabela, onde o $i valia 0. Por isso #alterTable-0 ^_^ , (esqueci de mencionar isso na pergunta, desculpe).

Mas trocar o uso da id pelo da classe, já me ajudou e abriu minha mente porque dessa forma não preciso gerar id's dinâmicos :D

O erro que continua é que o código altera apenas 1 única vez o dado na tabela. E caso eu tenha adicionado uma nova despesa, a alteração não funciona.

[gabrieldarezzo 255]

O console acusa algum erro?
Da um var_dump no 'php/alterarDespesa.php' e espere a resposta (aba NetWork do Chrome)

[Bsalvo 0]

O console acusa algum erro?

Da um var_dump no 'php/alterarDespesa.php' e espere a resposta (aba NetWork do Chrome)

Bom dia Gabriel!

Nenhum erro é acusado no console, nem no carregamento inicial e nem depois que atualizo algum preço na tabela.

Nem antes e nem depois do var_dump.

Só pra desencargo de consciência envio aqui o conteúdo da página alterarDespesa

<?php

include 'conexao.php';

/* Recebe o nome do array que foi gerado dinamicamente */
$indice = key($_POST);

/* Separa o nome para receber o ID da tabela e a coluna a ser alterada */
$alteracao = explode("-", $indice);

alterarDespesa($conexao,$alteracao,$_POST[$indice]);



?>

E aqui vai o método que é chamado na página alterarDespesa

function alterarDespesa($conexao, $alteracao, $valor)
{
	
	
	
	$sqlEditar = "UPDATE despesas 
					SET {$alteracao[1]} = $valor
					WHERE id = {$alteracao[0]};
					";
	
	mysqli_query($conexao, $sqlEditar);
	
}

Não acredito que o erro esteja em nenhum desses dois códigos, mas como eu disse é só pra desencargo mesmo!

[Bsalvo 0]

Problema resolvido!

Algumas pequenas alterações. Segue abaixo

Função para alterar os preços utilizando Ajax atualizada:

function alterarPreco(id,preco)
	{
			jQuery.ajax({
				type: "POST",
				url: "php/alterarDespesa.php",
				data: 'ind=' + id + '&valor=' + preco,
				success: function( data )
				{
					$("#tableDespesa").load("gastos.php #tableDespesa");
				}
			});	
	}

HMTL atualizado:

<form method='post' action='php/alterarDespesa.php' class='alterTable'>
			<td><input type='text' value='{$despesa['janeiro']}' class='precoTabela' name=
'{$despesa['id']}-janeiro' onBlur='alterarPreco(this.name,this.value)'></td>

Utilizando o onBlur, o método é chamado quado o input perde o foco, dessa forma achei que a tabela fica mais 'intuitiva'. Para evitar erros existe uma função que desabilita o envio de formulário ao clicar no enter.

Página alterarDespesa.php atualizada:

<?php

include 'conexao.php';

/* Recebe o nome do array que foi gerado dinamicamente */

$indice = $_POST['ind'];
$value = $_POST['valor'];

/* Separa o nome para receber o ID da tabela e a coluna a ser alterada */
$alteracao = explode("-", $indice);

	alterarDespesa($conexao,$alteracao,$value);

?>

Obrigado pessoal!