0

Rails 3.2.1 アプリ (ドキュメントはこちら) に統合された jQuery ファイル アップロード プラグイン (ドキュメントはこちら) を使用して、アプリに写真をアップロードしています。

ユーザーが何もしなくても、選択したすべてのファイルを自動的にアップロードするようにプラグインを設定しました。写真がアップロードされたら (そしてそれに応じて DB にエントリが作成されたら)、ユーザーが各写真のタイトルを入力できるようにしたいと思います。

ただ、アップロードした写真を表示するテンプレートスクリプトで、アップロードした写真ごとに編集フォームを作るのに苦労しています。写真ごとにフォームを作成するのはエレガントとはほど遠いことを私は知っていますが、このコンテキストではそれが唯一の方法のようです (ここで明らかな何かが欠けていない限り?)。

<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
            }
        });
     });
  });

上記のコードは、クリック イベントを各保存リンクにバインドし、 PUTリクエストをPhotosControllerに送信します。

私はjavascript/jQueryが苦手ですが、うまくいくはずです。

于 2012-08-21T11:02:24.687 に答える