IE 8显示了使用jQuery BBQ重新加载页面时的原始ajax响应

时间:2011-06-01 00:03:19

标签: jquery ruby-on-rails hashchange jquery-bbq

我在分页链接上使用Ben Almans的jQuery BBQ和jQuery hashchange插件。两者都在Opera和Firefox中按预期工作,但在IE 8中没有(令人惊讶,是吧?)。 IE也适用于ajax,后退按钮和hashchange,但是当我点击重新加载按钮并显示raw ajax响应而不是在之前加载的页面中运行它时失败。

所以这是我的丑陋代码和我试图在我的分页中实现的功能的一些解释:

1)搜索引擎友好链接(服务器根据客户端的javascript可用性响应html或js)。

2)打开JS时使用动态可更改的URL(使用“#”符号)。

3)历史记录和后退按钮支持。

4)最小化双重请求(如果使用html页面加载了相同的内容,则不要发出ajax请求。)

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;
  }
}

模板(Rails视图):

<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模板(Rails js视图):

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

UPD: IE在刷新时不会发送请求类型标头(或Rails无法确定)。所以Rails生成JS视图而不是HTML。解决方法:

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

有更好的解决方案吗?

2 个答案:

答案 0 :(得分:6)

IE似乎在刷新时要求“* / *”,并且rails似乎认为javascript是比html更好的响应。因为刷新应该只发生在html上,告诉rails“* / *”表示html修复了这个问题:

 before_filter :set_request_type
 ...
 protected    

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

答案 1 :(得分:3)

我和IE8有同样的问题。我的控制器正在提供JS以及HTML响应。 对我来说,确保在代码中首先注明html格式块解决了问题:

不起作用,因为rails使用js模板进行响应:

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

然而这很好用:

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