Atualizar somente tabela ou div com ajax
Boa tarde galera!
Estou com uma dúvida, preciso ativar e desativar um registro com ajax, porém sem refresh. Porque eu uso MENU ACCORDION, aí se atualizar a página, volta no inicio da página, então eu preciso que atualiza essa tabela sem refresh, para não sair do menu ACCORDION. O código já está todo funcionando, eu só preciso dessa parte de atualizar somente a tabela. Alguém poderia me explicar ? Brigado aí galera.
Meu index.php:
<table>
<thead>
<tr style="height:50px">
<td></td>
<td></td>
<td><span style="margin-left:40px; font-size:18px;">Status</span></td>
<td></td>
</tr>
</thead>
<?php while($lista = $resu->fetch(PDO::FETCH_ASSOC)) { ?>
<tr>
<td> <a href="<?php echo $lista['id_instalacao']; ?>" id="<?php echo $lista['id_instalacao']; ?>" class="obsCli">
<img src="[[http://localhost/wordpress/wp-content/themes/onetone/images/images/edit.png](http://localhost/wordpress/wp-content/themes/onetone/images/images/edit.png)](http://localhost/wordpress/wp-content/themes/onetone/images/images/edit.png%5B/url%5D)" title="Visualizar instalação"></a>
</td>
<td>
<span style="margin-left:20px;">
Instalação: <?php echo $lista['nome_cliente']; ?>
</span>
</td>
<td>
<span style="margin-left:20px;">
<?php if ($lista['status'] == 1) { ?>
<span style="color:#006; margin-left:20px;">ATIVADO</span>
<?php } else { ?>
<span style="color:#F00; margin-left:20px;">DESATIVADO</span>
<?php }?>
</span>
</td>
<td>
<span style="margin-left:100px;">
<?php if ($lista['status'] == 1) { ?>
<a href="#" id="<?php echo $lista['id_instalacao']; ?>" class="desativa"><img src="[[http://localhost/wordpress/wp-content/themes/onetone/images/images/ativar.png](http://localhost/wordpress/wp-content/themes/onetone/images/images/ativar.png)](http://localhost/wordpress/wp-content/themes/onetone/images/images/ativar.png%5B/url%5D)" title="Desativar Instalação"></a>
<?php } else { ?>
<a href="#" id="<?php echo $lista['id_instalacao']; ?>" class="ativa"><img src="[[http://localhost/wordpress/wp-content/themes/onetone/images/images/desativar.png](http://localhost/wordpress/wp-content/themes/onetone/images/images/desativar.png)](http://localhost/wordpress/wp-content/themes/onetone/images/images/desativar.png%5B/url%5D)" title="Ativar Instalação"></a>
<?php } ?>
</span>
</td>
</tr>
<?php } ?>
</table> Meu código para ATIVAR e DESATIVAR com AJAX:
$(document).ready(function() {
$('#msg_ativ').hide();
});
$(function() {
$('.ativa').on('click', function(){
$('#msg_ativ').fadeIn();
var id = this.id;
$.ajax({
type: "POST",
url: "[url=[http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php)][http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php)",[/url]
data: {id: id},
success: function( data )
{
$("#ativado").fadeIn(1000);
$("#ativado").html("Ativado!");
$('#msg_ativ').fadeOut(1000);
location.reload("table");
//alert(data);
}
});
return false;
});
});
$(document).ready(function(){
$('.desativa').on('click',function(){
var id1 = this.id;
$.ajax({
type: "POST",
url: "[url=[http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php)][http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php)",[/url]
data: {id1: id1},
success: function( data )
{
$("#desativado").fadeIn(1000);
$("#desativado").html("Desativado!");
location.reload("table");
//alert(data);
}
});
return false;
});
});E a página que eu pego as informações:
<?php
include("conexao.php");$id = $user_ID;
$resu = $pdo->query("SELECT g.id_grupo, g.nome_grupo, g.ID, w.ID FROM cad_grupo g, wp_VzQCxSJv7uL_users w WHERE g.ID = w.ID and
g.ID = $id");
}print "ERRO!:". $e->getMessage() . "<br>";
die();
}
?><html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<script>
$(document).ready(function(){
// Evento change no campo tipo
$("select[name=nome_grupo]").change(function(){
// Exibimos no campo marca antes de concluirmos
$("select[id=clientes]").html('<option value="">Carregando...</option>');
// Exibimos no campo marca antes de selecionamos a marca, serve também em caso function(valor){
$("select[id=clientes]").html(valor);
}
)
})
// Evento change no campo marca
$("select[id=clientes]").change(function(){
// Exibimos no campo modelo antes de concluirmos
$("div[id=id_instalacao]").html('<option value="">Carregando...</option>');
// Passanddo marca por parametro para a pagina ajax-modelo.php
$.post("[url=[http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php)][http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php)",[/url]
{id:$(this).val()},
// Carregamos o resultado acima para o campo modelo
function(valor){
$("div[id=id_instalacao]").html(valor);
}
)
})
})
</script>
</head>
<body>
<div class="alinhar dados_controle">
<form name="listadados" id="listadados" action="">
Grupo: <select name="nome_grupo" id="grupo">
<option value="">Escolha o grupo</option>
<?php while($resut = $resu->fetch(PDO::FETCH_ASSOC)) { ?>
<option value="<?php echo $resut['id_grupo']; ?>"><?php echo $resut['nome_grupo']; ?></option>
<?php } ?>
</select>
<br><br>
Clientes: <select name="nome_cliente" id="clientes"></select>
<br><br><div id="id_instalacao"></div> <!-- Essa DIV aqui que é da TABELA, preciso que atualize essa -->
</form>
</div>
</body>
</html> Qualquer dúvida, eu explico melhor, caso não tenha sido claro.Discussão (0)
Carregando comentários...