如何使用jQuery異步更新圖像？

我使用gem jquery-fileupload-rails和dragonfly。

我選擇要加載的圖片，圖片僅在重新加載頁面後纔在頁面上更改。 update.js.erb有什麼問題？

自由職業者/ 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' %>');

日誌

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)

來源

2016-04-07 Stefan Hansch

你需要一個respond_to塊添加到您的update方法。

def update 
    @phone.update(photo_params) 

    respond_to do |format| 
    format.js 
    end 
end

現在，當表單通過AJAX提交控制器將返回你update.js.erb模板，以正確的內容類型

來源

2016-04-07 10:47:33

我加了，叫update.js，但不加載新的文件與阿賈克斯。我認爲問題在update.js.erb。 –

當你添加一個文件時，你在日誌中得到了什麼？ –

DRAGONFLY：shell命令：'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）（1.3ms）渲染後的照片/ update.js.erb（4.1ms）在186毫秒內完成200 OK（查看：31.8ms | ActiveRecord：15.2ms） –

如何使用jQuery異步更新圖像？

回答

相關問題