Remember the problem with jQuery BBQ plugin in Internet Explorer 7? It’s not really a problem, just a minor glitch but let’s fix it anyway.

Steps to reproduce:

1. Open BBQ demo in Internet Explorer
2. Click Next button few times
3. Open history menu

Observe:

No page titles, just URLs. Definitely it would be nice to see photo numbers there.

First, let’s see how Asual jQuery Address fix this problem:

_title = _d.title = value;
if (_juststart && _frame && _frame.contentWindow && 
    _frame.contentWindow.document) {
    _frame.contentWindow.document.title = value;
    _juststart = FALSE;
}

Aha! For IE7 you need to set title of the hidden iframe in addition to setting document title. So this is how you set page title:

document.title = "New title";
var iframe = $("iframe:hidden");
if (iframe.length > 0 && iframe[0].contentWindow && iframe[0].contentWindow.document)
  iframe[0].contentWindow.document.title = "New title";

Updated demo should work correctly in Internet Explorer 7.

Click here to view demo

Let’s take previous demo and use jQuery BBQ plugin instead. Our goal is Ajax photo gallery that supports browser’s back button. We will display numbers instead of actual photos for now.

$(function () 
{
  $(window).bind('hashchange', function(e) {
    var i = parseInt(e.fragment, 10);
    if (!isNaN(i))
      switchTo(i);
  });
  $(window).trigger('hashchange');
});

function switchTo(i)
{
  if ($("#number").text() == i)
    return;
  $("#number").text(i);
  document.title = i;
  if (i > 1)
    $("#lnk_prev").attr("href", "#" + (i - 1)).removeClass("disabled");
  else
    $("#lnk_prev").removeAttr("href").addClass("disabled");
  if (i < 20)
    $("#lnk_next").attr("href", "#" + (i + 1)).removeClass("disabled");
  else
    $("#lnk_next").removeAttr("href").addClass("disabled");
}

Instead of handling click event we modify href attribute of the links. BBQ will fire hashchange event whenever we "navigate" to a new page. No need to prevent default processing – simple!

One gotcha to watch out for is changing page title. If you take naive approach and simply use document.title (like I did) to set page title you won't see your titles in the history menu in Internet Explorer 7:

Compare with Internet Explorer 8:

Click here to view demo

Let’s say you want to build photo gallery. Something like this:

You want to open next and previous photos without page reload, using Ajax. One problem with this is that browser’s back button stops working. Fortunately, it’s easy to fix with jQuery Address plugin from Asual. I tried using this plugin and it worked very well. I’ve put together a simple demo.

For simplicity, let’s display just a number instead of actual photo:

Every time you click right arrow the number increases; left arrow decrements the number by one. Simple! Back and forward buttons should work. Also, it would be nice to have different titles in the history:

The code:

$(function () 
{
  $.address.strict(false);
  $.address.externalChange(function(e)
  {
    switchTo(e.value);
  });

  $("#lnk_prev").click(function(e)
  {
    e.preventDefault();
    var i = $("#number").text() * 1 - 1;
    switchTo(i);
    $.address.value(i);
  });

  $("#lnk_next").click(function(e)
  {
    e.preventDefault();
    var i = $("#number").text() * 1 + 1;
    switchTo(i);
    $.address.value(i);
  });
});

function switchTo(i)
{
  $("#number").text(i);
  $.address.title(i);
}

The magic happens in click handler. $.address.value method changes page address and adds browser history point. You need to cancel navigation by calling e.preventDefault() — otherwise browser would follow the link and two history entries would get created.

Note that you need to disable plugin’s strict option, otherwise it would add slash symbol immediately after hash symbol, like this: #/11.