【问题标题】:javascript not rendering what it's supposed to in rails 6javascript没有呈现它应该在rails 6中呈现的内容
【发布时间】:2020-11-29 17:44:28
【问题描述】:

我是新手,但据我所知应该没有任何问题。我有一个页面,用户可以在其中上传照片并删除它们。这两个功能都可以正常工作,照片会上传和删除,但我正在尝试使用 javascript 删除照片,并且页面在删除时不会像预期的那样呈现自身。这是终端输出,据我所知没有问题:

Started DELETE "/equipment/5/photos/45" for ::1 at 2020-11-29 10:15:48 -0700
Processing by PhotosController#destroy as JS
Parameters: {"equipment_id"=>"5", "id"=>"45"}
Photo Load (0.3ms)  SELECT "photos".* FROM "photos" WHERE "photos"."id" = ? LIMIT ?  [["id", 
45], ["LIMIT", 1]]
↳ app/controllers/photos_controller.rb:15:in `destroy'
Equipment Load (0.1ms)  SELECT "equipment".* FROM "equipment" WHERE "equipment"."id" = ? 
LIMIT ?  [["id", 5], ["LIMIT", 1]]
↳ app/controllers/photos_controller.rb:16:in `destroy'
(0.1ms)  begin transaction
↳ app/controllers/photos_controller.rb:18:in `destroy'
Photo Destroy (0.4ms)  DELETE FROM "photos" WHERE "photos"."id" = ?  [["id", 45]]
↳ app/controllers/photos_controller.rb:18:in `destroy'
(31.7ms)  commit transaction
↳ app/controllers/photos_controller.rb:18:in `destroy'
[paperclip] deleting 
/public/system/photos/images/000/000/045/original/Honda_hs1136_snowblower.jpg
[paperclip] deleting 
/public/system/photos/images/000/000/045/medium/Honda_hs1136_snowblower.jpg
[paperclip] deleting 
/public/system/photos/images/000/000/045/thumb/Honda_hs1136_snowblower.jpg
Rendering photos/destroy.js.erb
(0.8ms)  SELECT COUNT(*) FROM "photos" WHERE "photos"."equipment_id" = ?  [["equipment_id", 
5]]
↳ app/views/photos/_photos_list.html.erb:1
Rendered photos/_photos_list.html.erb (Duration: 4.2ms | Allocations: 658)
Rendered photos/destroy.js.erb (Duration: 6.1ms | Allocations: 927)
Completed 200 OK in 69ms (Views: 12.0ms | ActiveRecord: 33.4ms | Allocations: 10559)

这是我的照片控制器:

def destroy
@photo = Photo.find(params[:id])
equipment = @photo.equipment

@photo.destroy
@photos = Photo.where(equipment_id: equipment.id)

respond_to :js

end

这是我的 destroy.js.erb 文件:

$('#photos').html("<%= j render 'photos_list' %>");

这是我的 _photos_list.html.erb 文件:

<% if @photos.count > 0 %>
<br/><br/>

<div class="row">
<% @photos.each do |photo| %>
  <div class="col-md-4">
    <div class="card">
      <div class="card-header preview">
        <%= image_tag photo.image.url() %>
      </div>
      <div class="card-body">
        <span class="float-right">
          <%= link_to equipment_photo_path(photo.equipment_id, photo), remote: true, method: :delete, data: {confirm: "Are you sure?"} do %>
            <i class="far fa-trash-alt"></i>
          <% end %>
        </span>
      </div>
    </div>
  </div>
 <% end %>

就像我说的那样,删除照片是有效的,当我刷新页面时,照片就消失了,但显然它应该在不刷新的情况下这样做。

这里也是渲染 _photos_list.html.erb 的 photo_upload.html.erb 的内容:

<div class="card">
  <div class="card-header">
    Photos
  </div>
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <!-- PHOTO UPLOADS GO HERE -->

          <%= form_for @equipment, url: equipment_photos_path(@equipment), method: 'post', html: {multipart: true} do |f| %>
            <div class="row">
              <div class="form-group">
                <span class="btn btn-default btn-file text-babu">
                  <i class="fas fa-cloud-upload-alt"></i> Select Photos
                  <%= file_field_tag "images[]", type: :file, multiple: true %>
                </span>
              </div>
            </div>

            <div class="text-center">
              <%= f.submit "Add Photos", class: "btn btn-form" %>
            </div>

          <% end %>
        </div>
      </div>

      <div id="photos"><%= render 'photos/photos_list' %></div>

    </div>
  </div>
</div>

【问题讨论】:

    标签: javascript jquery ajax ruby-on-rails-6


    【解决方案1】:

    试试

     respond_to do |format|
       format.html
       format.js
      end
    

    改为

    respond_to :js
    

    编辑: 你能分享你渲染_photos_list.html.erb的视图文件吗?

    【讨论】:

    • 我试过了,但还是不行,我已经添加了 photo_upload.html.erb 的内容,这是渲染 _photos_list.html.erb 的地方。
    猜你喜欢
    • 2014-04-29
    • 1970-01-01
    • 2011-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多