0

我正在使用集成到我的 Rails 3.2.1 应用程序中的 jQuery File Upload 插件（此处的文档）（根据此处的文档设置）将照片上传到我的应用程序中。

我已经设置了插件，以便它自动上传所有已选择的文件，而无需用户执行任何其他操作。上传照片后（以及在数据库中创建的相应条目），我希望用户能够为每张照片输入标题。

但是，在显示已上传照片的模板脚本中，我正在努力为已上传的每张照片创建一个编辑表单。我知道为每张照片创建一个表格远非优雅，但它似乎是这种情况下的唯一方法（除非我在这里遗漏了一些明显的东西？）。

<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
            <div class="template-download nofade">
                {% if (file.error) { %}
                    {%=file.name%}
                    <span>{%=fileUploadErrors[file.error] || file.error%}</span>
                {% } else { %}
                    {% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.mini_url%}"></a>
                        <%= form_for Photo.find(<---- ID SHOULD BE HERE ---->) do |f| %>
                            <%= f.text_field :title %>
                            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"><i class="icon-white icon-trash"></i> Delete</button>
                            <%= f.submit %>
                        <% end %>
                    {% } %}
                {% } %}
            </div>
    {% } %}
</script>

我有一个变量是

file.photo_id

包含相关照片的 ID，但尝试为其创建表单

<%= form_for Photo.find("{%= file.photo_id %}") do |f| %>

只返回此错误：

Couldn't find Photo with id={%= file.photo_id %}

我也尝试过像 Photo.find({%= file.photo_id %}) 这样的变体，但无济于事。

我知道这对于特定插件来说是一个非常具体的问题，但认为它仍然值得一问。任何人都知道如何传递照片 ID，或者更好地暗示如何以更优雅的方式解决这个问题？

4

1 回答 1

1

上传所有文件后，插件将列出所有文件使用template-download

我建议在表单提交上使用 ajax 来更新页面上显示的每个文件的标题。

以下是如何实现这一目标

<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
            <div class="template-download nofade">
                {% if (file.error) { %}
                    {%=file.name%}
                    <span>{%=fileUploadErrors[file.error] || file.error%}</span>
                {% } else { %}
                    {% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.mini_url%}"></a>
                            <input type="text" size="30" name="photo"/>
                            <a href="photos/{%=file.photo_id%}" class=".update-btn">Save</a>
                            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"><i class="icon-white icon-trash"></i> Delete</button>
                    {% } %}
                {% } %}
            </div>
    {% } %}
</script>

如果您注意到，我已替换form_tag为

<input type="text" size="30" name="photo"/>
<a href="photos/{%=file.photo_id%}" class=".update-btn">Save</a>

现在您将在每个文本框旁边看到保存链接以输入标题。

接下来是单击链接的操作。

$(function() {
     $('.update-btn').live("click", function() {
        var title = $(this).previous();
        $.ajax({
            url: $(this).attr('href'),
            type: "POST",
            data: { _method: 'PUT', title.attr('name'): title.val() },
            dataType: 'json',            
            success: function(msg) {
               //You may disable link after successful action
            }
        });
     });
  });

上面的代码将 click 事件绑定到每个Save链接并将PUT请求发送到PhotosController。

我不擅长 javascript/jQuery，但它应该可以工作。

于 2012-08-21T11:02:24.687 回答