自作redmineプラグインをjquery+ajax対応にする

select_tagでのajax処理をjqueryに対応させる

redmine-2.1.xでやっとjquery対応になった。自作のredmine_videoプラグインも若干ながら'prototype.js'の機能を使用しており、そのままだとエラーになってしまう部分があるため、修正した。

edit/index.html.erb
ビデオ簡易編集のビュー内でremote_functionを使っていた部分を、jquery + ajaxに変更

編集モード切替select_tagのonChangeでフォーム内容を部分的に切り替える処理をremote_functionでやっていた以前のコード

<%= select_tag :mode,
    options_for_select([["Delay Time",0],["Clip Time",1]],@mode),
    :onchange => remote_function(:url => {:action => :select_mode}, :with => "'mode='+this.value+"+@remote_params) %>

これを、以下のように変更

<%= select_tag :mode, options_for_select([["Delay Time",0],["Clip Time",1]],@mode), :params => @remote_params %>

このままでは何もしてくれないので

<!--%= javascript_include_tag 'edit-ajax.js', :plugin => 'redmine_video' %-->
<%= javascript_tag do %>
$(function(){
    $("#mode")
        .change(function(){
            var params = "mode=" + $(this).val() + $(this).attr('params');
            $.ajax({
                type: 'POST',
                url:"<%=url_for :action => :select_mode %>",
                data: params,
                dateType: "html",
                success:function(html){
                    //alert("result=" + html);
                    $('#attr').html(html);
                }
            }); // ajax
        }) // change.function
}); // jquery.function
<% end %>

というjquery+ajaxコードを追加。コメントにしているように外部ファイルにしてインクルードしたかったけど
そうするとなぜか動作してくれなかった。なんでかな？

':disable_with'もちゃんと動くようになった。
<%= submit_tag "実行", :name => "submit_execute", :data => {:disable_with=>"実行中"} %>

:confirmも動くようになった。
<%= submit_tag "保存", :name => "submit_save", :confirm => "Are you sure?" %>
<%= submit_tag "消去", :name => "submit_clear", :confirm => "Are you sure?" %>

対応版 edit/index.html.erb

<h2>ビデオ簡易編集</h2>

<%= form_tag :action =>'index',:id=>@issue.id, :result=>@result, :build=>@build do %>
<%= select_tag :mode, options_for_select([["Delay Time",0],["Clip Time",1]],@mode), :params => @remote_params %>

<div id='attr'>
<%= render :partial => 'attr' %>
</div>

<table>
  <tr><td>
    <%= submit_tag "実行", :name => "submit_execute", :data => {:disable_with=>"実行中"} %>
    <%= submit_tag "アップデート", :name => "submit_update" %>
    <br>
    <%= video_tag get_video_filename, :controls => true, :size =>"480x270" %>

    <% if @build %>
    <% if @build=='ok' && @result %>
    <td>
      <%= submit_tag "保存", :name => "submit_save", :confirm => "Are you sure?" %>
      <%= submit_tag "消去", :name => "submit_clear", :confirm => "Are you sure?" %>
      <br>
      <%= video_tag @result, :controls => true, :size =>"480x270" %>
      <% end %>
    <td><%= link_to @build, "/jenkins/job/edit_#{@issue.id}" %>
      <% end %>
</table>

<%= javascript_tag do %>
$(function(){
    $("#mode")
        .change(function(){
            var params = "mode=" + $(this).val() + $(this).attr('params');
            $.ajax({
                type: 'POST',
                url:"<%=url_for :action => :select_mode %>",
                data: params,
                dateType: "html",
                success:function(html){
                    //alert("result=" + html);
                    $('#attr').html(html);
                }
            }); // ajax
        }) // change.function
}); // jquery.function
<% end %>

コントローラの方も若干直した
controller: "edit", action: "select_mode"

# ajax partial render
  def select_mode
    get_params
    init_params
    remote_params
    render :partial => "attr" 
  end

前はよくわからないまま、renderの部分を

render :update do |page| page.replace_html "attr", :partial => "attr" 
end

ってやっていた。このままでも動くようだけれど、すっきりしてる方がいい。

引っかかったのは、jquery.ajaxを理解するところ。実際理解できたのかも分からないけど、自分なりの解釈はこうだ。

$("#mode").change(function({・・・
select_tagには、form_tagのように:remoteは効かない。よってjqueryでトリガーさせる必要がある

$.ajax({・・・
で、select_modeアクションへポストする

success:function(html){
で、結果を取得する

$('#attr').html(html);
で、部分的な更新を行う

多少納得いかないけれど、大体こんな感じなのでしょうか。
これで、ページ更新を必要としない非同期通知も出来そうなので、ビデオ再生制御情報をサーバーに送ることが出来るかな。

普通のフォームコミットのajaxとかだったらもっとすっきりするんだろうけど、今回のようなselect_tagでってなると、いきなり面倒なことになるね。
でもテンプレートとイベント処理を完全に分離できるところが実際の仕事では実用的な気がする。

とにかく、これで自作ビデオプラグインがjquery対応に出来たので、redmineを2.1.2に切り替えた。