Rails3.2でAjax File uploadでsubmitのvalueが消える問題

先日,業務でRails3.2を使っていたんですが,jquery-rails.jsにおそらくバグ(?)があり表題の問題が起こっていた.
一つのフォームにおいてカテゴリ毎に保存ボタンを付けて,そのボタンを押したときはそのカテゴリのみを保存したいという仕様の実装をしている時だった.
結局jsに手を加えるのもupdate時のバグになるかなと思ったので,普通にAjaxで実装した.
今回は現象のまとめと,その時の対応方法をまとめる.

Railsはform_forやform_tagを使用した際にf.submitやsubmit_tagに,name=”commit”が挿入される.
ただし,remote=>true, file upload時にcommitのvalueが消えるのが問題.

環境は以下.

・Rails 3.2.1
・ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-darwin11.4.0]
・jquery-rails (2.0.2)
・paperclip (3.0.4) #画像保存用
・remotipart (1.0.2) #Ajax File upload用

例えば,logoだけを保存したいボタンをformに設置するときに,以下のようなコードになるだろう.

views

<%= form_for @foo, :url => '/foo/edit/',:remote => true, :html => {:multipart => true} do |f| %>
  <%= f.file_field :logo %>
  <%= f.submit "logo" %>

  <%= f.text_field :name %>
  <%= f.submit "all" %>
<% end %>

で,fileをuploadしなかったりfile_filedがない場合は,

 Parameters: 
    {"foo"=>{(snip)}, "commit" => "logo"}

となる.
で,このcommitの値によって保存する振る舞いを変えていた.

ただし,fileをuploadした時にはこのcommitが消えていました.
バグなのかなぁと思いつつ,そこまで深追いはせずにAjaxで実直に実装した.

ここでは,jQuery Form Pluginを使用した.

view

<%= content_for(:javascript) do %>
  <%= javascript_include_tag '/js/jquery.from.js' %>
  <%= javascript_tag do -%> 
    $(function(){
      $('form').ajaxForm({
        dataType:'json',
        success: processJson
      });
    });

    function processJson(data){
      $('#foo_logo').attr('src',data.logo_img_url);
      $('.hidden').empty();
      $('.hidden').append('<input name="foo_id" type="hidden" value="'+ data.foo_id +'" />');
    }
  <% end %>
<% end %>
</script>

(snip)

<%= image_tag @foo.logo_img.url(:medium), :id => "foo_logo" %>
<%= form_for @foo, :url => '/foo/edit/', :html => {:multipart => true} do |f| %>
 <input id="tokentag" type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
 <%= f.file_field :logo %>
 <%= f.submit "logo" %>

 <%= f.text_field :name %>
 <%= f.submit "all" %>
<% end %>

こんな感じで書いて,後はcontroller側でjsonを返すとcommitの値も取れて無事解決.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>