Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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
Obs. A requisição ajax NÃO irá funcionar no jsfiddle, mas funcionará perfeitamente no seu código.
>
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
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):
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/UaDsKzm.png&key=73205548724f6b814432f792169ee81f28067ec5e7047f56be5d491d051715f2" alt="UaDsKzm.png" />
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();
});
});
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.