Rails/Ajax の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails/Ajax へ行く。
  • 1 (2015-06-22 (月) 04:52:02)
  • 2 (2015-10-28 (水) 12:16:43)
  • 3 (2015-10-29 (木) 08:07:19)
  • 4 (2016-02-18 (木) 07:07:35)

Tag: Rails/Ajax

目次†

関連ページ†

• Rails
• Rails/検証

参考情報†

• Rails / Ajaxを使って画面遷移しない一時保存機能をつける | Workabroad.jp
• Ruby - RailsでAjaxを使ってインクリメンタルサーチ - Qiita
• formの内容をcommitしたい場合、jQuery Form Pluginのような便利なライブラリを使ったほうが便利。

フォームの内容の自動保存する†

• Rails / Ajaxを使って画面遷移しない一時保存機能をつける - Qiitaより。

フォームの入力フィールド†

• class="create-temp"のdivがポイント

  <div class="blog-form">
      <%= form_for(@post) do |f| %>
  
          <%= f.text_field :tilte %>
          <%= f.text_area :body %>
          <!-- for temporal saving -->
          <div class="create-temp"></div>
          <%= f.submit "送信する" %>
  
      <% end %>
  </div>
  

フォームの送信処理部分(JavaScript版)†

• submit用にjQuery Form Pluginを使う。
• keydownにより何か変更があったら5秒後に送信されることになる。
• spanのdeta-result属性がtrueでない場合はcreate-tempを、trueの場合はupdateを呼び出すようにする。

    var ready, tempSubmit;

    ready = function() {
        if ($('.create-temp')) {
            window.tempTimer = null;
            return $('.blog-form form').keydown(function() {
                window.clearTimeout(tempTimer);
                return window.tempTimer = window.setTimeout(function() {
                    return tempSubmit();
                }, 5000);
            });
        }
    };

    tempSubmit = function() {
        if ($('.create-temp span').data('result') !== true) {
            return $(".blog-form form").ajaxSubmit({
                url: '/posts/temp',
                type: 'post'
            });
        } else {
            return $(".blog-form form").ajaxSubmit();
        }
    };

    $(document).ready(ready);
    $(document).on('page:load', ready);

routes.rb†

• 上記JavaScriptでPostしているrouteをを作成。

    post '/posts/temp', to: 'posts#create_temp', as: :temp_post
  

コントローラー†

• createは通常の保存処理。create_tempからajaxから呼ばれるメソッド。

    def create
      @post = Post.new(post_params)
  
      if @post.save
        redirect_to(@post)
      else
        render('new')
      end
  
    def create_temp
      @post = Post.new(post_params)
      @post.save
    end
  
  
    def update
      respond_to do |format|
        if @post.update(post_params)
          format.js {}
          format.html {redirect_to @post, notice: 'Post was successfully updated.'}
        else
          format.js {}
          format.html {render :edit}
        end
      end
    end
  

レスポンス用のjs.erb†

• create_temp.js.erbの内容

  var result = <%= @post.valid? %>;
  var msg = "";
  var notice = "";
  
  if (result == true) {
      msg = "下書き保存されました";
  
      // This is for Temporal saving
      // forcing the form to look update method.
  
      // Add id
      $('.blog-form form').prepend('<input name="post[id]" type="hidden" value="<%= @post.id %>">');
  
      // Chnage REST method
      $('.blog-form input[name=_method]').remove();
      $('.blog-form form').prepend('<input name="_method" type="hidden" value="patch">');
  
      // Change URL
      $('.blog-form form').attr('action', '/posts/<%= @post.id %>');
  
  } else {
      msg = "下書き保存のための情報が足りません";
  }
  
  
  // Message
  notice = "<span data-result=" + result + ">" + msg + "</span>";
  $('.create-temp span').remove();
  $('.create-temp').hide().append(notice).fadeIn();
  
  

• update.js.erbの内容。

  var persisted = <%= @post.persisted? %>;
  var result = <%= @post.valid? %>;
  var msg = "";
  if (result == true) {
      msg = "下書きが更新保存されました";
  } else {
      msg = "下書き更新保存のための情報が足りません";
  }
  // Message
  notice = "<span data-result=" + persisted + ">" + msg + "</span>";
  $('.create-temp span').remove();
  $('.create-temp').hide().append(notice).fadeIn();
  
  

flashメッセージの取り扱い†

• 通常のrequestと取り扱いがことなるためajax_requestで設定したメッセージが2重に表示されたりする場合がある。
• How do you handle Rail's flash with Ajax requests? - Stack Overflow
• これを回避するためにApplicationControlerにafter_filterを設定する。

    after_filter :clear_flash
  
    private
    def clear_flash
      flash.discard if request.xhr?
    end
  

トラブルシューティング†

js.erbがレンダリングされない†

• 例えばupdateメソッドでupdate.js.erbが実行されない。
• 以下のようにresponde_toで、「format.js {}」を追加する必要がある。
• さらにformat.jsが、format.htmlより先にないとだめかも？

    def update
      respond_to do |format|
        if @post.update(post_params)
          format.js {}
          format.html {redirect_to @post, notice: 'Post was successfully updated.'}
        else
          format.js {}
          format.html {render :edit}
        end
      end
    end