在rails中jquery-file-upload之后如何使用最佳位置?

时间:2014-10-14 07:51:36

标签: ruby-on-rails forms jquery-file-upload best-in-place

我正在使用jquery fileupload gem在我的应用程序中添加productimages。图像上传完成后,图像和图像设置将呈现到当前页面中。可以使用最佳的宝石来更改图像设置。问题是,在我重新加载当前页面之前,所有best_in_place输入字段(除了复选框字段之外的所有字段)都不可用。由于不可用,我的意思是我无法访问best_in_place字段。我很困惑,因为复选框字段工作正常。

Productimage partial:

<%= image_tag(productimage.image_url(:thumb_q_small).to_s) %>
Visible: <%= best_in_place productimage, :active, :type => :checkbox, :collection => ["N", "Y"] %><br>
Name: <%= best_in_place productimage, :name %>

表单字段:

<%= form_for Productimage.new do |f| %>
  <%= f.label :image, "Add productimages:" %><br>
  <%= file_field_tag :image, multiple: true, name: "productimage[image]" %>
<% end %>

productimages.js.coffee:

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

jQuery ->
  $('.best_in_place').best_in_place()

jQuery ->
  $('#new_productimage').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_productimage').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

最后是图片上传后创建的代码段(仅用于名称):

Name: <span id="best_in_place_productimage_124_name" class="best_in_place" data-type="input" data-attribute="name" data-object="productimage" data-url="/productimages/124"></span>

谢谢&amp;问候,安德烈亚斯

1 个答案:

答案 0 :(得分:1)

好的,所以看起来问题是缺少默认值,如“ - ”。因此输入字段为0px x 0px且无法单击。

我的解决方法是添加一些这样的CSS:

.best_in_place {
  cursor: pointer;
  min-height: 14px;
  display: inline-block;
  border-bottom: 1px dotted #00F;
  min-width: 20px;
}

但任何更好的答案仍然非常受欢迎:)