How to make will_paginate's infinite scroll work with refresh-less search in Rails 5?
up vote
3
down vote
favorite
It's been a few days that my team has been trying to make a will_paginate's infinite scroll work with a search that doesn't refresh the page, but so far we only managed to make either of them work, and it seems that the problem frustratingly lays in just one line of code...
# All of index.js.erb
$("#cards").html("<%= escape_javascript(render(@cards)) %>");
$("#cards").append('<%= j render(@cards) %>');
<% if @cards.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@cards) %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
When that first line is removed, infinite scroll works nicely, but the search button adds the results to the next page, without removing the ones already on screen.
With that first line there, all the cards on screen are removed and new ones appear as expected with the first page of results, but the next pages aren't loaded at all with the infinite scroll.
Finally...
I believe that if there's a way to make that first line run only after the Search button is pressed, it will solve the problem, but we are really having a lot of problems to understand how .js.erb code works.
Some of the code that may or may not be relevant:
# Search button in index.html.erb
<%= form_tag(report_index_url, method: :get, remote: true) do %>
<div class="row">
<input id="search" name="search" class="..." type="search" >
<button onclick="topFunction()" class="..." type="submit"></button>
</div>
<% end %>
# Index method in report_controller
@cards = Card.from_user(@current_user.id)
apply_filters
execute_search
@cards = @cards.paginate(page: params[:page], per_page: 10)
respond_to do |format|
format.html
format.js
end
# Entire report.coffee
$ ->
if $('.pagination').length && $('#cards').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
$('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
$.getScript(url)
$(window).scroll()
javascript ruby-on-rails coffeescript erb will-paginate
asked Nov 11 at 19:37
João Camelo
161
add a comment |
up vote
3
down vote
favorite
It's been a few days that my team has been trying to make a will_paginate's infinite scroll work with a search that doesn't refresh the page, but so far we only managed to make either of them work, and it seems that the problem frustratingly lays in just one line of code...
# All of index.js.erb
$("#cards").html("<%= escape_javascript(render(@cards)) %>");
$("#cards").append('<%= j render(@cards) %>');
<% if @cards.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@cards) %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
When that first line is removed, infinite scroll works nicely, but the search button adds the results to the next page, without removing the ones already on screen.
With that first line there, all the cards on screen are removed and new ones appear as expected with the first page of results, but the next pages aren't loaded at all with the infinite scroll.
Finally...
I believe that if there's a way to make that first line run only after the Search button is pressed, it will solve the problem, but we are really having a lot of problems to understand how .js.erb code works.
Some of the code that may or may not be relevant:
# Search button in index.html.erb
<%= form_tag(report_index_url, method: :get, remote: true) do %>
<div class="row">
<input id="search" name="search" class="..." type="search" >
<button onclick="topFunction()" class="..." type="submit"></button>
</div>
<% end %>
# Index method in report_controller
@cards = Card.from_user(@current_user.id)
apply_filters
execute_search
@cards = @cards.paginate(page: params[:page], per_page: 10)
respond_to do |format|
format.html
format.js
end
# Entire report.coffee
$ ->
if $('.pagination').length && $('#cards').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
$('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
$.getScript(url)
$(window).scroll()
javascript ruby-on-rails coffeescript erb will-paginate
asked Nov 11 at 19:37
João Camelo
161
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
It's been a few days that my team has been trying to make a will_paginate's infinite scroll work with a search that doesn't refresh the page, but so far we only managed to make either of them work, and it seems that the problem frustratingly lays in just one line of code...
# All of index.js.erb
$("#cards").html("<%= escape_javascript(render(@cards)) %>");
$("#cards").append('<%= j render(@cards) %>');
<% if @cards.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@cards) %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
When that first line is removed, infinite scroll works nicely, but the search button adds the results to the next page, without removing the ones already on screen.
With that first line there, all the cards on screen are removed and new ones appear as expected with the first page of results, but the next pages aren't loaded at all with the infinite scroll.
Finally...
I believe that if there's a way to make that first line run only after the Search button is pressed, it will solve the problem, but we are really having a lot of problems to understand how .js.erb code works.
Some of the code that may or may not be relevant:
# Search button in index.html.erb
<%= form_tag(report_index_url, method: :get, remote: true) do %>
<div class="row">
<input id="search" name="search" class="..." type="search" >
<button onclick="topFunction()" class="..." type="submit"></button>
</div>
<% end %>
# Index method in report_controller
@cards = Card.from_user(@current_user.id)
apply_filters
execute_search
@cards = @cards.paginate(page: params[:page], per_page: 10)
respond_to do |format|
format.html
format.js
end
# Entire report.coffee
$ ->
if $('.pagination').length && $('#cards').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
$('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
$.getScript(url)
$(window).scroll()
javascript ruby-on-rails coffeescript erb will-paginate
asked Nov 11 at 19:37
João Camelo
161
It's been a few days that my team has been trying to make a will_paginate's infinite scroll work with a search that doesn't refresh the page, but so far we only managed to make either of them work, and it seems that the problem frustratingly lays in just one line of code...
# All of index.js.erb
$("#cards").html("<%= escape_javascript(render(@cards)) %>");
$("#cards").append('<%= j render(@cards) %>');
<% if @cards.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@cards) %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
When that first line is removed, infinite scroll works nicely, but the search button adds the results to the next page, without removing the ones already on screen.
With that first line there, all the cards on screen are removed and new ones appear as expected with the first page of results, but the next pages aren't loaded at all with the infinite scroll.
Finally...
I believe that if there's a way to make that first line run only after the Search button is pressed, it will solve the problem, but we are really having a lot of problems to understand how .js.erb code works.
Some of the code that may or may not be relevant:
# Search button in index.html.erb
<%= form_tag(report_index_url, method: :get, remote: true) do %>
<div class="row">
<input id="search" name="search" class="..." type="search" >
<button onclick="topFunction()" class="..." type="submit"></button>
</div>
<% end %>
# Index method in report_controller
@cards = Card.from_user(@current_user.id)
apply_filters
execute_search
@cards = @cards.paginate(page: params[:page], per_page: 10)
respond_to do |format|
format.html
format.js
end
# Entire report.coffee
$ ->
if $('.pagination').length && $('#cards').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
$('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
$.getScript(url)
$(window).scroll()
javascript ruby-on-rails coffeescript erb will-paginate
javascript ruby-on-rails coffeescript erb will-paginate
asked Nov 11 at 19:37
João Camelo
161
asked Nov 11 at 19:37
João Camelo
161
edited Nov 11 at 20:00
asked Nov 11 at 19:37
João Camelo
161
asked Nov 11 at 19:37
João Camelo
161
asked Nov 11 at 19:37
João Camelo
161
161
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252462%2fhow-to-make-will-paginates-infinite-scroll-work-with-refresh-less-search-in-rai%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252462%2fhow-to-make-will-paginates-infinite-scroll-work-with-refresh-less-search-in-rai%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
