URL sem refresh

Felipe Paz · 30 de dezembro de 2016

E aí gurizada, beleza? É o seguinte, criei um link gerado dinamicamente pelo banco de dados através do método GET. Quando clicar neste link, quero que abra um modal contendo as informações do banco de dados referente ao link, contudo, ao clicar no link, a página atualiza não permitindo que a apareça o modal. Como faço para pegar o GET da url sem atualizar? Ajax? (se for ajax não entendo bulhufas).

Este é o link gerado:

<a href="index.php?page=estoque&action=show&cod=<?php echo $codigo; ?>" onclick='modalEstoque();' class='showProduto'>

Este é o jquery simples para abrir o modal:

function modalEstoque() {
	$(".fundo_modal").show();
	$(".modal_estoque").slideDown();
}

DiF · 31 de dezembro de 2016

@Felipe Paz Olá, isso que você que fazer somente dá para ser feito com ajax mesmo.

A requisição assíncrona.

Você vai ter que pesquisar sobre o uso do jQuery, a função $.ajax() e seus atributos.

Eu posso deixar um exemplo aqui, mas pode não funcionar se copiar. Ele deve ser usado para estudo e depois tentar implementar no seu código com suas devidas mudanças.

Primeiramente deves importar o jQuery. Eu recomendo usar um CDN online para garantias de que sempre vai ficar no ar o plugin e ele deve ser carregado antes de qualquer outro plugin jQuery existente.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Aqui está um código de requisição chamando seu modal, lembre-se de usa-lo para estudar apenas, pois pode ( vai com certeza) ter alterações.

//Quando o documento estiver pronto
$(document).ready(function(){

   //armazena o link que vai clicar
     var link = $(".showProduto");


    //chama a função ON()  
     link.on('click', function(){

          //conjunto de variáveis que será usado
           var pagina = "estoque";
           var acao = "show";
           var codigo  = <?php echo $codigo; ?>;


        //chamada do ajax.
        /*
 
           url: é a página que será requisitada 
           dataType: é o tipo de dado
           method: é método
           data: é os valores que você vai enviar.
           note que:  a sintaxe é:

           data: {name:  valor}
            exemplo:
               um campo input com name="nome"
             será reconhecido como:
              data: {nome: "nome da pessoa"}

        outro exemplo com mais de um dado:
             data: {nome: "Fulano", idade: 34}

             A string que será emitida será:

             nome=Fulano&idade=34  
               

         */
 
           ajax.({
                  url: "index.php",
                  dataType:"html",
                  method:"GET",
                  data: {page: pagina, action: acao, cod: codigo}  
           }).done(function(){
                     $(".fundo_modal").show();
	        $(".modal_estoque").slideDown();
                                           
               });
 
    });
});

Deixei o mais comentado possível das informações mais relevantes

Por outro lado, existe um outro jeito que é mais atual, usando data-attributes do HTML diretamente no elemento desejado.

Vamos ao exemplo:

O seu link:

<a href="#" data-page="estoque" data-action="show" data-cod="10"   class="btn">Link</a>

Veja que ao invés de usar no href, você deixa ele "vazio e passa a usar o data-attribute. Nele você insere os valores que quer passar.

Note que no data-cod, eu coloquei um valor ... só para fins de teste. Mas no seu código você deve substituir o valor 10 pelo seu PHP ficando desta forma:

<a href="#"  data-page="estoque" data-action="show" data-cod="<?php echo $codigo; ?>" class="btn">Ver o produto</a>

No jQuery, você fará parecido com o código inicial, mas com algumas mudanças para ele pegar os valores dos data-attributes desta forma:

$(document).ready(function(){
	var btn = $(".btn");
    var pagina = btn.data("page");
    var acao   = btn.data("action");
    var codigo = btn.data("cod");
    
    btn.on('click', function(e){
        e.preventDefault();
        var dados = pagina+ "\n" + acao+ "\n" + codigo;
        alert(dados); 
    });
});

veja funcionando online: https://jsfiddle.net/oy2ofLq7/

Este é só um exemplo, você vai precisar implentar a função $.ajax() que é a mesma coisa que fiz mais acima

Por exemplo:

btn.on('click', function(e){
        e.preventDefault();
 
       $.ajax({
            url: "index.php",
            dataType: "html",
            method: "GET",
            data: {page: pagina, action: acao, cod: codigo}
       }).done(function(){
           //mostra seu modal aqui 
       }); 
    });

Este é o máximo de detalhes que posso dar e ensinar por enquanto. Pegue estes códigos e estude-os bem! Com certeza vais conseguir fazer o que quer.

Boa sorte

Felipe Paz · 31 de dezembro de 2016

@DiF muito obrigado, vou estudá-los com atenção. To vendo uns tutoriais também sobre ajax mas a maioria dos conteúdos explicativos estão em inglês ou espanhol. Encontrei pouca coisa em português. Mais uma vez, obrigado!

Felipe Paz · 1 de janeiro de 2017

@DiF , tentei um exemplo simples antes que querer implementar no meu sistema e acabar dando errado mas o exemplo que fiz não está funcionando.

Essa é a chamado do jquery ao php:

$(document).ready(function(){
	$(".solicitar").click(function(e){
		e.preventDefault();
		var id = $(this).attr("rel");
		//alert("O id é: " + id);

		$.ajax({
			type: "POST",
			url: "buscar.php";
			data: "id=" + id,
			beforeSend: function(){
				$("#loader").show();
			},
			success: function(resultado){
				$("#loader").hide();
				alert("O telefone é: " + resultado);
			}
		});
	});
});

Essa é a consulta ao banco de dados que deveria pegar o número de id do atributo rel e fazer a pesquisa sql:

<?php
//Faz o loop buscando os dados e populando a tabela
$mysqli = new mysqli("localhost","root","","ajax");
$sql = "SELECT * FROM user";
$query = $mysqli->query($sql);

while($res = $query->fetch_array()) {

	$nome = $res['nome'];
	$id = $res['id'];
	?>
	<tr>
		<td><?php echo $nome;?></td>
		<td><a href="#" rel="<?php echo $id;?>" class="solicitar">Solicitar telefone</a></td>
	</tr>

	<?php
}
//Verifica se há uma variável POST['id'], caso exista, faz a procura no banco de dados pelo telefone e retorna o resultado.

if(isset($_POST['id'])) {
	$id = $_POST['id'];

	echo $id; // Apenas teste de funcionamento

	$mysqli = new mysqli("localhost","root","","ajax");
	$sql = "SELECT telefone FROM user WHERE id = '$id'";
	$query = $mysqli->query($sql);

	$res = $query->fecth_array();

	echo $res;
}

Para de funcionar quando começo a bloco ajax no jquery.

DiF · 1 de janeiro de 2017

@Felipe Paz Pelo que eu vi, tem algumas coisas erradas ali e você está usando uma sintaxe antiga e meio errada ali no meio.

Veja como eu postei a função ajax.

No "data" está errado.

data: "id=" + id

Deve ser

data: id:"id"

Só que ali no id de aspas, você subsitui pela variável do ID.

Ainda na mesma função, o success é obsoleto, deves usar o done().

no php

rel="<?php echo $id;?>

Esta parte não existe. Como disse anteriormente, passe a usar as data-attributes do HTML 5.

desta forma:

<td><a href="#" data-id="<?php echo $id;?>" class="solicitar">Solicitar telefone</a></td>

E para pegar o valor do ID com o jQuery você faz:

var id = $(".solicitar").data("id");

Outra pergunta, você esta fazendo isso tudo no mesmo arquivo? explico.

a parte do jquery no mesmo arquivo que a parte do php?

Acostume-se a separar as coisas para diminuir a chance de erros.

Eu substituiria a função de click por ON().

Enfim, acho que antes de prosseguir, você deveria usar a sintaxe procedural do php, sem ser orientada objetos.. até porque de orientada a objetos ali só tem a conexão com o banco dede dados e algumas funções.

Felipe Paz · 1 de janeiro de 2017

@DiF, vou ver de novo este teu código e tentar entender melhor. Estou usando um arquivo para coisa, não utilizo os scripts sejam em php, javascript ou outro no mesmo arquivo.

DiF · 1 de janeiro de 2017

@Felipe Paz Uma dica, faça uma consulta no seu banco antes do script jQuery. porque você precisa do ID.

AAhh, outra coisa que percebi depois que li duas vezes seu código: você está colocando parte da sua tabela dnetro do while, mas está sem o echo.. ele está dentro do php e dentro dele você abre novas tags do php. isso não funciona!

Tem duas formas de fazer:

1)intercale o html com o php mas sempre abrindo e fechando onde deve

2) use o php e imprima em tela usando echo.

O ideal é que você faça o numero 2.

Felipe Paz · 2 de janeiro de 2017

@DiF , to quase lá, mas agora surgiu outra dúvida. Estou fazendo passo a passo e a cada passo faço algum tipo de teste como um alert ou coisa parecida pra ver se o código está conectando corretamente com o arquivo php. O problema é que quando o modal surgiu, os input text do modal deverão ser preenchidos com o array do sql feito com base no id clicado, isto é, no atributo data-cod=' '. Como eu recupero estes dados do php, repasso ao jquery para poder popular os input? No php puro consigo fazer tranquilamente, claro, minha modal não aparece, tenho que criar um span só para fazer a chamada da modal já com os campos preenchidos pelo banco de dados.

Código do jquery

$(document).ready(function(){
	$(".tabela_estoque a").on('click', function(e){
		e.preventDefault();

		var link = $(".link");
		var pagina = link.data("page");
		var acao = link.data("action");
		var codigo = link.data("cod");

		//alert(pagina +" "+ acao+" "+codigo); 

		$.ajax({
			url: "../scripts/tabela_estoque.php",
			dataType: "html",
			method: "GET",
			data: {page: pagina, action: acao, cod: codigo}
		}).done(function(){
			$(".modal_estoque").slideDown();
		});
		return false;
	});
});

E o php é:

<?php
if(isset($_GET['action']) && $_GET['action'] == "show") {
	$mysqli = new mysqli("localhost", "root","","bluesky");
	$sql = "SELECT * FROM produtos";
	$query = $mysqli->query($sql);

	while($res = $query->fetch_array()) {
		$codigo = $res['cod'];
		$produto = $res['produto'];
		$estoque = $res['estoque'];
		$estoque_min = $res['estoque_minimo'];
		$estoque_max = $res['estoque_maximo'];
	}
}

DiF · 2 de janeiro de 2017

@Felipe Paz Vamos como nosso amigo "Jack". Por partes!

Vou tentar ser bem claro e objetivo, para que a leitura não fique massiva!

Em um mesmo projeto você pode fazer quantas consultas quiser na mesma tabela ou em outras para poder fazer determinadas coisas.

Então, primeiro de tudo precisa-se do ID do produto para que seja passado ao PHP.

Mas para isso precisamos consultar na tabela e pegar os ids deles. A partir disso, pode criar o link para cada produto.

Ou por exemplo seleciona-los em um select. Mas não vem ao caso agora, vou recomendar que use como link mesmo, lembrando que vai ter que ter um link para cada produto.. porque senão não tem como passar o valor ID dele.

Com isso vamos primeiro criar nossa lista de produtos com seu link de edição( creio que seja isso que você quer fazer, um modal que tem inputs dentro com os dados preenchidos.. um "editar de dados". ( se eu entendi bem rsrs)

PS: vou escrever o código como EU desenvolvo. Fica a seu critério usa-lo ou modificar para usar do jeito que você programa.

Vamos lá:

Primeiro crio um arquivo php para a conexão com o BD chamamos de conexao.php

PS2: usuario e senha e nome do banco de dados é genérico, é só para exemplificar

<?php
    $conexao = mysqli_connect("localhost", "coderdif", "co1der2dif3", "bancodeDados");
?>

Com a nossa conexão agora criamos a parte que lista primeiro, vamos chamar de estoque.php

<table>
      <tr>
           <th>Produto</th>
           <th>Editar</th>
           <th>Apagar</th>
      </tr>
      <tr>
          <?php
               include 'conexao.php';
               
               $lista = mysqli_query($conexao, "SELECT nomeProduto, id FROM produtos");
               while($produto = mysqli_fetch_object($lista)):
                    echo "
                          <tr>  
                            <td> $produto->nomeProduto</td>
                            <td><a href='#' data-id='$produto->id' class='edit'><img src='img/editar.png'/></a></td>
                            <td><a href='#' data-id='$produto->id' class='del'><img src='img/Delete24.gif'/></a></td>
                          </tr>";
              endwhile;
   </table>  
     
  <div class="modal">
      <div class="top"><p>Clique para fechar</p></div>
      <div class="interno"></div> 
  </div>

Este é a página que vai listar o estoque.

Agora vamos criar nosso arquivo javascript do funcionamento do botão de editar. Vamos chamar de scriptsJS.js

$(document).ready(function(){
    //Var
    var edit  = $(".edit");
    var modal = $(".modal");
    var close = $(".close");
    var mask  = $("#mask");
    
    //Chama o evento de click  no ícone editar
    edit.on('click', function(e){
        e.preventDefault();    
        
           //armazena o valor do data-attribute
           var idProduto = $(this).data("id");
           
           //armazena a largura e a altura da tela
           var maskHeight = $(document).height();
           var maskWidth = $(window).width();

            //Define largura e altura do div#mask iguais ás dimensões da tela
           mask.css({'width':maskWidth,'height':maskHeight});
            
           //efeito de transição
           mask.fadeIn(1000);
           mask.fadeTo("slow",1);
           
           //Abre o modal 
           modal.slideDown("fast", function() {
              //insere o valor dentro do div class .interno
              /*
                a função html() é a mesma do que 
                document. write();
                Então é ali que você vai inserir
                os dados vindo do banco de dados
                usando a função $.ajax().
              */
              
             $.ajax({
                 url: "processaDados.php",
                 dataType: "html",
                 method: "GET",
                 data: {id : idProduto}
             }).done(function(retorno));
                 $(".interno").html(retorno); 
           });
    });
    
    //ação do botão fechar. 
    close.on('click', function(e){
        e.preventDefault();
        /* Nesta function do slideUp você pode 
           esconder o div id="mask"
        */
         
         modal.slideUp("slow", function() {
             mask.hide();
         });        
    });

Agora temos que criar outro arquivo php para receber o valor ID passado por GET no data do $.ajax(). Vamos chamar de processaDados.php

<?php
    $id = $_GET["id"];

     include 'conexao.php';
               
     $dados = mysqli_query($conexao, "SELECT * FROM produtos WHERE id = $id");
     while($produto = mysqli_fetch_object($dados)):
             echo " 
                   <form class='edit-form'>
                       <input type='text' name='nome' value='$produto->nome' />
                       <input type='text' name='preco' value='$produto->preco' />
                       <input type='text' name='qtd' value='$produto->quantidade' />
                       <input type='submit' class='btn-salvar' value='Salvar' />
                   </form>";
     endwhile;

Basicamente estamos pegando todos os dados do produto desejado e populando um novo formulário.

Estes valores será passados no jQuery através do parâmetro "retorno" na function do done().

É por aí a coisa. Considere o código ilustrativo. Não foi testado, pode ser que apresente algum errinho e tal.. fiz de cabeça aqui.

Se tiver um tempo eu faço um teste, enquanto isso fique aqui com um exemplo online de todo a parte do código jQuery que abre um modal feito na "unha"

claro que se você quiser pode usar um dos milhares de plugins jQuery para modais existentes!

Felipe Paz · 2 de janeiro de 2017

@DiF , quase la .. ehehehh (mais um pouco tomo ban no forum), a pesquisa sql funcionando perfeitamente. Só que antes, eu havia duas pesquisas no mesmo arquivo php, uma gerando a tabela onde nesta contêm os links dos produtos e mais abaixo tinha a consulta sql pelo ajax. Eu tive que deixar em arquivos separados, a consulta pelo ajax em um arquivo e a tabela dinâmica em outro arquivo. Toda a vez que eu fazia a requisição ajax, ele retornava os dados da tabela dinâmica, o que não era o objetivo. Com a separação dos arquivos, agora retorna o esperado, contudo, algumas classes de máscara como o jquery.mask() (utiliza para formatar inputs com valores de dinheiro) e o button para fechar o modal não funcionam.

(document).ready(function(){

	var link = $(".link");
	var pagina = link.data("page");
	var acao = link.data("action");
	var codigo = link.data("id");

	$(".tabela_estoque table a").on('click', function(e){
		e.preventDefault();

		var idProduto = $(this).data("id");

		$(".modal_estoque").slideDown();

		//alert(pagina +" "+ acao+" "+idProduto); 

		$.ajax({
			url: "../scripts/modal_estoque.php",
			dataType: "html",
			method: "GET",
			data: {page: pagina, action: acao, id: idProduto}
		}).done(function(retorno){
			$(".modal_estoque").html(retorno);
		});
		return false;
	});

	$(".btn_modal_estoque").on('click', function(e){
		e.preventDefault();
		$(".modal_estoque").slideUp();
	});
});

E outra, em formulários onde utilizo o método post, tudo vai ser a mesma coisa apenas trocando get por post?

Felipe Paz · 2 de janeiro de 2017

Este é o script de login e não funciona, achei que seria a mesma coisa que o script que tu me passou mas ele não está fazendo conexão com o arquivo php de autenticação.

$(document).ready(function(){
	$("#btnLogin").on('click', function(e){
		e.preventDefault();

		var data = $("#form_login").serialize();
		//alert(data);

		$.ajax({
			url: "controle/autentica.php",
			dataType: "html",
			method: "POST",
			data: {data}
		}).done(function(retorno){

		alert(retorno);
		//$("#usuario").val("");
		//$("#senha").val("");
		/*setTimeout(function(){
			window.location.href='admin';
		}, 3000);*/

		}).fail(function(fail){
			$("#modal_Login").slideDown("slow");
			$("#usuario").val("");
			$("#senha").val("");

			setTimeout(function(){
			$("#modal_Login").slideUp("slow");
			}, 2500);
			});
		});
	});

DiF · 2 de janeiro de 2017

4 horas atrás, Felipe Paz disse:

E outra, em formulários onde utilizo o método post, tudo vai ser a mesma coisa apenas trocando get por po

Sim... sempre praticamente vai ser a mesma coisa.

Como está o conteúdo do arquivo autentica.php?

Felipe Paz · 2 de janeiro de 2017

@DiF assim >>>

<?php


if(isset($_POST['usuario']) && isset($_POST['senha'])) {
	$usuario = $_POST['usuario'];
	$pass = $_POST['senha'];

	$mysqli = new mysqli("localhost", "root", "", "bluesky");

	$sql = "SELECT * FROM colaborador";
	$query = $mysqli->query($sql);

	while($dados = $query->fetch_array()) {
		
		$nome = $dados['nome'];
		$login = $dados['login'];
		$senha = $dados['senha'];
		$perfil = $dados['perfil'];
		$sobrenome = $dados['sobrenome'];

		

		if(($usuario == $login) && ($pass == $senha) && ($perfil == "administrador")) {

			session_start();
			$_SESSION['login'] = $login;
			$_SESSION['senha'] = $senha;
			$_SESSION['nome'] = $nome;
			$_SESSION['sobrenome'] = $sobrenome;
			header("location: ../admin/index.php?page=inicio");

		} elseif(($usuario == $nome) && ($pass == $senha) && ($perfil == "colaborador")) {
			header("location:../colaborador");
		} else {
			header("location:../");
			echo "
			<script>
				modal_login();
			</script>";
		}
	}
	$mysqli->close();
}

Funciona corretamente mas o ajax não consegue acessar ele ou não reconhece, sei lá, sei que pelo ajax não funciona a requisição.

DiF · 2 de janeiro de 2017

@Felipe Paz Sinceramente? Acho que seu código é um pouco "sujo" digamos assim.

Enfim, eu vou deixar aqui um modelo de como EU uso os autenticadore. Este eu sei que funciona pois é meu código

<?php
//a session start deve vir primeiro que tudo
session_start();
	
    //recebe o login e senha dos campos 
	$login = $_POST["login"];
	$senha = $_POST["senha"];

    //adiciona uma / para minimizar o sql injection
	$login_escape = addslashes($login);
	$senha_escape = addslashes($senha);
	
	//este teste de IF verifica se os campos estão vazios
    //Se vazio, apresenta mensagem de erro e não deixa prosseguir
	if (empty($login) or empty($senha)) :
    echo "<script>
          alert('Preencha todos os campos');
          history.go(-1);
          </script>";
    exit;    
  endif;
	
	//inclui a conexão com o banco de dados
	include '../conexao/conexao.php';
	
    //faz a consulta para os dados do usuário em questão
	$sql = "SELECT idAdmin, nome ,login, senha, ultimoacesso FROM admin WHERE login ='$login_escape' AND senha = '$senha_escape' ";
	$dados = mysqli_query($conexao, $sql);
	
    /*coloca o número de linhas encontradas
      SE zero, mostra mensagem de erro
      e não deixa prosseguir
    */
    $num = mysqli_num_rows($dados);
	
	if ($num == 0):
		echo "<script>
				alert('Usuario ou senha Incorreta');
				history.go(-1);
			  </script>";
		exit;
	else :
		
        //parte do else, quer dizer que foi encontrado o usuário
		while($admin = mysqli_fetch_object($dados)):
			$coduser = $admin->idAdmin;
			$nome    = $admin->nome;
			$ultimoacesso = $admin->ultimoacesso; 
		
			
		$_SESSION["codusuario"] = $coduser;
		$_SESSION["nome"] = $nome;
		$_SESSION["login"] = $login;
		$_SESSION['ultimoacesso'] = $ultimoacesso;
		
		//envia para a página restrita
		header ("Location: view/painel.php");
		endwhile;	
	endif;

Baseie-se neste código e tente implementar. Basicamente o que posso dizer é que no seu código, você abre a session dentro de um IF, testa se as variáveis estão "vazias" mas nesse caso o isset verifica se ele não é nulo.. pois nulo é um valor também.

Veja, uso o mysqli_fetch_object() é melhor do que usar como arrays.

pois assim você trata como objeto os dados.

Felipe Paz · 2 de janeiro de 2017

@DiF Bom, resumidamente, troquei o meu php pelo que você sugeriu, mas como não consegui o efeito visual que eu desejava com ajax, coloquei o php direto na página do login, assim, consigo fazer as animações que eu gostaria. Sei que não é o correto e vou continuar estudando pra melhorar isso depois, deixar tudo separado conforme manda o manual. Agradeço a atenção e a ajuda que foram imensas e com certeza, no decorrer do desenvolvimento do meu sistema farei mais perguntas aqui.

Felipe Paz · 3 de janeiro de 2017

@DiF mais uma dúvida ... eheheh, enfim, consegui implementar os códigos que tu me passou e estão funcionando como deveria, contudo, ao fazer um update ou delete no form de produtos, eu quero que a tabela de estoque também seja atualizada. No momento, após a ação do ajax, eu preciso carregar a página para a planilha atualizar. Como eu faria essa chamada?

Este é o código de update:

function update_produto(){
		//alert("Funcionando");

		var cod = $("#codigo").val();
		var est = $("#estoque").val();
		var est_min = $("#estoque_min").val();
		var est_max = $("#estoque_max").val();
		var abc = $("#curva_abc").val();
		var compra = $("#preco_de_compra").val();
		var venda = $("#preco_de_venda").val();
		var lucro_total = $("#lucro").val();
		var comissao_vendedora = $("#comissao").val();

		$("#acao").text("alteração da empresa");
		$(".confirma").fadeIn("fast");
		$("#confirma").on('click', function(){
			$.ajax({
				url: "../scripts/altera_produto.php",
				dataType: "html",
				method: "POST",
				data: {codigo: cod, estoque: est, estoque_min: est_min, estoque_max: est_max, preco_de_compra: compra, preco_de_venda: venda, comissao: comissao_vendedora}
			}).done(function(){
				//alert("Dados alterados com sucesso!");
				$(".fundo_modal").hide();
				$(".modal_estoque").slideUp();
				$(".retorno").text("Dados alterados com sucesso!");
				$(".retorno").slideDown("slow",function(){
					setTimeout(function(){
						$(".retorno").slideUp();
					},2500);
				});
			});
		});

		$("#cancela").on('click', function(){
			$(".confirma").fadeOut();
			$(".fundo_modal").hide();
			$(".modal_estoque").slideUp();
		});
	}

E este o delete:

function excluir_produto(){
		//alert("Funcionando");

		var cod = $("#codigo").val();


		$("#acao").text("exclusão do produto");
		$(".confirma").fadeIn("fast");
		$("#confirma").on('click', function(){
			$.ajax({
				url: "../scripts/excluir_produto.php",
				dataType: "html",
				method: "GET",
				data: {codigo: cod}
			}).done(function(){
				//alert("Dados alterados com sucesso!");
				$(".fundo_modal").hide();
				$(".modal_estoque").slideUp();
				$(".retorno").css("background", "red");
				$(".retorno").text("Dados excluídos com sucesso!");
				$(".retorno").slideDown("slow",function(){
					setTimeout(function(){
						$(".retorno").slideUp();
					},2500);
				});
			});
		});

		$("#cancela").on('click', function(){
			$(".confirma").fadeOut();
			$(".fundo_modal").hide();
			$(".modal_estoque").slideUp();
		});
	}

DiF · 3 de janeiro de 2017

@Felipe Paz Nunca tentei, mas acredito que você possa fazer uma nova chamada ao $.ajax() dentro do done() para fazer uma nova consulta ao banco de dados e fazer a atualização.

adicionado 0 minutos depois

Ou seja, fazer uma requisição ajax SE a primeira requisição for bem sucedida

Felipe Paz · 3 de janeiro de 2017

@DiF , tentei dessa maneira, o ajax até executa a query mas não torna os comandos do done(). Igual, é necessário atualizar a página. Tentei também dar um location.href na mesma pagina mas a tabela não aparece, precisando novamente dar um refresh na página.

adicionado 9 minutos depois

Engembrei aqui e ficou assim, tem o refresh mas as animações que eu queria agora aparecem:

	//alert("Funcionando");

		var cod = $("#codigo").val();


		$("#acao").text("Confirma exclusão do produto?");
		$(".modal_confirma").fadeIn("fast");
		$("#confirma").on('click', function(){
			$.ajax({
				url: "../scripts/excluir_produto.php",
				dataType: "html",
				method: "GET",
				data: {codigo: cod}
			}).done(function(){
				$(".fundo_modal").hide();
				$(".modal_estoque").hide();
				$(".retorno").css("background", "red");
				$(".retorno").text("Dados excluidos com sucesso!");
				$(".retorno").slideDown("fast",function(){
					setTimeout(function(){
						window.location.href='../admin/index.php?page=estoque';
					},400);
				});
			});
				//alert("Dados alterados com sucesso!");
			});

		$("#cancela").on('click', function(){
			$(".confirma").fadeOut();
			$(".fundo_modal").hide();
			$(".modal_estoque").slideUp();
		});
	}

DiF · 3 de janeiro de 2017

@Felipe Paz Não sei se fica bom, mas outra possibilidade é você no php encodar para JSON.

eai no jQuery você acessa os dados retornados dessa nova requisição e usa o jquery para setar os valores na tabela.

Dá trabalho.. mas acho que pode resolver.

Felipe Paz · 3 de janeiro de 2017

@DiF , xiiiiii ... ae complica tudo, agora q to começando a ficar feliz que to conseguindo o retorno pelo ajax, deixa assim com o refresh, quando eu já estiver um pouquinho melhor com essa manipulação ae passamos para outro nível. Por ora, obrigadão!!

Felipe Paz · 3 de janeiro de 2017

@DiF , olha só, consegui fazer a atualização da tabela assim que o submit é clicado, porém, quando gera de novo a tabela pela segunda requisição ajax, o link contendo o id dos produtos não está setado o preventDefault(), então, ao clicar na primeira vez, o link atualiza a página mas na segunda vez tudo está normal. Por que será?

unction update_produto(){
		//alert("Funcionando");

		var cod = $("#codigo").val();
		var est = $("#estoque").val();
		var est_min = $("#estoque_min").val();
		var est_max = $("#estoque_max").val();
		var abc = $("#curva_abc").val();
		var compra = $("#preco_de_compra").val();
		var venda = $("#preco_de_venda").val();
		var lucro_total = $("#lucro").val();
		var comissao_vendedora = $("#comissao").val();

		$("#acao").text("Confirma alteração do produto?");
		$(".modal_confirma").fadeIn("fast");
		$("#confirma").on('click', function(){
			$.ajax({
				url: "../scripts/altera_produto.php",
				dataType: "html",
				method: "POST",
				data: {codigo: cod, estoque: est, estoque_min: est_min, estoque_max: est_max, preco_de_compra: compra, preco_de_venda: venda, comissao: comissao_vendedora}
			}).done(function(){
				//alert("Dados alterados com sucesso!");
				$(".fundo_modal").hide();
				$(".modal_estoque").hide();
				$(".retorno").css("background", "green");
				$(".retorno").text("Dados alterados com sucesso!");
				$(".retorno").slideDown("fast",function(){
					setTimeout(function(){
						$(".retorno").slideUp();
					},700);
				});
				$.ajax({
					url: "../scripts/tabela_estoque.php",
					dataType: "html",
							//method: "POST",
							//data: {codigo: cod}
						}).done(function(retorno){
							$(".tabela_estoque table tbody").html(retorno);
							//alert(retorno);
						});	
					});
		});

		$("#cancela").on('click', function(){
			$(".modal_confirma").fadeOut();
			$(".fundo_modal").hide();
			$(".modal_estoque").slideUp();
		});
	}