pushState с Rails ajax

У меня есть страница действия индекса, показывающая список элементов, разбитых на страницы с помощью Kaminari, и я добавил к ним функциональность ajax, и теперь я пытаюсь получить URL-адрес, чтобы он соответствовал с помощью pushState.

Мой вопрос заключается в том, как мне получить URL-адрес для перехода к методу pushState, когда мои ссылки на страницы выполняются через:

<%= paginate @coasters, remote: true %>

и представление javascript выглядит следующим образом:

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

Мне нужно каким-то образом получить URL-адрес в качестве третьего аргумента pushstate из того, что я прочитал?

ОБНОВИТЬ:

Я изменил его на следующее:

$(document).ready(function() {

  $(document).on('click', '.pagination a[data-remote=true]', function(e) {
    history.pushState({}, '', $(this).attr('href'));
  });

  $(window).on('popstate', function () {
    $('.grid').html('<%= escape_javascript render(@coasters) %>');
    $('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
  });

});

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

Итак, я думаю, что мой код теперь обходит рельсы jQuery UJS, фиксируя щелчок по удаленной истинной ссылке разбиения на страницы, и URL-адрес вроде работает.

Кажется, что URL-адрес иногда обновляется. Кнопка назад тоже не работает.

Есть идеи, где я ошибаюсь?

ОБНОВЛЕНИЕ 2:

Я переместил часть своего javascript в javascript на главной странице, а не в представление javascript:

  $(document).on('click', '.pagination a[data-remote=true]', function(e) {
    history.pushState(null, '', $(this).attr('href'));
  });

  $(window).on('popstate', function () {
    console.log('popState started');
    $('.grid').html('<%= escape_javascript render(@coasters) %>');
    $('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
  });

После удаления материала popstate приведенный выше код отлично обновляет URL-адрес при нажатии на ссылки, но когда я добавляю материал popState обратно в postate, он вызывается, как только я обновляю страницу для тестирования, и моя область сетки заменяется текстовым выводом следующая строка на моей странице:

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s)

Как я могу заставить popstate работать правильно?


person rctneil    schedule 09.01.2014    source источник
comment
Этот railscast может быть полезен: railscasts.com/episodes/246-ajax-history-state Кроме того, вы можете использовать <%=j как сокращение для <%= escape javascript :)   -  person Arjan    schedule 10.01.2014
comment
Я смотрел это и почерпнул из него идеи, но это все еще не работает должным образом.   -  person rctneil    schedule 10.01.2014
comment
Хорошо, добавление обновления в OP сейчас...   -  person rctneil    schedule 10.01.2014
comment
Любые идеи, чтобы заставить это работать?   -  person rctneil    schedule 11.01.2014


Ответы (1)


Я был в похожей ситуации, и я решил ее так. Я не уверен, будет ли это работать с Каминари, так как я понятия не имею, как работает Каминари.

#index.html.erb
<div class="grid">
  <%= render(@coasters) %>
</div>
<div class="pagination">
  <%= paginate @coasters, remote: true %>
</div>

--

#index.js.erb
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

При нумерации страниц, поскольку data-remote включено, они будут отображать только index.js.erb.

В моем JavaScript

  $(document).on('click', '.pagination a[data-remote=true]', function(e) {
    history.pushState({}, '', $(this).attr('href'));
  });

  $(window).on('popstate', function () {
    $.get(document.location.href)
  });

При нажатии на ссылки на страницы Data-Remote будет обрабатывать запрос ajax и отображать index.js.erb

Но при нажатии кнопки "Назад" в браузере будет запущено событие popstate, а текущим URL-адресом в браузере будет ссылка из истории. Итак, мы запускаем еще один запрос ajax с этим URL-адресом с $.get(document.location.href). Это будет иметь тот же эффект, что и щелчок по предыдущему в разбиении на страницы.

person RSK    schedule 08.02.2014
comment
это работает для меня, за исключением одного: когда я возвращаюсь с другой страницы, он запускает запрос ajax, будет отображаться содержимое .js. - person calfzhou; 08.12.2014
comment
Ага. Я тоже столкнулся с той же проблемой. поэтому я добавил ajax=true в URL через событие ajax:beforeSend. gist.github.com/revathskumar/2f5bd0e8aaa069fdf126. - person RSK; 08.12.2014
comment
Я попытался отключить кеш браузера на страницах ajax ( blog.serendeputy.com/posts/ ), которые также решают эту проблему :) Я попробую вашу суть позже, спасибо! - person calfzhou; 09.12.2014