Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos. Sou novo em Ajax, então gostaria que me ajudassem com um problema.
Preciso fazer um sistema de busca que retornasse todos os resultados acompanhados com uma respectiva checkbox. Essa checkbox atualizaria o banco de dados no momento em que o usuário marcasse ou desmarcasse ela. Ou seja, o usuário faz a busca, os resultados são retornados e ele seleciona dentre eles as checkboxes referentes aos campos que devem ser atualizados.
Gostaria de fazer tudo isso com Ajax, para evitar o Refresh. Então, consegui dois códigos, que testei separadamente e vi que funcionam:
1- Código para o sistema de busca - buscaAjax.html (ele chama o arquivo buscaAjax.php, que possui a conexão e operações com o banco, além de imprimir os resultados)
<script type="text/javascript">
function ajax( url ) req = null;
// Procura por um objeto nativo (Mozilla/Safari)
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET",url,true);
req.send(null);
// Procura por uma versão ActiveX (IE)
}else if (window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req){
req.onreadystatechange = processReqChange;
req.open("GET",url,true);
req.send();
}
}
}
function processReqChange()// apenas quando o estado for "completado"
if (req.readyState == 4) {
// apenas se o servidor retornar "OK"
if (req.status ==200) {
// procura pela div id="pagina" e insere o conteudo
// retornado nela, como texto HTML
document.getElementById('pagina').innerHTML = req.responseText;
}else{
alert("Houve um problema ao obter os dados:n" + req.statusText);
}
}
}
$(document).ready(function(){
$("input[name='status[]']").click(function(){
var $this = $( this );//guardando o ponteiro em uma variavel, por performance
var status = $this.attr('checked') ? 1 : 0;
var id = $this.next('input').val();
$.ajax({
url: 'action.php',
type: 'GET',
data: 'status='+status+'&id='+id,
success: function( data ){
alert( data );
}
});
});
});
</script>
<input type="text" name="nome" onKeyUp="pesquisa(this.value)">2- Código para atualizar o banco através das checkboxes (chama o arquivo action.php)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='status[]']").click(function(){
var $this = $( this );//guardando o ponteiro em uma variavel, por performance
var status = $this.attr('checked') ? 1 : 0;
var id = $this.next('input').val();
$.ajax({
url: 'action.php',
type: 'GET',
data: 'status='+status+'&id='+id,
success: function( data ){
alert( data );
}
});
});
});
</script>
<form action="" method="post">
<table>
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>Resultado 1</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="15" /></td>
</tr>
<tr>
<td>17</td>
<td>Resultado 2</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="17" /></td>
</tr>
<tr>
<td>21</td>
<td>Resultado 3</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="21" /></td>
</tr>
</tbody>
</table>
</form>Minha dúvida é: como posso juntar estes dois códigos? É possível fazer com que um método chamado com o uso de Ajax chame outro? No caso, como eu faria?
Ou então alguém teria uma sugestão melhor?
Obrigado.
Na verdade minha idéia é simples, não sei se consegui me fazer entender bem.. O que quero é uma busca com Ajax, que funcione sem dar refresh. Essa busca retorna os resultados acompanhados de um checkbox. E esse checkbox atualizaria o banco de dados quando o usuário clicasse.
Pelo exemplo que você passou agora, tentei fazer um teste. Abaixo, o código responsável por retornar os resultados. Óbvio que retirei conexão com o banco e laços que geram a resposta, deixei apenas um resultado como exemplo:
<?php
$sNome = $_GET[ "valor"];
$sNome = trim( $sNome );
if( empty( $sNome )){
echo "Digite algo";
}else{
echo "<form action=\"\" method=\"post\">
<input type=\"checkbox\" name=\"status[]\" value=\"1\" />
<input type=\"hidden\" name=\"id\" value=\"15\" /> Resultado 1
</form><br>";
}
?>Repare na checkbox com o name=status. Essa checkbox que eu gostaria que atualizasse o banco. Junto com isso, adicionei na função ajax que processa a solicitação:
function processReqChange()
{
// apenas quando o estado for "completado"
if (req.readyState == 4) {
// apenas se o servidor retornar "OK"
if (req.status ==200) {
// procura pela div id="pagina" e insere o conteudo
// retornado nela, como texto HTML
document.getElementById('pagina').innerHTML = req.responseText;//linhas que adicionei
$(document).ready(function(){
$("input[name='status[]']").click(function(){
alert("O BANCO FOI ATUALIZADO!");
});
});}else{
alert("Houve um problema ao obter os dados:n" + req.statusText);
}
}
}O problema é que não funciona.. Parece que a leitura da checkbox não é feita e, consequentemente, o alert não é gerado. Saberia me dizer o que eu posso estar fazendo errado?
Amigão... Eu não entendi muito bem o que você deseja fazer...
Mas assim, como uma requisição via XMLHTTPRequest é ASSÍNCRONA, ela é executada em paralelo com o restante do script.
Você acompanha o que acontece na requisição pela propriedade readyState.
Quando ele contiver o valor '4', significa que a requisição terminou.
Pra saber se tudo ocorreu com sucesso, você verifica se a propriedade status contém o valor '200'.
É exatamente isso que você faz aqui:
Se você quer executar alguma função sobre o conteúdo que foi carregado via ajax, você tem que aguardar a primeira requisição terminar para fazer a segunda.
Mais ou menos assim:
Veja:
$.ajax({
url: 'action.php',
type: 'GET',
data: 'status='+status+'&id='+id,
Está vendo a propriedade success? Ela deve receber um callback para ser executado quando e se a requisição for completada com sucesso.
Se você precisa de outra requisição ajax, faça:
Espero ter sido claro... :thumbsup: