2

Existe a possibilidade de retornar somente um fragmento do código de uma página com o AJAX JQuery?

O que quero fazer é:

Tenho uma página onde através do POST envio o ID com o AJAX, e gero o corpo de um modal <div class="modal-body">, porém gostaria de ter outra div para retornar o cabeçalho deste modal <div class="modal-header">.

Existe alguma forma de chamar através do resultado do AJAX cada div individualmente para que haja a alteração do HTML via Javascript?


Adicionais

O que tenho até o momento seria isso:

<script>
    function teste(){
        var url = "&id="+teste;
        $.ajax({
        url: "conv_modal_results.php",
        dataType:"HTML",
        type: "POST",           
        data: url,
        beforeSend: function(){
            $('.modal-body').html('<div align="center"><img src="img/loading.gif" /></div>');
        },
        sucess: function(data){
            setTimeout($('.modal-body').html(data),2000);   
        }   
        });
    }
</script>

<input type="button" value="botaozinho" onClick="teste()">
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Carregando....</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

No conv_modal_results.php eu tenho o seguinte retorno

<div id="corpo_modal" class="row">
Aqui vai o corpo do modal...
</div>

O que eu quero é poder adicionar mais um div e poder chamar cada uma individualmente no resultado, utilizando algo como o .find() do JQuery para utilizar somente aquele pedaço do HTML

1
  • Sim é possível. Se explicares um pouco mais o que o AJAX deve retornar e mostrares mais da estrutur código podemos também responder com um exemplo.
    – Sergio
    Commented 2/06/2015 às 22:02

1 Resposta 1

1

Fiz uma simulação de algo próximo do que você precisa assim:

No PHP, retorno um JSON de um array contendo o HTML do header e do Body:

<?php
    $header = "<div>Meu Header</div>";
    $body = "<div>Conteúdo</div>";

    echo json_encode(array($header, $body)); 
?>

Com o javascript, faço a chamada ajax do script e no sucesso o parse do JSON para obter o array. Depois é só inserir o conteúdo no lugar e exibir a modal:

$.ajax({
    type: 'POST',
    url: 'index.php',               
    cache: false,
    success: function(result) {
        if(result){
            var resultObj = JSON.parse(result);
            $("#minhaModal .modal-header").html(resultObj[0]);
            $("#minhaModal .modal-body").html(resultObj[1]);
            $("#minhaModal").modal("show");                     
        } 
        else {
            alert("Erro");
        }
    }
});     

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .