Geek Answers Handbook

IE 8 shows raw ajax response when reloading page using jQuery BBQ

I use BB Almans jQuery BBQ and jQuery hashchange plugins for page links. Both work as expected in Opera and Firefox, but not in IE 8 (surprised, yes?). IE also works well with ajax, back button and hashchange, but it doesn’t work when I press the reload button and shows raw ajax instead of launching it on a previously loaded page.

So, here is my ugly code and some explanations about the features that I am trying to implement in my pagination:

1) Search engines friendly links (the server responds with html or js depending on the availability of javascript on the client side).

2) Dynamically changeable URL when JS is enabled (using the "#" character).

3) Support history and back button.

4) Minimize duplicate requests (do not make an ajax request if the same content was loaded with an html page).

JS:

$(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 && anchor !== query && !(!query && anchor == 1)) || $('#noscript').length < 1) {
    return true;
  }
  else {
    return false;
  }
}

Template (Rails view):

<div id="products-container" >

  <div id="products-processing" class="hidden">
    <%= image_tag "spinner.gif" %>
  </div>

  <div id="products">

    <div id="noscript">
      <%= render "products_list.erb" %>
    </div>

    <script type="text/javascript">
      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');
      }
    </script>

  </div>

  <div id="products-min-height"></div>

</div>

AJAX template (view of Rails js):

$('#products').html('<%= escape_javascript(render "products_list") %>').css('opacity', '1');

UPD: IE does not send a request type header (or Rails cannot determine it) when updating. Thus, Rails generates a JS view instead of HTML. It is decided:

  respond_to do |format|
    request.format.js? ? (format.js {render :index}) : (format.html {render :index})
  end

Is there a better solution?

+5
source share
2 answers

IE, , "*/*" , , , , javascript , html. html, , "*/*" , html :

 before_filter :set_request_type
 ...
 protected    

 def set_request_type
   request.format = :html if request.format == "*/*"
 end
+6

IE8. JS, HTML-. , html- , :

, js:

respond_to do |format|
  format.js
  format.html
end

:

respond_to do |format|
  format.html
  format.js
end
+3

More articles:


All Articles