Rails/Ajax の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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 / 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秒後に送信されることになる。

      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.html { redirect_to @post, notice: 'Post was successfully updated.' }
          format.json { render :show, status: :ok, location: @post }
        else
          format.html { render :edit }
          format.json { render json: @post.errors, status: :unprocessable_entity }
        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();