Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou tentando fazer uma agenda simples, mas estou utilizando o jquery para fazer a busca e ir mostrando os resultados filtrados abaixo em uma tabela, já consegui realizar a busca e retornar os dados de volta ao javascript mas não consigo pegá-los para gera a tabela, no PHP utilizo json_encode, no javascript consigo ver os dados mas não manipula-los. Como utilizar os dados vindo de um array do .post do jquery para gerar uma tabela em javascript ou converter os dados para um array php?
poderia ajudar no meu codigo? não estou consrguindo adaptar ao meu,
o meu esta quase pronto, consigo ver o array no index, consigo pesquidar, só falta ver como pegar as informações isoladas para montar a tabela
<?php
require_once("conexao.php");
?><html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Agenda Telefonica</title>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="bootstrap/dist/js/jquery.js" type="text/javascript"></script>
<script src="bootstrap/dist/js/global.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<br />
<h1 class="text-center">
<span class="glyphicon glyphicon glyphicon-list-alt" aria-hidden="true"></span> Agenda Telefônica
</h1> <br />
<!--***************************************-->
<div id="miniContainer">
<div class="form-group">
<span class="glyphicon glyphicon glyphicon-user" aria-hidden="true"></span>
<a href="cadastrar.php">Novo contato</a>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Pesquisar por nome" autofocus maxlength="40" id="txtBusca" name="txtBusca" />
</div>
<button type="submit" class="btn btn-default" id="btnBusca">Pesquisar</button>
</form>
<!--***************************************-->
<!--Lista de contatos-->
<table class="table table-hover" id="lista">
<thead>
<tr class="bg-primary">
<th class="col-md-5">Nome</th>
<th class="col-md-2">Telefone</th>
<th colspan="2" class="col-md-1 text-center">Editar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="footer">
</div>
<script>
$(document).ready(function(){
$("#txtBusca").keyup(function(){
var pesquisa = $(this).val();
$.post("busca.php", {pesquisa : pesquisa}, function(data){
$("tbody").text(data);
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
$("#txtBusca").keyup(function(){
var pesquisa = $(this).val();
$.post("busca.php", {pesquisa : pesquisa}, function(data){
//essa parte aqui que nao consigo, pode estar errado o array.
$("tbody").text("<tr><td>"data.nome_usuario"</td></tr>");
});
});
});
<?php
require_once('conexao.php');
$pesquisa = $_POST['pesquisa'];
//$pesquisa = "andre";
$q = "SELECT id_usuario, nome_usuario, tel_usuario FROM usuarios WHERE nome_usuario LIKE '%$pesquisa%' ORDER BY nome_usuario LIMIT 10";
//$q = "SELECT id_usuario, nome_usuario, tel_usuario FROM usuarios WHERE nome_usuario LIKE '%$pesquisa%' ORDER BY nome_usuario LIMIT 10";
$r = mysqli_query($con, $q);
// while ($row = mysqli_fetch_assoc($r)) {
// $dados[] =array(
// 'id' =>$row['id_usuario'] ,
// 'name' =>$row['nome_usuario'],
// 'tel' =>$row['tel_usuario'],
// );
// }
$dados = [];
foreach($r as $result){
$dados[] = array(
'id' =>$result['id_usuario'] ,
'name' =>$result['nome_usuario'],
'tel' =>$result['tel_usuario']
);
}
$r = json_encode($dados);
echo $r;$(document).ready(function(){
$("#txtBusca").keyup(function(){
var pesquisa = $(this).val();
$.post("busca.php", {pesquisa : pesquisa}, function(data){ // <- data é oque voce esta
// enviando para o php
$("tbody").text("<tr><td>"data.nome_usuario"</td></tr>"); // entao aqui voce está // printando oque esta sendo
// enviado e não a consulta
});
});
});Tente assim:
var html_fixed = '<table>'
+ '<thead>'
+ '<tr>'
+ '<th>Nome</th>'
+ '<th>Idade</th>'
+ '<th>Editar</th>'
+ '</tr>'
+ '</thead>';
var html_generate = '';
window.preenchercampos = function(id, nome, telefone){
$('input[name="nome"]').val(nome);
$('input[name="telefone"]').val(telefone);
$('input[type="hidden"]').val(id);
};
window.builTable = function(id,nome, telefone){
return '<tbody>'
+ '<tr>'
+ '<td>'+nome+'</td>'
+ '<td>'+telefone+'</td>'
+ '<td><a data-toggle="modal" data-target="#modal"'
+ 'onclick="preenchercampos(\''+id+'\',\''+nome+'\',\''+telefone+'\);">'
+ 'Editar</a></td>'
+ '</tr>'
+ '</tbody>';
)};
$.post('path_php.php', objeto, function(datas){ // isso é o envio para o php
console.log(data);
var objJSON = $.parseJSON(datas); // isso é o retorno do php
console.log(objJSON); // experimente olhar
$.each(objJSON, function(index, result){
html_generate += buildTable(
result.nome, // nome o indice do objeto que voce passa no php
result.telefone
);
});
html_fixed += html_generate;
html_fixed += '</table>';
$('div').append(html_fixed);
});não consegui, desculpe a ignorância, gostaria que ficasse assim http://imagizer.imageshack.us/a/img909/2551/dAhVG1.png mas so consegui ate aqui http://imageshack.com/a/img538/3190/PvU66P.png
Cara, tente e persista mais! voce ja tem o resultado da consulta em seu javascript... só falta fazer o que esta no meu ultimo exemplo..
Obrigado pela força, vou continuar sim, descobri que o retorno é uma string e não um array por isso não estou conseguindo montar a tabela, poderia fazer uma adaptação para fazer o array com split() mas é muita gambiarra pra pouco resultado, vou tentar de outras formas pra ver se retorna um json ou um array, quando conseguir isso ficara fácil terminar. Obrigado pela ajuda.
[...] faz a consulta trasforma em array ai
espero que ajude esse exemplo!