Ola
Estou tendo um problema para carregar um modal, com os dados do banco utilizando mysql, será que alguém poderia me dar alguma orientação do que eu estou fazendo de errado, segue o código abaixo
Solucionado
Ola
Estou tendo um problema para carregar um modal, com os dados do banco utilizando mysql, será que alguém poderia me dar alguma orientação do que eu estou fazendo de errado, segue o código abaixo
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->
<?php
include_once("db_connect.php");
?>
<title>Ajax</title>
<script type="text/javascript" src="script/ajaxData.js"></script>
</head>
<body class="">
<div role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">AJAX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" style="min-height:500px;">
<div class=''>
</div>
<div class="container">
<h2>Exemplo Ajax Mysql</h2>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Detalhes</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT idUsuario, nome, login, nivel FROM usuario LIMIT 5";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td><?php echo $rows["nome"]; ?></td>
<td><button data-toggle="modal" data-target="#emp-modal" data-id="<?php echo $rows["idUsuario"]; ?>" id="getEmployee" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-eye-open"></i> Detalhes</button></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div id="emp-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">*</button>
<h4 class="modal-title">
<i class="glyphicon glyphicon-user"></i> Detalhes
</h4>
</div>
<div class="modal-body">
<div id="employee_data-loader" style="display: none; text-align: center;">
<img src="ajax-loader.gif">
</div>
<div id="employee-detail">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>ID</th>
<td id="idUsuario"></td>
</tr>
<tr>
<th>Nome</th>
<td id="nome"></td>
</tr>
<tr>
<th>Idade</th>
<td id="login"></td>
</tr>
<tr>
<th>Salario</th>
<td id="nivel"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<div class="insert-post-ads1" style="margin-top:20px;">
</div>
</div>
</body>
</html>db_connect.php
<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "realtorio";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>empData.php
<?php
include_once("db_connect.php");
if($_REQUEST['idUsuario']) {
$sql = "SELECT idUsuario, nome, login, nivel FROM usuario WHERE id='".$_REQUEST['idUsuario']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>ajaxData.js
$(document).ready(function(){
$(document).on('click', '#getEmployee', function(e){
e.preventDefault();
var idUsuario = $(this).data('idUsuario');
$('#employee_data-loader').show();
$.ajax({
url: 'empData.php',
type: 'POST',
data: 'idUsuario='+idUsuario,
dataType: 'json',
cache: false
})
.done(function(data){
console.log(data.nome);
$('#employee-detail').hide();
$('#employee-detail').show();
$('#idUsuario').html(data.id);
$('#nome').html(data.nome);
$('#login').html(data.login);
$('#nivel').html(data.nivel);
$('#employee_data-loader').hide();
})
.fail(function(){
$('#employee-detail').html('Erro, Tente Novamente...');
$('#employee_data-loader').hide();
});
});
});
Oi Rodrigo. Você pode ser mais específico sobre o que está acontecendo de errado? Onde está acontecendo o erro? Em que momento ele acontece?
Vendo seu código, o que percebi de errado foi isso:
$.ajax({
url: 'empData.php',
type: 'POST',
data: 'idUsuario='+idUsuario,
dataType: 'json',
cache: false
})Tente trocar por:
$.ajax({
url: 'empData.php',
type: 'POST',
data: {idUsuario: idUsuario},
dataType: 'json',
cache: false
})Mas informe mais detalhes, por favor.
Abraços.
Ola, realizei a alteração e não deu certo, na tela não aparece nenhum erro, mas o sistema não carrega nenhuma informação
Rodrigo, da uma olhada no console do seu navegador. Tem algum erro lá? As vezes seu back-end não retorna nenhum erro na tela mas rolou algum problema com o javascript =)
Troque
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);por
$data = null;
if( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);E quando o Ajax retorna com sucesso, dentro da função done(), antes de qualquer coisa, faça:
data = $.parseJSON(data);Tente essas coisas e veja se funciona corretamente. E veja se existe algum erro de sintaxe, ou algo parecido no console do seu navegador.
Abraços.
Fiz a alteração e não deu certo, olhei o log do navegador, e o mesmo informa que a variável data está indefinida
para fazer esse código, utilizei um tutorial na internet, onde o projeto do tutorial o ajax funciona normalmente
O problema pode estar nas aspas simples da query. Tente tirar:
$sql = "SELECT idUsuario, nome, login, nivel FROM usuario WHERE id=".$_REQUEST['idUsuario']."";Afinal o id é um inteiro, e não precisa de aspas.
O problema estava na passagem do id do html para o Js, onde estava assim:
var empid = $(this).data('idUsuario');e o correto:
var empid = $(this).data('id');