Ajax dentro de Ajax

[TNT 0]

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.

[Henrique Barcelos 290]

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:

 

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);
                       }
               }
       }

 

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:

if (req.readyState == 4) {

                       // apenas se o servidor retornar "OK"
                       if (req.status ==200) {

                       $.ajax('outra_pagina.php'); //......
                       }else{
                               alert("Houve um problema ao obter os dados:n" + req.statusText);
                       }
               }

Mas como você já está usando o jQuery.ajax, seria mais fácil utilizar somente ele, pois já há uma abstração desse processo.

 

Veja:

$.ajax({
                               url: 'action.php',
                               type: 'GET',
                               data: 'status='+status+'&id='+id,
                               success: function( data ){
                                       alert( data );
                               }
                       });

 

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:

                                success: function( data ){
                                       alert( data );
                                       $.ajax({url:'other_action.php', type:'GET',success:function(data){ alert('AJAX DENTRO DE AJAX!!!');}});
                               }

 

Espero ter sido claro... :thumbsup:

 

[TNT 0]

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!");
			});
		});
//fim das linhas


       }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?