Editar dados MySQL

[Julio Cavallari 3]

Preciso gerar uma página para edição de dados.

Então eu fiz o seguinte.

1. O usuário escolhe qual linha quer editar:

echo '<a id="editar" class="no-decoration" href="javascript:void(0);" onclick="editar_pet(\''.$pet_id.'\',\''.$pet_nome.'\')"><i class="fa fa-fw fa-edit"></i>Editar</a>';

function editar_pet(id,nome){
	
    decisao = confirm('Deseja editar o Pet '+nome);
    if (decisao)
    {
        
        $.ajax({
          url: "http://localhost/server_mvet/editar_pet.php",
          dataType: "text",
          type: 'POST',
          data: {id: id},
          success: function(html){
		  $('#editar_pet').html(html).show();
		  $('#editar').hide();
		  $('#editar_pet').show(); 
          },  
          error: function(){
            alert('Erro ao se conectar')
          }
        });
    }
};

E isso me mostra o fomulário já carregado com os dados originais da linha a ser editada:

<?php
session_start();
require('conexao.php');
$id_pet = $_POST['id'];
$sql_pet = "SELECT * FROM pet WHERE id_pet = ".$id_pet;
$result = mysql_query($sql_pet);
$dados_pet = mysql_fetch_array($result);
echo"<div  class='form-group'>
	<form autocomplete='off' method='Post' class='form-edit-pet'>
		Nome
		<input type='text' placeholder='Nome' value='".$dados_pet['nome_pet']."' required name='nome' class='inputs'>
		Espécie do Animal
		<select id='cmbespecie' name='especie' required class='inputs'>";
		$sql_especie = "SELECT * FROM especie";
		$result_especie = mysql_query($sql_especie);
		while($especie = mysql_fetch_array($result_especie)) 
		{
		echo"<option value=".$especie['id_especie'];
		if($dados_pet['id_especie'] == $especie['id_especie'])
		{
			echo" selected ";
		}
		echo">".$especie['especie']."</option>";
		}
		echo"</select>
		Raça
		<input type='text' placeholder='Raça' value='".$dados_pet['raca']."' required name='raca' class='inputs'>
		<div class='row demo-row'>
			<div class='col-xs-5'>
				Idade
				<input type='number' placeholder='Idade' value='".$dados_pet['idade_pet']."' required name='idade' class='inputs'>
			</div>
			<div class='col-xs-6'>
				 
				<select name='tipo_idade' required class='inputs'>
					<option value='0'";
					if($dados_pet['tipo_idade']=='0')
					{
						echo" selected ";
					}
					echo">Meses</option>
					<option value='1'";
					if($dados_pet['tipo_idade']=='1')
					{
						echo" selected ";
					}
					echo">Anos</option>
				</select>
			</div>
		</div>
		
		Porte
		<select id='cmbporte' required name='porte' class='inputs'>";
		$sql_porte = "SELECT * FROM porte";
		$result_porte = mysql_query($sql_porte);
		while($porte = mysql_fetch_array($result_porte)) 
		{
		echo"<option value=".$porte['id_porte'];
		if($dados_pet['id_porte'] == $porte['id_porte'])
		{
			echo" selected ";
		}
		echo">".$porte['porte_desc']."</option>";
		}
		echo"</select><br>
		<input type='hidden' value='".$id_pet."'
		<div class='row demo-row'>
			<div class='col-xs-6'>
				<button id='fechar' class='btn btn-block btn-lg btn-primary'>Fechar</button>
			</div>
			<div class='col-xs-6'>
				<input type='submit' class='btn btn-block btn-lg btn-primary' value='Salvar' >
			</div>
		</div>
	</form>	
</div>";
?>

Até aqui funciona perfeitamente.

Mas quando o usuário clica no submit e chama a função

$(document).ready(function(){
$(".form-edit-pet").submit(function(){
	$('#loading').show();
		$.ajax({
			url:'http://localhost/server_mvet/update_pet.php',
			type:'post',
			dataType : "text",
			data:$(".form-edit-pet").serialize(),
			success: function(retorno){
				if(retorno == '2')
				{
					alert("Pet editado com sucesso");
				}
				else if(retorno == 1)
				{
					alert("Preencha todos os campos");
				}
                else 
				{
					alert(retorno);
				}
				$('#loading').hide();
			},
			error: function(){
				alert("Não possível se conectar!!");
				$('#loading').hide();
			}
		});
		return false;
	});

});

Nada acontece

[Julio Cavallari 3]

Quando coloco no submit o Ajax nem chama a página update.php

[Julio Cavallari 3]

Quando clico em submit ele me retorna esse erro: Cannot POST /pets.html.

Será que o problema é porque o formulário está sedo gerado inteiro fora do html?

Como estou usando AJAX não coloco 'action' no form.

[William Bruno 1501]

aperta ctrl + shift + j no firefox ou chrome e veja quais erros aparecem no console.

[Julio Cavallari 3]

Esse é problema, não aparece erro no console, quando clico em editar o ajax chama o arquivo "editar_pet.php" e me mostra o formulário corretamente, e quando clico em submit nesse formulário ele só dá um refresh na página

[ckcesar 7]

Troque o seu html -> type='submit'

<div class='col-xs-6'>
                <input type='submit' class='btn btn-block btn-lg btn-primary' value='Salvar' >
            </div>

Por -> type='button'

<div class='col-xs-6'>
                <input type='button' class='btn btn-block btn-lg btn-primary' value='Salvar' >
            </div>

Assim não da refresh na página.

Depois de um alert(retorno); e verifica no console o erro.

[Julio Cavallari 3]

Consegui resolver, criei uma função separa e não chamada no submit. e então usei o event 'OnClick' para chamar a função e funcionou