jQuery Ajax return html AND json data

Question

I\'m not sure if there is any way to do this or not, but this would solve so many of my problems if there is a simple solution to this.

What I need/want to be able t

Answer 1

Trying to mix the retun value to contain presentation and data seems like a potential for confusion. Why not split it into two calls and fetch the data on success of the other?

Something like:

 $.ajax({
  type: "POST",
  url: "inc/"+view_page+".php",
  data: "id="+encodeURIComponent(pageID),
  success: function(html) {
    $("body > .container").html(html);
    $.ajax({
      type: "POST",
      url: "inc/"+data_page+".php",
      data: "id="+encodeURIComponent(pageID),
      success: function(json) {
        $("title").html(json.PageTitle);
      }
    });
  });

Answer 2

You also have the option of including the data in html5 data attributes

For instance, if you're returning a list of Animals

<ul id="ZeAnimals" data-total-animals="500" data-page="2">
    <li>Cat</li>
   <li>Dog</li>
   ...
</ul>

You can then collect the data you require using

$('#ZeAnimals').data('total-animals')

Sometimes separating your request into two different ajax calls makes sense also.

Answer 3

HTML and data wrapped in JSON

You can do it by returning a 2 element JSON array. The first element contains HTML and the second element contains another JSON array with the data inside. You just need to unwrap it carefully without breaking anything.

Serverside

$html = '<div>This is Html</div>';
$data = json_encode(array('page_title'=>'My Page'));
$response = array('html'=>$html, 'data'=>$data);
echo json_encode($response);

Clientside

//Ajax success function...

success: function(serverResponse){
    $("body > .container").html(serverResponse.html);
    var data = JSON.parse(serverResponse.data);
    $("title").html(data.page_title)
  }

---

Note 1: I think this is what @hakre meant in his comment on your question.

Note 2: This method works, but I would agree with @jheddings that its probably a good idea to avoid mixing presentation and data. Coding karma will come back to bite.

Answer 4

You may use a library that does that automatically, like http://phery-php-ajax.net. Using

Phery::instance()->set(array(
  'load' => function(){
    /* mount your $html and $json_data */
    return 
      PheryResponse::factory()
      ->json($json_data)
      ->this() // points to the container
      ->html($html); 
  }
))->process();

$(function(){
  var $container = $('body > .container');
  $container.phery('make', 'load'); // or $container.phery().make('load')
  $container.bind('phery:json', function(event, data){
    // deal with data from PHP here
  });
  $container.phery('remote');
});

You may, as well, use phery.views to automatically load a portion of the site automatically, without having to worry about client-side specific code. You would have to put a unique ID on the container, container in this example:

$(function(){
  phery.view({
    '#container': {}
  });
});

Phery::instance()->views(array(
  '#container' => function($data, $params){
    /* do the load part in here */
    return 
      PheryResponse::factory()
        ->render_view($html)
        ->jquery('.title')->text($title);
  }
))->process();