Question

I’m pretty sure there is a very simple solution here but I can’t seem to think of the best approach. I’m using History.js which utilizes History API. Lets say I start with the following page:

<div ="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>

The way I have been handling my AJAX calls is to replace the content of #content with the new html. So for example I load in text that says “content 2”. This all works great until the user navigates back to the first page they hit on my site because it tries to load in the full first page (which includes #header and #footer so I end up with:

<div ="header">
  Header
</div>
<div id="content">
  <div ="header">
    Header
  </div>
  <div id="content">
    Content
  </div>
  <div id="footer">
    Footer
  </div>
</div>
<div id="footer">
  Footer
</div>

I know there is a better way to structure my page to avoid this issue but I can’t seem to figure out what it is. Here is the code I’m using:

(function(window,undefined){
    var
    History = window.History,
    State = History.getState();

    History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    $.ajax({
        url: History.getState().url,
        cache: false
    }).done(function( html ) {
        $("#content").html(html);
    });
    });
})(window);

Any ideas on the proper way to handle this?

Answer 1

<?php

    $is_ajax = isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' );

    if ( $is_ajax ) {
      // Give the content
    } else {
      // Give a full page
    }

?>