Search code examples
ruby-on-railspartial

Rendering partial in Rails with .js.erb file (remote true trigger) not working


I'm attempting to render a partial when a user changes their profile avatar (as opposed to the page reloading). The problem is that the .js.erb file doesn't seem to be getting triggered at all (my console log messages aren't printing). I don't seem to be getting any errors as it simply redirects the page to the root.

In my server log (as seen below), there is a token authenticity error, but even when I disable the authentication and the error disappears, the redirect still happens and the .js.erb is essentially ignored.

Processing by UsersController#update as HTML
  Parameters: {"utf8"=>"✓", "user"=>{"avatar"=>#<ActionDispatch::Http::UploadedFile:0x007f9ae101c3f8 @tempfile=#<Tempfile:/tmp/RackMultipart20140716-9847-v0ray3>, @original_filename="creator.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"user[avatar]\"; filename=\"creator.jpg\"\r\nContent-Type: image/jpeg\r\n">}, "commit"=>"Upload Avatar", "id"=>"2"}
Can't verify CSRF token authenticity
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 2 ORDER BY "users"."id" ASC LIMIT 1
   (0.0ms)  begin transaction
   (0.1ms)  commit transaction
  User Load (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", "2"]]
   (0.0ms)  begin transaction
  User Load (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 2]]
  SQL (0.1ms)  UPDATE "users" SET "avatar" = ?, "updated_at" = ? WHERE "users"."id" = 2  [["avatar", "creator.jpg"], ["updated_at", Wed, 16 Jul 2014 14:41:14 UTC +00:00]]
   (160.8ms)  commit transaction
Redirected to http://localhost:3000/

.js.erb file

$(".avatar-container").html("<%= escape_javascript(render(:partial => 'profile/avatarContainer')) %>");

User Controller

  def update
    @user = User.find(params[:id])
    respond_to do |format|
        if @user.update_attributes(params.require(:user).permit!)
          format.js
          format.html{
            redirect_to root_path
          }      
        else
          format.js
          format.html{redirect_to root_path}
        end
    end
  end

Partial:

-if current_user.avatar.url != "/assets/userProfile_dashboard.png"
  .avatar-large
    =image_tag current_user.avatar.url
    = simple_form_for(current_user, html: {:multipart => true }, remote: true) do |f|
      = f.file_field :avatar, style:"margin-top:-258px;", id: "profile-avatar"
      = f.button :submit, "Upload Avatar", :class => "buttonRoundedCornersGreen ", style: "width:130px;margin-top:20px;", id: "avatar-submit"
-else
  .no-avatar 
    = simple_form_for(current_user, html: {:multipart => true }, remote: true) do |f|
      = f.file_field :avatar, id: "profile-avatar" 

EDIT: After much searching, it appears that having a multipart true for file uploads and remote true were creating a conflict. I was able to resolve this by installing the Remotipart gem.


Solution

  • After much searching, it appears that having a multipart true for file uploads and remote true were creating a conflict. I was able to resolve this by installing the Remotipart gem.