Time for action — using the BBQ plugin

Our first order of business is to get those back and forward buttons working, and allow our site visitors to bookmark and share links to individual pages. That's why we've included the jQuery BBQ plugin.

  1. We're going to write some new JavaScript, so erase the code we wrote earlier in scripts.js and replace it with a simple document ready statement as follows:
    $(document).ready(function(){
// Our deluxe ajaxy code goes here
});
  2. Next, we're going to select each of the links in our main navigation and replace the URLs with hash links so that the browser thinks they are internal to our HTML page.
    $(document).ready(function(){
$('#ajax-nav a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
});

    We're selecting all the links in the main navigation, then looping through all of them to add a # character at the front of the URL. For example, the cupcakes.html link is now #cupcakes.html. If you refresh the page in the browser, you'll see that clicking the links doesn't change anything on the page, but it does update the hash sin the URL in the browser's location bar.

    Time for action — using the BBQ plugin
  3. Next, we're going to bind a function to the window's hashchange event. Modern browsers have provided an event called hashchange that fires whenever the URL's hash changes, just as it's doing when you click the main navigation links. Older browsers don't support the hashchange event, but that's where the jQuery BBQ plugin comes in. It provides support for a pseudo hashchange event in most browsers so that we only have to write our code once without worrying about browser differences. Here's how we bind a function to the hashchange event:
    $(document).ready(function(){
$('#ajax-nav a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e) {
// our function goes here
});
});
  4. The function we write will now be called each time the window's hash changes, which we know is going to happen each time the site visitor clicks on a link in our main navigation. Now we can write the code to tell the browser what to do when this happens.
    $(document).ready(function(){
$('#ajax-nav a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e) {
var url = e.fragment;
$('#main-col').load(url + ' #main-col-wrap'),
});
});

    First, we're setting up a variable called url and setting it equal to e.fragment. The fragment property is made available by the jQuery BBQ plugin. It's equal to the hash of the URL without the hash symbol. So if the window's hash changes to #cupcakes.html, e.fragment will be equal to cupcakes.html.

    The next line of code is the same as our basic Ajax navigation example. I'm going to select the container on the page where I want to load my content, then call the load() method. I'm going to pass the URL and jQuery selector for the part of the page at that URL that I want to load into the browser.

    If you refresh the page in the browser now, you'll see that our main navigation is again working asynchronously. Clicking a link loads up only the main content area of the page while the rest remains unchanged. There is one important difference, though—if you click the back and forward buttons, they work. Once you've clicked through to the cupcakes page, you can click the back button to return to the home page.

  5. There's just one thing left to do to get our navigation optimized and that's to make sure that our site visitors can bookmark and share links to our pages. If you click on the cupcakes page, copy the URL from the browser's location bar, and open either a new browser window or a new tab and paste in the URL, you'll see that you get the site's home page rather than the cupcake page. If you look at the URL, the #cupcakes.html hash is there, we just have to tell our code to look for it. The simplest way to do that is to fire the window's hashchange event as soon as the page loads in the browser. Here's how we do that:
    $(document).ready(function(){
$('#ajax-nav a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e) {
var url = e.fragment;
$('#main-col').load(url + ' #main-col-wrap'),
});
$(window).trigger('hashchange'),
});

    Now, you can open up that cupcakes link in a new window and you'll see the cupcakes page load up, just as it should. Our hashchange function fires as soon as the page is loaded, which loads in the correct content.

What just happened?

We used jQuery to loop through each of our navigation links and replace them with internal links or hash links. Why not just do this in HTML? Because we want to make sure that our page continues to work for users with JavaScript disabled.

Then we used the jQuery BBQ plugin to change our asynchronous navigation to enable both bookmarking and sharing of links and the back and forward buttons in the browser. This allows our site to behave just like a single-page application without breaking the site visitor's expected experience.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.143.181