我在分页链接上使用 Ben Almans 的 jQuery BBQ 和 jQuery hashchange 插件。两者都在 Opera 和 Firefox 中按预期工作,但在 IE 8 中却没有(很惊讶,嗯?)。IE 也适用于 ajax、后退按钮和 hashchange,但是当我单击重新加载按钮并显示原始 ajax响应而不是在先前加载的页面中运行它时失败。
所以这是我丑陋的代码和一些关于我试图在我的分页中实现的功能的解释:
1)搜索引擎友好链接(服务器响应html或js取决于客户端的javascript可用性)。
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
有更好的解决方案吗?