Я использую плагины jQuery BBQ и jQuery от Ben Almans для ссылок на страницы. Оба работают как положено в Opera и Firefox, но не в IE 8 (удивленно, а?). IE также хорошо работает с ajax, кнопкой возврата и hashchange, но завершается неудачно, когда я нажимаю кнопку перезагрузки и показывает raw ajax ответ вместо запуска его на ранее загруженной странице.
Итак, вот мой уродливый код и некоторые пояснения к функциям, которые я пытаюсь реализовать в своей пагинации:
1) Дружественные поисковым системам ссылки (сервер отвечает html или js в зависимости от наличия javascript на стороне клиента).
2) Динамически изменяемый URL при включении JS (с помощью символа «#»).
3) Поддержка истории и кнопки возврата.
4) Минимизация двойных запросов (не делать ajax-запрос, если тот же контент был загружен с HTML-страницей).
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
Есть ли лучшее решение?