Problems submitting AJAX request in Rails 4

Question

I've been following http://blog.markhorgan.com/?p=522 as a guide to update an image in a form with an ajax callback. Image saves fine but I want to do some clever ajax so the page doesn't refresh.

Here's my code:

edit.html.haml:

  #promo-image
     = render partial: 'promo_image'

_promo_image.html.haml:

= form_for( @property, remote: true) do |f|
  = f.file_field :promo_image, :pattern => "^.+?\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$", :id => 'promo-image-upload'
  = f.submit 'Update'
= image_tag @property.promo_image.url(:medium)

properties_controller.rb

def update
 @property = Property.find(params[:id])

 if @property.update(property_params)
   format.js
 else
   render 'edit'
 end
end

update.js.haml:

$("#promo-image").html("#{escape_javascript(render partial: 'promo_image',)}");

With the code outlined above I get error pointing to the format.js line:

ArgumentError in PropertiesController#update too few arguments

Can anyone see where I'm going wrong or perhaps point me in the right direction?

Many thanks! Steve

UPDATE

Just to be clear, I want to be able to update JUST the Div stated here:

update.js.haml:

$("#promo-image").html("#{escape_javascript(render partial: 'promo_image',)}");

This code works, but refreshes the whole page:

respond_to do |format|
  format.html { redirect_to edit_property_path(@property) } 
  format.js
end

FURTHER UPDATE

Just to be clear on my motives, I want to be able to update an element on the edit page, and not be redirected to a different one, e.g. show or index. This is for UI reasons. The guide above talks about the exact same thing.

FINAL UPDATE

The issue is because I'm using a file upload, this can't be achieved via ajax. For those in a similar situation see here: Rails form_for with file_field and remote => true and format => :js

A solution could lay here, and I will investigate this: https://github.com/JangoSteve/remotipart

Thanks to everyone for helping me work out the error of my ways!

Please mark the most helpful answer so future users can see the solution. — Ege Ersoz, May 21 '14 at 17:28

Ege Ersoz · Accepted Answer · 2014-05-21T17:16:48.770

Regarding your first update, you said that this code works, but refreshes the page:

respond_to do |format|
  format.html { redirect_to edit_property_path(@property) } 
  format.js
end

If that is the case, that means the incoming request is an html request, rather than an AJAX request. So the format.html block runs and redirects the browser to the same page, which now has the updated image.

What you need to do is figure out why the page is not sending the request as AJAX. You can see the request format if you look at the terminal output (if running locally). It will say something like:

Processing by ControllerName#action as [format]

Format needs to be JS in order for the format.js to render update.js.haml.

UPDATE:

Now that you mention it, the issue is indeed the file_upload field. Uploading files with AJAX is actually not possible with the Forms Helper. See the docs:

Unlike other forms making an asynchronous file upload form is not as simple as providing form_for with remote: true. With an Ajax form the serialization is done by JavaScript running inside the browser and since JavaScript cannot read files from your hard drive the file cannot be uploaded. The most common workaround is to use an invisible iframe that serves as the target for the form submission.

I did a quick search on Google and found the remotipart gem, which seems to specialize in doing this. I don't have any experience with it though, so you're on your own from here on. :)

Thanks. I can't see this in the log. So this could be my first problem! — steve, May 21 '14 at 16:37
The issue is the f.file_field. Replace this with a regular = f.text_field and it works like magic. — steve, May 21 '14 at 17:05

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

Try changing your update action to

def update
  @property = Property.find(params[:id])

 if @property.update(property_params)

    respond_to do |format|
      format.html { redirect_to properties_path } 
      format.js
    end
  else
    render 'edit'
  end
end

Source

edited May 23 '17 at 11:57

Community

1
1

answered May 21 '14 at 14:52

Pavan

33,316
7
50
76

Thanks Pavan. So if I change format.html { redirect_to properties_path } to format.html { redirect_to edit_property_path(@property) } then it refreshes the same page with the new image. Which gets me half way :-) But it refreshes the whole page, not just the #promo-image div. I just want a specific div/partial to be updated. Possible? – steve May 21 '14 at 15:04
@user1338398 Try it in the above `format.js {'update.js.haml'}` – Pavan May 21 '14 at 15:09
@user1338398 And also why you are giving `edit_property_path(@property)`? it shouldn't be just `properties_path`? – Pavan May 21 '14 at 15:12
I'm editing a specific property. My properties_path returns index. Make sense? – steve May 21 '14 at 15:18
@user1338398 Ofcourse you are editing.If it success it should either redirect_to index or show path right? – Pavan May 21 '14 at 15:21
@paven if I do format.js {'update.js.haml'} after the line format.html I get a different error: Template is missing. Looks like it's trying to find the update.js.haml file? It's in views/properties. – steve May 21 '14 at 15:21
@user1338398 Scratch that line.Just try `redirect_to properties_path` instaed of giving `edit_property_path(@property)`. – Pavan May 21 '14 at 15:23
The guide I was following talks about updating an individual element on the edit page using ajax (when calling update in controller). [link](http://blog.markhorgan.com/?p=522) For UI purposes I want to be able to do the exact same thing. – steve May 21 '14 at 15:40

Problems submitting AJAX request in Rails 4

2 Answers2