CODEWITHSUNDEEP
jqueryruby-on-rails
Stefan Hansch
Stefan Hansch

Reputation: 1590

How asynchronous update image using jQuery?

I want to implement the asynchronous change avatar in the user's personal account

I use gem jquery-fileupload-rails and dragonfly.

I select image to be loaded, image only change on page after reload page. What wrong with update.js.erb?

freelancers/edit.html.erb

<%= form_for @photo, url: {controller: 'photos', action: 'update'}, html: { class: "form_avatar" }, remote: true do |f| %> 
        <div class="field user-avatar_upload">
          <%= render partial: 'photos/photo' %>
        </div>
        <%= f.hidden_field :id, value: @photo.id %>
        <div class="btn-group_avatar">
        <div class="btn_bordered">
          <%= f.file_field :avatar, required: true, multiple: true, name: 'photo[avatar]' %>     
        <span>Load avatar</span>
        </div>

        </div>

    <% end %>
<script>
  $(document).ready(function() {
    $('.form_avatar').fileupload({dataType: 'script'});
  });
</script>

_photo.html.erb

<div class="avatar" id="dropzone">
  <%= image_tag @photo.avatar.url, class: "avatario" %>
</div>

PhotosController.rb

class PhotosController < ApplicationController
    before_action :set_photo, only: [:update, :delete]


    def update
      @photo.update(photo_params)

    end

    def delete

    end


    protected 

    def photo_params
      params.require(:photo).permit(:avatar, :id)    
    end

    def set_photo
      @photo = Photo.find(photo_params[:id])
    end
end

update.js.erb

$('.field user-avatar_upload').html('<%= j render 'photos/photo' %>');

Logs

DRAGONFLY: shell command: 'identify' '-ping' '-format' '%m %w %h' '/home/ubuntu/workspace/RackMultipart20160407-1375-158gos0.jpg'
  SQL (0.4ms)  UPDATE "photos" SET "avatar_uid" = ?, "updated_at" = ? WHERE "photos"."id" = ?  [["avatar_uid", "2016/04/07/8esl7t8zdp_Users_dborovsky_PortraitUrl_100.jpg"], ["updated_at", 2016-04-07 11:51:22 UTC], ["id", 3]]
   (13.9ms)  commit transaction
  Rendered photos/_photo.html.erb (1.3ms)
  Rendered photos/update.js.erb (4.1ms)
Completed 200 OK in 186ms (Views: 31.8ms | ActiveRecord: 15.2ms)

Upvotes: 0

Views: 70

Answers (1)

Kieran Johnson
Kieran Johnson

Reputation: 1353

You need to add a respond_to block to your update method.

def update
  @phone.update(photo_params)

  respond_to do |format|
    format.js
  end
end

Now when the form is submitted via ajax the controller will return your update.js.erb template with the correct content type

Upvotes: 1

Related Questions