title: IE 8 shows raw ajax response on page reloading with jQuery BBQ
body: <p>I use Ben Almans's jQuery BBQ and jQuery hashchange plugins on pagination links. Both work as expected in Opera and Firefox but do not in IE 8 (surprised, huh?). IE also works good with ajax, back button and hashchange, but fails when I clicking the reload button and shows <a href="http://i.stack.imgur.com/nqRs1.png" rel="nofollow">raw ajax</a> response instead of running it in previously loaded page. </p>
  
  <p>So here is my ugly code and some explanations about features that Im trying to implement in my pagination:</p>
  
  <p>1) Search engines friendly links (server responds html or js depending on javascript availability on client side).</p>
  
  <p>2) Dynamically changeable url when JS is turned on (using the '#' symbol).</p>
  
  <p>3) History and back button support.</p>
  
  <p>4) Minimizing double requests (do not make ajax request if same content was loaded with html page).</p>
  
  <p>JS:</p>
  
  <pre><code>$(function ($) {
    if (ajax_init) {
      $('.pagination a').live("click", function () {
        $.bbq.pushState({page: $.deparam.querystring($(this).attr('href')).page});
        return false;
      });
      $(window).bind("hashchange", function(e) {
        var anchor = $.deparam.fragment().page;
        var query = $.deparam.querystring().page;
        if (ajax_load(anchor, query)) {
          $(ajax_div).css('opacity', '0.4');
          $(ajax_div + '-processing').removeClass('hidden');
          $.ajax({
            type: 'GET',
            url: $.param.querystring('', {page: anchor}),
            dataType: 'script',
            cache: false
          });
        }
      });
      $(window).trigger('hashchange');
    }
  });
  
  function ajax_load(anchor, query) {
    if ((anchor &amp;&amp; anchor !== query &amp;&amp; !(!query &amp;&amp; anchor == 1)) || $('#noscript').length &lt; 1) {
      return true;
    }
    else {
      return false;
    }
  }
  </code></pre>
  
  <p>Template (Rails view):</p>
  
  <pre><code>&lt;div id="products-container" &gt;
  
    &lt;div id="products-processing" class="hidden"&gt;
      &lt;%= image_tag "spinner.gif" %&gt;
    &lt;/div&gt;
  
    &lt;div id="products"&gt;
  
      &lt;div id="noscript"&gt;
        &lt;%= render "products_list.erb" %&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
        var ajax_init = true;
        var ajax_div = '#products';
        var anchor = $.deparam.fragment().page;
        var query = $.deparam.querystring().page;
        if (!ajax_load(anchor, query)) {
          url = anchor ? anchor : (query ? query : 1);
          $.bbq.pushState({page: url});
        }
        else {
          $('#noscript').hide();
          $('#products-processing').removeClass('hidden');
        }
      &lt;/script&gt;
  
    &lt;/div&gt;
  
    &lt;div id="products-min-height"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>AJAX template (Rails js view):</p>
  
  <pre><code>$('#products').html('&lt;%= escape_javascript(render "products_list") %&gt;').css('opacity', '1');
  </code></pre>
  
  <p><strong>UPD:</strong> IE doesnt send request type header (or Rails cant determine it) while refreshing. So Rails generates JS view instead of HTML. Solved by:</p>
  
  <pre><code>  respond_to do |format|
      request.format.js? ? (format.js {render :index}) : (format.html {render :index})
    end
  </code></pre>
  
  <p>Is there a better solution?</p>