Rails 3 and jQuery - How to add Ruby code into an element

Question

I'm trying to use jQuery, jQuery form plugin, and Ruby on Rails to create an AJAX image uploader.

I've got all the image uploading and ActiveRecord creating done, but the AJAX part itself won't work - it should cause a <div> to re-render a collection of Picture partials. However, the Ruby code I'm trying to insert is being rendered as a string instead of being executed.

application.js:

$(document).ready(function(){
    $("#upload input").change(function(event){
        $(this).parent().ajaxSubmit({
            beforeSubmit: function(a,f,o) {
                o.dataType = 'json';
            },
            complete: function(XMLHttpRequest, textStatus) {
                $("#img_div").html('<%= escape_javascript(render(@picture.idea.pictures)) %>');
            },
        });
    });
});

Binds the form to ajaxSubmit when the file field is changed, which works fine. The .html() is what seems to have the problem, as the string <%= escape_javascript(render(@picture.idea.pictures)) %> is simply printed in the <div>.

_form.html.erb:

<div id="img_div"><%= render @picture.idea.pictures %></div>

That line works fine on page refresh to render the collection.

And I know there's not a problem with the Ruby code because I previously had that exact line in a create.js.erb file. I would continue to use that approach, except now that I am using ajaxSubmit, I can't get the create action to be rendered as JS - it's always rendered as HTML.

So in theory I can solve the problem one of two ways - figure out why the ruby code is rendered as a string in application.js, or get pictures#create to be rendered as JS.

Am I doing something wrong for those things to not happen?

EDIT:

Ok, so it seems like I can't use Ruby code or variables at all in applications.js, and trying to pass the Ruby collection into JavaScript doesn't work because then I can't access all the attributes I need to recreate the correct HTML.

What I need is a way to ensure that the pictures#create action is called as JS. Then I can use format.js to ensure that create.js.erb is used, where I know my code works. Any advice?

Sam 山 · Accepted Answer · 2011-02-02 03:41:50Z

2

You can only embed ruby code in javascript if it is in a script in the view. Anything in public/javascripts/ never hits the server so it cannot find the ruby variables.

What you want to do is store the ruby variable in a javascript variable just before you include your scripts.

<head>
 <script type="text/javascript">
   var youJsVariable = <%= ruby_array %>;
 </script>
 <%= javascript_include_tag :defaults, 'application' %>
</head>

This way you don't have to write a lot of inline scripts which bug the heck out of the unobtrusive folks.

answered Feb 2, 2011 at 3:41

Sam 山

42.9k36 gold badges116 silver badges158 bronze badges

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

5 Comments

Matt Rowland Over a year ago

And then from here I should recreate the _picture partial in the jquery .html command? Because I still won't be able to use <%= render youJsVariable %>, even if it contains the contents of the ruby array, will I?

user24359 Over a year ago

He's saying put var pictureStuff = '<%= escape_javascript(render(@picture.idea.pictures)) %>' in your view and then in your js, just put $("#img_div").html(pictureStuff). That way, the info you need is already in the page for the JS to find

Sam 山 Over a year ago

@Matt Rowland || let me know if you have any more questions.

Matt Rowland Over a year ago

Ah, that makes a lot more sense. However, no matter where in my view I put var pictureStuff = '<%= escape_javascript(render(@picture.idea.pictures)) %>' the code ends up as var pictureStuff = '' - implying, I assume, that it can't find the collection. This happens even if I put the script immediately after where I've just used @picture successfully.

Matt Rowland Over a year ago

Ok... thanks heaps guys, now I just need to figure out a way to update pictureStuff when the ajax form is submitted and I'm all set! Currently it outputs a list of the Pictures that existed before the form was submitted, when I need it to display all of them including the one that was just added.

vinga · Accepted Answer · 2011-02-02 03:46:17Z

0

The problem is that you are trying to run ruby code in JavaScript on browser size:

'<%= escape_javascript(render(@picture.idea.pictures)) %>'

Instead this you should set with HTML method what has already been rendered by render(@picture.idea.pictures)

answered Feb 2, 2011 at 3:46

vinga

2,01222 silver badges33 bronze badges

Collectives™ on Stack Overflow

Rails 3 and jQuery - How to add Ruby code into an element

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related