Forum: Ruby on Rails Rendering a partial with ajax/jquery

1385f1428736d72c3c8aab696d5c435a?d=identicon&s=25 arturo drlt (arturo-dlrt)
on 2012-10-30 00:04
Hi there i have this issue I have a view that render a partial for each
member inside the object @foo and I have a function for infinite scroll
so the server will be doing request after request while scrolling down
but I don't know exactly how to make this work here is some of my code:


def popular
    @foo = Foo.new

    respond_to do |format|
      response = @foo.popular
      ...

        flash[:notice] = "Welcome."
        format.html { render popular_foo_path}
      ....
      end
    end
  end

views/foo/popular

- @foo.each do |f|
    = render(:partial => "popular_foo", :locals => { :foo => f})

views/foo/_popular_foo

- f['thumbs'].each do |thumb|
    = image_tag(thumb['thumburl'].to_s, :alt => "thumb", :class =>
"thumb-popular")

every time you scrolldown to certain height a fuction
$(document).infinite_scroll is called and i have it configured to make a
new call to the method popular and I can see in the console and in the
firebug that it do the request and succeed but it won't render the next
results.
Db7238007950074e9e73b76a81910406?d=identicon&s=25 Tony Martin (tonypmartin)
on 2012-10-31 12:33
(Received via mailing list)
From the question you have posed, and the information you have provided,
there is not a simple 'do this' answer.  You need to get a bit further
down
the path of what you want to achieve.  (unless someone knows some magic
foo
that I am unaware of).

Looking at what you have so far, it would seem that you have the basic
functionality of the page, and you have an idea of what you want to
achieve, but you do not yet appear to have a strategy or plan for how
you
are going to achieve it.  I have never implemented continuous scroll,
but
giving it some cursory thought, I would begin by asking myself some
questions.

1.  How is the page update going to take place when I extend the
contents.
     eg.  - replace the whole page each time the list updates
            or -  replace the list section
            or - add additional items at the end
     Do I let the page size continue to grow indefinitely or do I remove
some items from the other end.

2.  If I am going to manage addition/deletion of items.  The items will
probably be best structured in an an html list or table, and each may
need
a unique id, or can I just append/prepend  to the list of items.

3. What mechanism will I use to identify the next 'page' of items I want
to
add to the list.

4.  How is my controller going to get the correct list of items to add?
ie
what paging mechanism am I using.

5.  How am I going to handle the ajax response that contains the items.
I
am going to need some js code to append/prepend or insert the items into
the list.

6.  What form will my response be in.  I can send some javascript using
an
erb template to insert the items, or I could have a js function on the
browser side ready to handle the response (eg as a success callback
handler.)  Or I could return data as json and handle the paging more
fully
in the browser js.

7.  Finally having thought about all this, I would do some googling to
see
if someone has already implemented such a thing in a form I could learn
from, or is there maybe a js library that might already provide most of
the
functionality I require.

I am sorry this is not a direct answer, but hopefully it may help to
clarify what you are trying to achieve and how you are going to go about
it.


Tonypm
A47e0a6beeb9d048ff054fc1c3a97418?d=identicon&s=25 Walter Davis (walterdavis)
on 2012-10-31 16:35
(Received via mailing list)
On Oct 29, 2012, at 7:04 PM, arturo drlt wrote:

>      response = @foo.popular
>
> $(document).infinite_scroll is called and i have it configured to make a
> new call to the method popular and I can see in the console and in the
> firebug that it do the request and succeed but it won't render the next
> results.
>

The best advice I have seen on this topic so far is to first walk, then
run. Start by setting up traditional (kaminari, will_paginate)
pagination. Get that working solidly. Then layer on the JavaScript to
call that pagination in your page, based on the simple test: "is this
marker item visible on screen or not?".

The benefit to this approach is that you silently cater to non-scripted
visitors, like Google, who you ignore at your peril.

Walter
1385f1428736d72c3c8aab696d5c435a?d=identicon&s=25 arturo drlt (arturo-dlrt)
on 2012-10-31 21:37
Tony Martin wrote in post #1082196:
> From the question you have posed, and the information you have provided,

> 7.  Finally having thought about all this, I would do some googling to
> see
> if someone has already implemented such a thing in a form I could learn
> from, or is there maybe a js library that might already provide most of
> the
> functionality I require.
>
> I am sorry this is not a direct answer, but hopefully it may help to
> clarify what you are trying to achieve and how you are going to go about
> it.
>
>
> Tonypm

After giving some serious thought to this matter and reading all your
advices my last thinking was "I really don't have that high knowledge of
js nor ajax so lets search the solution in other way, more
rails-already-implemented solution"

So I found this plug-in called Pageless that is designed for rails and
after some work I could made it work.
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.