Rails tag rendering in Javascript

Question

I'm using a JQuery-based file upload plugin to upload an image file directly to S3. The plugin works fine and the upload code, implemented in the model, is just peachy, too. My problem is with what happens after the file completes its quick journey.

The plugin accepts a callback, 'onLoad', which executes once the upload is complete. For the callback to work, all that's needed is a Javascript function which, you know, does whatever comes next. Okay. What I'd like is for the callback to load a partial that would replace the upload form with a display of the image. So here's how I'm specifying the callback:

onLoad: function (evt, files, index, xhr, handler) {  
    (document).ready(function($) {  
        $('.container').html('<%= escape_javascript(render :partial => "pictures/picture_editor", :locals => { :picture => @picture }, :layout => false) %>')});  
}

So -- what I don't want, of course, is for that 'render' tag to render prior to the callback, but that's exactly what's happening. The page loads and, immediately, I get an error because Rails is trying to render that tag, without waiting for the Javascript to execute or anything else -- Rails sees the tag in the view, bang, wants to render it. I've tried researching an answer and I feel like I must be missing something painfully obvious -- but how am I to load a partial from a jQuery callback if I can't specify the render tag in the view? What am I missing?

I apologize if the answer is very obvious.

Is this javascript included in on of your js files or an rjs tempalte? — raid5ive
– raid5ive, Commented Jan 30, 2011 at 4:47
It's in a partial that gets loaded by the template, but I suppose putting it in a js file would be fine. — Lockjaw
– Lockjaw, Commented Jan 30, 2011 at 5:06
Okay, well, that fixed it -- sort of. Now the render tag is appearing in the replaced HTML and it's not being processed by Rails, so that's a different problem. Thank you, raidfive, for pointing out what was plainly before me. I do appreciate. Now how do I get the tag to render? — Lockjaw
– Lockjaw, Commented Jan 30, 2011 at 5:11

Brian Morearty · Accepted Answer · 2011-01-30 06:07:23Z

1

A partial can't be rendered standalone (e.g. in an ajax response). One way that I think will fix it, assuming you still need the partial to be a partial (i.e. you need to render it as part of other pages), is:

Create a PicturesController#picture_editor action that just renders the partial without a layout.
In the JavaScript event handler, load that action into the div using jQuery's 'load' function.

Something like this in PicturesController:

def picture_editor
  @picture = Picture.find(params[:id])
  render :partial => 'picture_editor', :picture => @picture :layout => false
end

and this in the JavaScript (in a .html.erb or .js.erb file so it will be processed by Ruby; not in raw .js):

$('.container').load('<%= url_for(:controller => 'Pictures', :action => 'picture_editor' %>')});

answered Jan 30, 2011 at 6:07

Brian Morearty

3,40836 silver badges36 bronze badges

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

1 Comment

Lockjaw Over a year ago

This directly addresses my question. Thank you for your help!

Collectives™ on Stack Overflow

Rails tag rendering in Javascript

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