Returning HTML Fragment with Ajax

Asked

Viewed 1,912 times

3

There is the possibility to return only one fragment of a page’s code with the AJAX JQuery?

What I want to do is:

I have a page where through the POST send the ID with the AJAX, and I am 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 to call through the result of AJAX each div individually to change the 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 one more div and be able to call each one individually in the result, using something like the .find() of JQuery to use only that piece of HTML

javascript jquery ajax

  • Yes it is possible. If you explain a little more what AJAX should return and show more of the structure code we can also answer with an example.

1 answer

1


I did a simulation of something close to what you need so:

In PHP, return a JSON from an array containing the HTML of the header and Body:

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

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

With javascript, I call the script ajax and successfully parse the JSON to get the array. Then just insert the content into 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");
        }
    }
});

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.