Returning HTML Fragment with Ajax

Question

Returning HTML Fragment with Ajax

Navigation

#1 by (1 votes)

3

Is it possible to return only one code fragment of a page with AJAX JQuery ?

What I want to do is:

I have a page where, through POST , I send the ID with AJAX , and it generates the body of a modal <div class="modal-body"> , but I would like to have another div to return the header of this modal <div class="modal-header"> .

Is there any way I can call the result of AJAX each div individually so that there is a change of HTML via Javascript ?

Additional

What I have so far would be this:

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

In conv_modal_results.php I have the following return

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

What I want is to be able to add another div and be able to call each one individually in the output, using something like .find() JQuery to use only that piece of HTML

javascript jquery ajax

asked by anonymous 02.06.2015 / 23:39

1 answer

Ajax saving dynamically Error deleting FK

score 1 · Accepted Answer

I made a simulation of something close to what you need like this:

In PHP, I return a JSON from an array containing the header and body HTML:

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

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

With javascript, I make the ajax call of the script and in success the parse of JSON to get the array. Then just insert the content in place and display the 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");
        }
    }
});