render partial using ujs and without AJAX call on rails 3

Question

I need to do multiple file uploads using nested form and jQuery. so I wrote an helper using link_to_function method:

  def add_document_link(title, form)
    link_to_function title do |page|
      form.fields_for :documents, Document.new, :child_index => Time.now.to_i do |f|
        page << "$('#documents').append('#{escape_javascript(render('/realties/document', :f => f))}');"
      end
    end
  end

this code simply creates a link that, if pressed, renders a new file upload nested form. it surprisingly works, even if I'm using rails3 beta4 (and I know that 'link_to_function' is deprecated)

is there a better way to do the same without using link_to_function or some AJAX call?

thanks in advance ;)

Answer 1

If it works then the only thing left to do is to make it look prettier by moving the JavaScript call to a separate whatever.js.erb file:

whatever.js.erb:

"$('#documents').append('<%= escape_javascript(render('/realties/document', :f => f)) %>);"

(note the change of interpolating the ruby code into a string for the erb tags)

Now you should be able to do:

"whatever" }, :remote => true %>

The code will be much more concise and the outputed html will look way better, because now there isn't any javascript in there. Just make sure that your document is html5 and that you include the JS libraries (which you probably do since your code works :)).

I myself am using Prototype, but it shouldn't differ in JQuery. The only weak spot that I can think of now is passing the form block to the partial, but it should work and it's too late to think :)

Post here whether it worked or not and if not we'll figure it out. Good night now ;]

Answer 2

You might want to take a look my project https://github.com/adamaig/complex-form-examples which is derived from some other people's work. The same methods work for rails 3 (i just upgraded the project locally for a test). The big issue is the deeply nested elements, but this project should demonstrate a ujs way of working with jquery and rails generated templates.

Answer 3

Ok sorry, but I didn't notice that you don't want ajax call. I am not so sure if calling the page object doesn't make that call anyway though. I think that to call it entirely without ajax you would have to cache the field some way on the client side. Are you totally sure that your example works without an ajax call?

If it does the only thing I can think of to make it "less obtrusive" is to extract the javascript to application.js file which is meant for storing your own javascript and just call the function from there inside your view. That is if you include that file (application.js). This will simply move the javascript away from the view without changing the way your code works at all.

Cheers :)

Answer 4

This really exceedes my experience with nested forms and UJS, but here's another idea try not passing the FormBuilder instance into the partial. Maybe it'll just work. I've seen stranger things work. This may be right since you render it INSIDE that form so the instance might be reachable without passing it directly. If this doesn't work then it will take someone wiser than me to answer your question :)

Answer 5

See RailsCasts episodes 196 and 197

I apologize of the link-only answer, but no one says it better than Ryan:

196. Nested Model Form Part 1

197. Nested Model Form Part 2