Ajax, sem refresh. E Mostrar tr extra ao clicar em tr na tabela

[numero 1]

Já cacei de tudo que é jeito na internet e não consigo de jeito algum.

 

Aqui coloquei duas dúvidas.

Vamos a primeira: Ajax, sem refresh

 

1

Tenho 1 página que lista uma tabela e insere dados nela.

Queria q ao inserir uma linha nova, ela aparecia na lista logo após a inserção. sem precisar dar F5.

 

Procurei na internet e encontrei uma coisa que parece q está quase lá.

Entendo quase nada de javascript, isso me impede muito nesta área.

Este é o código.

                <form id="cadUsuario" action="" method="post">
                    <label>UF:</label><input type="text" name="uf" id="nome" />
                    <label>Cliente:</label><input type="text" name="cliente"/>
                    <br/><br/>
                    <input type="button" value="Salvar" id="salvar" />
                </form>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        /// Quando usuário clicar em salvar será feito todos os passo abaixo
        $('#salvar').click(function() {

            var dados = $('#cadUsuario').serialize();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'salvar.php',
                sync: true,
                data: dados,
                success: function(response) {
                    location.reload('');
                }
            });

            return false;
        });
</script>

e na página salvar.php, além de resgatar os dados dos formulários e inserir no banco de dados, tem isto

$response = array("success" => true);
echo json_encode($response);

Após eu inserir no banco, e dar F5, a linha nova aparece na lista. Está funcionando legal, só não está atualizando sozinho.

 

 

 

 

Creio q são dúvidas fáceis de resolver, então aproveito e coloco aqui a minha segunda dúvida.

 

2

Já tentei também com alguns códigos fazer um tipo de spoiler na tabela. mas sem sucesso.

Eu recupero uma lista do mysql com o php e gostaria de simplesmente colocar um spoiler ao clicar na tr. show com 1 clique e hide no segundo clique.

 

Eu consegui usar sem ser em uma tabela, com divs. só q como estou recuperando os dados do banco de dados e fazendo uma lista com bastante colunas, estou usando uma tabela.

 

Nem precisa postar o script, só deixar o link de um tutorial, sei lá. é q já estou esgotado.

o código da minha consulta é este:

$qr=mysqli_query($conn,"SELECT * FROM ##### ORDER by user");
	while ($row=mysqli_fetch_array($qr)){
		echo '
		<tr>
		<td>'.$row["uf"].'</td>
		<td>'.$row["user"].'</td>
                </tr>';
        }

Está reduzido e editado.

[Gavaldão 14]

Olá não sei se vai t ajudar essa ideia.

Eu tenho um formulário cadastro de usuários com campos para usuário ...etc. e botão enviar.

Abaixo tenho uma div que carrega um outro formulário (tabela) que me mostra os usuários cadastrados

no banco.

Uso a função abrir página sem refresh, para carregar a div clicando no botão atualizar após eu enviar.

Como você disse que com div já conseguiu.

Fica ai a ideia.

[Rafael Sirotheau 43]

1

 

Você precisa fazer o .append() das informações quando o ajax retornar como success==true.

 

2

 

Existem várias formas de fazer isso. A minha preferida é adicionar/remover (.toggleClass) uma classe do elemento pai. Esta classe será a responsavel por exibir/esconder a td



http://jsfiddle.net/h3qdnu6j/


Obs. A requisição ajax NÃO irá funcionar no jsfiddle, mas funcionará perfeitamente no seu código.

[numero 1]

Olá não sei se vai t ajudar essa ideia.

Eu tenho um formulário cadastro de usuários com campos para usuário ...etc. e botão enviar.

Abaixo tenho uma div que carrega um outro formulário (tabela) que me mostra os usuários cadastrados

no banco.

Uso a função abrir página sem refresh, para carregar a div clicando no botão atualizar após eu enviar.

Como você disse que com div já conseguiu.

Fica ai a ideia.

eu acabei de fazer isso, kkkkkkkk.

 

tenho uma função q abre a tabela json

e uma q abre o cadastrar e cadastra com jquery

 

dupliquei a função tabela json para adicionando .click qnd clicar no botão enviar do formulário.

 

não sei se é gambiarra, mas está dando certo

1

 

Você precisa fazer o .append() das informações quando o ajax retornar como success==true.

 

2

 

Existem várias formas de fazer isso. A minha preferida é adicionar/remover (.toggleClass) uma classe do elemento pai. Esta classe será a responsavel por exibir/esconder a td

 

 

 

http://jsfiddle.net/h3qdnu6j/

 

 

Obs. A requisição ajax NÃO irá funcionar no jsfiddle, mas funcionará perfeitamente no seu código.

 

Acabei mudando o meu código nesse meio tempo.

 

Hoje eu crio uma página php com a tabela em formato json_encode

E na página index eu requisito ela. Daí é só jogar esses dados na tag pelo id.

$(function (){
    $.ajax({                                      
      url: "api.php",                  
      data: "",                        
      dataType: "json",                
      success: function(data){
	// vamos gerar um html e guardar nesta variável
				var html = "";
        // executo este laço para acessar os itens do objeto javaScript
            for($i=0; $i < data.length; $i++){
                html += '<tr class="find"'+data[$i].id+'">'
                html += "<td style='text-align:center'>"+data[$i].uf+"</td>"
        $('#output').html(html);
      } 
   });
});

já resolvi esse problema. vlw

 

 

Hide/show---

Entendi como funciona o seu código do toggle. Tentei faze-lo funcionar de td:last-child para tr. sem sucesso

Fiz aqui no jsfiddle como seria: http://jsfiddle.net/h3qdnu6j/1/

 

Eu acabei conseguindo de uma outra forma, olha só (tentei fazer o jsfiddle, mas por ter php e style inline não deu certo):

Aqui eu atribuo a class data-prod-cat="ID" com o id em php da row

e na tr q quero esconder eu uso a class cat com o id da row

e vem com a função, q você deve entender melhor

$(document).ready(function(){
		$(".toggler").click(function(e){
			e.preventDefault();
			$('.cat'+$(this).attr('data-prod-cat')).toggle();
		});
});