Ir para conteúdo
Fórum Script Brasil
  • 0

Ajax dentro de Ajax


TNT

Pergunta

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+'&amp;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+'&amp;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.

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...