Rendering a partial from javascript, Issue with passing class variables

Question

I'm trying to set up a view with infinite scroll. I'm doing that by having javascript load a partial, but the problem is I need to pass in the variable @row (see the partial below) to calculate which objects to load.

The @row variable doesn't load when the partial is inserted via the js below.

Am I approaching this problem wrong (is there an easier way to insert rails objects), or is there a way to pass the @row variable into the partial from js.

Controller:

respond_to do |format|
  format.html
  format.js
end

The js loaded from the controller response above:

$(' #{render "shared/browse_row" ).insertAfter( $('.row') );

View:

-(1..6).each do
    = render "shared/browse_row"

browse_row partial:

.row{'data-row'=> "#{@row}"}
-@row += 1
%ul
    -@i = 0
    -project_row( @row ).each do |project|
        -@i += 1
        -@i == 4 ? right = "right" : right = ""
        %li{:class => right}
            = image_tag( project.display_pic.url(:medium) )
            .filler{'data-link' => '/projects/'+project.id.to_s }
                .filler-text
                    .p-name
                        = project.name
                        .p-creator= "by " + project.creator.name
                    .p-price= "$" + number_with_precision(project.price, :precision => 2).to_s
                    .p-days
                        - if days_left( project ) > 0
                            ="Expires in " + pluralize( days_left( project ), " Day")
                        - else
                            ="Expires Today"
                    .p-percent
                        - percent_funded(project).gsub("%","").to_i > 100 ? percent = "100%" : percent = percent_funded(project)
                        .p-percent-bar{:style => "width:#{ percent };"}

what was it called, i'm a little lost not sure what words i'd search for — Alex Marchant
– Alex Marchant, Commented Dec 3, 2011 at 21:24
The "modern" approach is to make the server return JSON and render the HTML view client-side, it's cleaner. But I guess you'll prefer not to change things at this moment... — tokland
– tokland, Commented Dec 3, 2011 at 21:40
@tokland thanks i ended up doing it with json like you said, worked beautifully — Alex Marchant
– Alex Marchant, Commented Dec 6, 2011 at 7:15

iwasrobbed · Accepted Answer · 2011-12-04 22:08:40Z

3

You should pass the @row instance variable into the partial when you render it using this syntax:

render :partial => "shared/browse_row", :locals => { :row => @row }

It will then be available in the browse_row partial file as a variable named row

So then you'd just change it to this:

.row{'data-row'=> "#{row}"}

In the future, you may want to do something more like this...

In the link to load more projects:

<a href="path_to/more_projects" class="get-new-projects" data-remote="true" data-method="GET">Load more projects</a>

In your controller file:

def show
  row = params[:row]
  @projects = Project.where('id > ?', row)  

  render :json => { :projects => render_to_string( :partial => 'shared/browse_row.html',
                                                   :locals => { :row => row }) }, 
         :status => :ok
end

Then in your ajax success callback:

$('.get-new-projects').live('ajax:success', function(data, json, response) {
  // insert the rendered HTML that we passed in as a JSON string
  $('.row').after(json.projects);
});

This way, you keep everything nice and organized. Your backend renders the code, your front end places the rendered code where it needs to be on the page... everyone is happy.

answered Dec 4, 2011 at 22:08

iwasrobbed

46.8k21 gold badges152 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Marchant Over a year ago

great post, thanks a lot, as a rails newbie i didn't realize i'd have to pass the partial back via json (i actually ended up passing the objects via json, but now I know I can return the rendered partial via json) Thanks!

Collectives™ on Stack Overflow

Rendering a partial from javascript, Issue with passing class variables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related