We Keep Coding

Will_paginate, render next page

I'am using will_paginate gem to paginate my posts. And I want to do infinite scroll. I watch few video and read couple of posts, but thats not really what I need (because of my app structure). You see, home.html.erb (to be short), looks like:
<div class='news-lent'>
<%= render 'posts/posts_for_all', posts_variable: #posts %>
</div>
And my _posts_for_all.html.erb (to be short), look like (to be short):
<% posts_variable.each do |post| %>
<%= link_to post.theme, post %>
<% end %>
<% will_paginate posts_variable, :next_label => "More" %> # => i need it every
time the page is loaded
I've already wrote JS for all, except one line:
$('.news-lent').append('<%= j render *some_thing* %>')
Well, I don't know what pass to render. I cannot pass my #posts(it will return error(missing partial posts/_post)), and #posts.next_page(it will return 2), and #{posts_path(#post)}?page=#{#post.current_page+1}(but this don't work too) and other problems.
Can you help me, I need something to put inside j render so it rendered next page?
UPDATE
I reworked everything with RailCast videos, and same way like #Szilard Magyar tell me to do, but now it keep rendering the same (first page) all time and it not rendering second page at all, what can create such problem?
UPDATE
Follow railcast video (reworked my app structure), and a new problem appears:
My home.js.coffee:
jQuery ->
url = $('.pagination .next_page a').attr('href')
$(window).scroll ->
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text("Fetching...")
$.getScript(url)
My index.js.erb:
$('.one').append('<%= j render #posts, posts_variable: #posts %>');
<% if #posts.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(#posts) %>');
<% else %>
$('.pagination').remove();
<% end %>
<% sleep 3 %>
My index.html.erb:
<div class="news-lent">
<div class="one">
<%= render #posts, posts_variable: #posts %>
</div>
<div id="infinite-product-scrolling">
<%= will_paginate #posts, :next_label => " Еще" %>
</div>
</div>
But now, when I'am on first page and scroll down it rendering second page, but 2x times, and when I again scrolling to bottom and it rendering second page (it not rendering third page). I don't know how to fix it, can you land me again?

index.html.erb
<div class="product-index-list new-product-insert">
<%= render #products %>
</div>
<div id="infinite-product-scrolling">
<%= will_paginate #products %>
</div>
<div class="no-more">
<p>No more products.</p>
</div>
_product.html.erb
<div class="name"><%= product.name %></div>
<div class="oneliner"><%= product.oneliner %></div>
products.js
if ($('#infinite-product-scrolling').size() > 0) {
$(window).on('scroll', function() {
$('#infinite-product-scrolling').hide();
var more_products_url;
more_products_url = $('#infinite-product-scrolling .pagination .next_page a').attr('href');
if (more_products_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
$('.pagination').html("<i class='fa fa-circle-o-notch fa-2x fa-spin'></i>");
$('#infinite-product-scrolling').show();
$.getScript(more_products_url);
}
});
};
index.js.erb
$('.new-product-insert').append('<%= j render #products %>');
<% if #products.next_page %>
$('.pagination').replaceWith('<%= j will_paginate #products %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
$('.no-more').delay(1000).fadeIn(1500);
<% end %>

Solve it, the problem appears because of my mistake. In here:
jQuery ->
url = $('.pagination .next_page a').attr('href')
$(window).scroll ->
url variable was assigned only one time, before scrolling and that was my mistake. So if url was save, so it always rendered second page and never third. We have to move our url lower, under .scroll event and it will always check, what page have been rendered. Like this:
jQuery ->
$(window).scroll ->
url = $('.pagination .next_page a').attr('href')
By the way, I will recommend to all (if they are using jQuery from RailsCast tutorial) to add some script to prevent multiple page load when user scroll
jQuery ->
$(window).scroll ->
url = $('.pagination .next_page a').attr('href')
return if(window.pagination_loading) # -> add this
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
window.pagination_loading = true # -> and this
$('.pagination').text('Fetching products...')
$.getScript(url).always ->
window.pagination_loading = false # -> and this
And for prevent bugs etc. to url variable you need to add a, so it look like url = $('.pagination .next_page a').attr('href') and not like in RailsCast tutorial: url = $('.pagination .next_page').attr('href')

Popup window for Twitter login

I'm trying to implement a pop-up window for my RoR project for the login functionality for Twitter. Currently, when you hit login, you are redirected to the authorization page, and then once you've logged in, you're redirected back. I want a pop-up window to come on top of the current browser window and then close after authentication.
This is my sessions controller:
def create
auth_hash = request.env['omniauth.auth']
#user = User.find_by_user_id(auth_hash["uid"])
if #user
#authorization = #user.authorization
flash.now[:notice] = "Welcome back #{#user.name}! You have already signed up."
session[:user_id] = auth_hash["uid"].to_i
else
#user = User.new :name => auth_hash["info"]["name"], :user_name => auth_hash["info"]["nickname"], :user_id => auth_hash["uid"], :profile_image_url => auth_hash["info"]["image"].sub("_normal", "")
#user.build_authorization :secret => auth_hash['credentials']['secret'], :token => auth_hash['credentials']['token']
#user.build_preference
#user.save!
#user.errors.each do |error|
puts error
end
flash.now[:notice] = "Hi #{#user.name}! You've signed up."
session[:user_id] = auth_hash["uid"].to_i
end
redirect_to :root
end
def logout
session[:user_id] = nil
redirect_to :root
end
def failure
render :text => "Sorry, but you didn't allow access to our app!"
end
def destroy
#user = current_user
if #user
#user.destroy
end
redirect_to :root
end
end
I searched around and I see that a Javascript pop-up is the way to do it, so I got this from one of the other StackOverflow questions:
Turn omniauth facebook login into a popup
Where the code for the pop up is as below:
function popupCenter(url, width, height, name) {
var left = (screen.width/2)-(width/2);
vartop = (screen.height/2)-(height/2);
return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}
$("a.popup").click(function(e) {
popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
e.stopPropagation(); return false;
});
And I've done the callback view, but what I don't know is where to put this line:
=link_to "Log in with Facebook", omniauth_authorize_path(:user, :facebook), :class => "popup", :"data-width" => 600, :"data-height" => 400
The class => popup line is supposed to go where we set the Twitter key/secret key, but I don't think that is the right location (Omniauth - Display facebook connect as popup). It didn't work regardless. :/
Any ideas?

This is what you want ?
Application Helper:
module ApplicationHelper
def link_to_login_with(provider, url, html_options = {})
add_default_class(html_options)
convert_popup_attributes(html_options)
link_to t('.login_with_link', provider: provider), url, html_options
end
private
def add_default_class(html_options)
default_class = "js-popup"
if html_options.has_key?(:class)
html_options[:class] << " " << default_class
else
html_options[:class] = default_class
end
end
def convert_popup_attributes(html_options)
width = html_options.delete(:width)
height = html_options.delete(:height)
if width && height
html_options[:data] ||= {}
html_options[:data].merge!({width: width, height: height})
end
end
end
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Omniauth Popup</title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<header class='main'>
<nav class='user-nav'>
<ul>
<% if current_user %>
<li>
<%= link_to current_user do %>
<%= image_tag current_user.image, class: 'user-pic' if current_user.image %>
<%= content_tag :span, current_user.name %>
<% end %>
</li>
<li><%= link_to t('.logout_link'), sign_out_path %></li>
<% else %>
<li><%= link_to_login_with 'Facebook', '/auth/facebook', { width: '460', height: '460' } %></li>
<li><%= link_to_login_with 'GitHub', '/auth/github', { width: '1050', height: '700' } %></li>
<li><%= link_to_login_with 'Google', '/auth/google', { width: '800', height: '470' } %></li>
<li><%= link_to_login_with 'Twitter', "/auth/twitter?lang=#{I18n.locale}", { width: '660', height: '710' } %></li>
<% end %>
</ul>
</nav>
</header>
<div id='js-messages' class='messages'>
<% flash.each do |type, message| %>
<span class='message <%= type %>'>
<%= message %>
</span>
<% end %>
</div>
<div class='content'>
<%= yield %>
</div>
</body>
</html>
app/assets/javascripts/login.js
$(document).ready(function() {
$('.js-popup').click(function() {
centerPopup($(this).attr('href'), $(this).attr('data-width'), $(this).attr('data-height'));
return false;
});
});
function centerPopup(linkUrl, width, height) {
var sep = (linkUrl.indexOf('?') !== -1) ? '&' : '?',
url = linkUrl + sep + 'popup=true',
left = (screen.width - width) / 2 - 16,
top = (screen.height - height) / 2 - 50,
windowFeatures = 'menubar=no,toolbar=no,status=no,width=' + width +
',height=' + height + ',left=' + left + ',top=' + top;
return window.open(url, 'authPopup', windowFeatures);
}
Controller
class SessionsController < ApplicationController
def create
# Have a look at the info returned by the provider by uncommenting the next line:
# render text: "<pre>" + env["omniauth.auth"].to_yaml and return
omniauth = env['omniauth.auth']
user = User.find_or_create_with_omniauth(omniauth)
session[:user_id] = user.id
flash[:notice] = t('controllers.sessions.create', provider: pretty_name(omniauth.provider))
render_or_redirect
end
def failure
flash[:alert] = t('controllers.sessions.failure', provider: pretty_name(env['omniauth.error.strategy'].name))
render_or_redirect
end
def destroy
session[:user_id] = nil
redirect_to root_url, notice: t('controllers.sessions.destroy')
end
protected
def render_or_redirect
page = env['omniauth.origin']
if env['omniauth.params']['popup']
#page = page
render 'callback', layout: false
else
redirect_to page
end
end
def pretty_name(provider_name)
provider_name.titleize
end
end
app/views/sessions/callback.html.erb
<%= javascript_tag do %>
window.opener.location = '<%= #page %>';
window.close();
<% end %>

ruby if statment for js.erb file

Could anyone assist me in setting up my js.erb file to cover two scenarios.
At the moment i have infinite scroll working when the page initially loads, but when i change the params the new collection loads fine but when i scroll down the page to load the rest of the results i just get the next set of 6 objects replacing the last, rather than appending them onto the end
rehome.js.erb
$('.all_animals').append("<%= j render #animals %>");
<% if #animals.next_page %>
$('.pagination').replaceWith('<%= j will_paginate #animals %>');
<% else %>
$(window).off('scroll');
$('.pagination').empty();
<% end %>
Javascript
function infiniteScroll() {
if($('#infinite-scrolling').size() > 0) {
$(window).on('scroll', function(){
//Bail out right away if we're busy loading the next chunk
if(window.pagination_loading){
return;
}
more_url = $('.pagination a.next_page').attr('href');
if(more_url && $(window).scrollTop() > $(document).height() - $(window).height() - 50){
//Make a note that we're busy loading the next chunk.
window.pagination_loading = true;
$('.pagination').text('Loading.....');
$.getScript(more_url).always(function(){
window.pagination_loading = false;
});
}
});
}
}
So on page load i call the function
$(function(){
infiniteScroll();
});
and as a ajax success callback
success: function(data) {
infiniteScroll();
}
When the ajax call is made the params :rehomed are always present so i could wrap the separate logic in
<% if params[:rehomed].present? %>
<% end %>
does anyone have any ideas for dealing with the newly loaded content in my rehome.js.erb file
Thanks
Update
So on page load i need this to be the logic
$('.all_animals').append("<%= j render #animals %>");
<% if #animals.next_page %>
$('.pagination').replaceWith('<%= j will_paginate #animals %>');
<% else %>
$(window).off('scroll');
$('.pagination').empty();
<% end %>
and when an update is made to the collection i need
$('.all_animals').empty();
$('.all_animals').append("<%= j render #animals %>");
<% if #animals.next_page %>
$('.pagination').replaceWith('<%= j will_paginate #animals %>');
<% else %>
$(window).off('scroll');
$('.pagination').empty();
<% end %>
How to combine them into one statement is what im trying to work out

Update ajax content with will_paginate

How can I update my view keeping all existing ajax and will_paginate functionality in place?
I have a page rehome.html.erb
<div id="options">Option Select Here</>
<div class="all_animals">
<%= render #animals %>
</div>
<% unless #animals.current_page == #animals.total_pages %>
<div id="infinite-scrolling">
<%= will_paginate #animals %>
</div>
<% end %>
// WILL_PAGINATE
<script type="text/javascript">
$(function(){
if($('#infinite-scrolling').size() > 0) {
$(window).on('scroll', function(){
//Bail out right away if we're busy loading the next chunk
if(window.pagination_loading){
return;
}
more_url = $('.pagination a.next_page').attr('href');
if(more_url && $(window).scrollTop() > $(document).height() - $(window).height() - 50){
//Make a note that we're busy loading the next chunk.
window.pagination_loading = true;
$('.pagination').text('Loading.....');
$.getScript(more_url).always(function(){
window.pagination_loading = false;
});
}
});
}
});
</script>
This will load all the #animals collection, paginating it to 6 per page, and when I scroll down the page another 6 are loaded etc etc.
Corresponding controller
class PublicController < ApplicationController
before_filter :default_animal, only: [:rehome]
def rehome
respond_to do |format|
format.html
format.js
end
end
private
def default_animal
#animals = Animal.animals_rehome.paginate(:page => params[:page], :per_page => 6)
end
end
rehome.js.erb
$('.all_animals').append('<%= j render #animals %>');
<% if #animals.next_page %>
$('.pagination').replaceWith('<%= j will_paginate #animals %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
So when an option is selected from the dropdown an ajax post is made to create a new query which will return a new collection of #animals
$.ajax({
type: 'POST',
url: '/public/rehomed',
data: data_send,
success: function(data) {
//console.log(data);
}
});
Controller
def rehomed
# conditions logic
#animals = Animal.joins(:user).where(conditions).paginate(:page => params[:page], :per_page => 6)
respond_to do |format|
format.js {render json: #animals }
end
end
What I want to do is have the new collection loaded (paginated to 6 per page again) and when I scroll down only show the objects belonging to the new collection of #animals (if there are any).
At the moment the pagination links are not updated as when I scroll down the page the original collection is loaded.
Edit
So I have created a rehomed.js.erb file which is pretty much the same as my rehome.js.erb:
$('.all_animals').empty();
$('.all_animals').append('<%= j render #animals %>');
<% if #animals.next_page %>
$('.pagination').replaceWith('<%= j will_paginate #animals %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
and within my rehomed action
respond_to do |format|
format.js
end
So the new collection of animals is loaded, the pagination links are recreated but using the rehomed url, example being:
Before
<a class="next_page" href="/public/rehome?page=2" rel="next">Next →</a>
After
<a class="next_page" href="/public/rehomed?page=2" rel="next">Next →</a>
So when I scroll down I just get the following as the links don't exist and getScript fails
$('.pagination').text('Loading.....');
Edit 2
I have implemented #japed's answer but now after the new collection is rendered the pagination will continue to render the whole collection of the db including repeating the ones that where selected for the new collection, it's repeating itself.
How can I ensure that the correct url is generated for my links?

Will paginate allows you to set the params hash so you should be able to change it to use your other controller action like this:
will_paginate(#animals, :params => { :controller => "public", :action => "rehomed" })

will_paginate with endless Scrolling | Rails4

THIS IS THE SOLUTION
So i'm using will_paginate / Bootstrap Will Paginate with Endless Scrolling.
To get the Pagination working:
1.) In my Controller i updated my index action with
#clips = Clip.order("created_at desc").page(params[:page]).per_page(20)
2.) Edit my index view:
<%= will_paginate #clips%>
DONE
Pagination works just fine.
To Add Endless scrolling i did the same steps as in my previous Rails 3 App.
1.) Edit my clips.js.coffee
jQuery ->
$('#clips-masonry').imagesLoaded ->
$('#clips-masonry').masonry itemSelector: ".clips-masonry" # Thats my Masonry
if $('.pagination').length # Thats for the Endless Scrolling
$(window).scroll ->
url = $('.pagination .next_page a').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
# What to do at the bottom of the page
$('.pagination').text("Fetching more Clips...")
$.getScript(url)
$(window).scroll()
2.) Create an index.js.erb with:
$boxes = $('<%= j render(#clips) %>')
$('#clips-masonry').append( $boxes ).imagesLoaded( function(){
$('#clips-masonry').masonry( 'reload');
});
<% if #clips.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(#clips) %>');
<% else %>
$('.pagination').remove();
<% end %>
3.) Added format.js to my Controller index action
def index
#clips = Clip.order("created_at desc").page(params[:page]).per_page(12)
respond_to do |format|
format.html
format.js
end
end
4.) My _clip.html.erb is wrapped with the div
<div class="clip-box clips-masonry" data-no-turbolink>

Ok, i got it working with my Updated Question, everyone who stumbles upon this problem, This is the solution.

Incase someone prefers to use JS/JQUERY:
$(window).scroll(function() {
var url;
// Checks if products are currently being loaded
if (window.pagination_loading) {
return;
}
// Grabs the URL from the "next page" button
url = $('.pagination .next_page').attr('href')
// Chckes if you're n height from the bottom
if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
// Variable to know that you are currently loading products
window.pagination_loading = true;
// Text while loading
$('.pagination').text('');
// Run the script
return $.getScript(url).always(function() {
return window.pagination_loading = false;
});
}
});
Index.js.erb:
$products = $('<%= j render(#products) %>')
$('#productsContainer').append( $products );
<% if #products.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(#products) %>');
<% else %>
$('.pagination').remove();
<% end %>
index.html.erb
<div class="container">
<%= will_paginate #products %>
</div>
Controller:
respond_to do |format|
format.html
format.js
end