Wie asynchrone Aktualisierung Bild mit jQuery?

Question

Ich möchte die asynchrone Änderung Avatare in den persönlichen Account des Benutzers

zu implementieren Ich benutze Gem jQuery-Fileupload-Rails und Libelle.

Ich wähle Bild geladen werden, Bild nur auf Seite nach dem Neuladen der Seite ändern. Was ist falsch mit update.js.erb?

freie Mitarbeiter/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) 

Answer 1

Sie benötigen einen respond_to Block zu Ihrem update Methode hinzuzufügen.

def update 
    @phone.update(photo_params) 

    respond_to do |format| 
    format.js 
    end 
end 

Nun, wenn das Formular über Ajax vorgelegt wird der Regler Ihre update.js.erb Vorlage mit dem richtigen Inhaltstyp zurückgeben