Home/ Questions/Q 5934701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:09:01+00:00

In github’s blog post about how they created the new tree slider, they give

  • 0

In github’s blog post about how they created the new tree slider, they give this as the code used:

$('#slider a').click(function() {
  history.pushState({ path: this.path }, '', this.href)
  $.get(this.href, function(data) {
    $('#slider').slideTo(data)      
  })
  return false  
})

However I don’t see how this works? They AJAX request the whole new page, so from <html> to </html> inclusive, then seemingly (using a method called ‘slideTo’??) put this data into the slider element? Surely then you’d end up with a page within a page (likely with CSS glitches).

How when using AJAX and History API, do you get only the specific section that has changed? Or is it that the html code is replaced (but this is not the case in the above example)?

Where is the actual javascript github uses? And am I right that the example given can’t be what is used as it won’t work properly?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The server side code could check the X-Requested-With header, and make sure it is XMLHttpRequest (jQuery sets this header by default) and send only the inner view if requested with XHR.

    Firebug Example

    FireBug Example

    As you can see, the returned HTML is very different to what it would be had the request not been with XHR.

    Example PHP Code

    With a helping of self explanatory functions.

    $xhr = (isset($_SERVER['X-Requested-With')
    AND $_SERVER['X-Requested-With'] === 'XMLHttpRequest');

$view = View::factory('inner/something');

if ( ! $xhr) {
    $view = View::factory('template')
        ->set('innerView', $view);
}

echo $view;
    • 0