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);
*目次 [#n755f4d8]
#contents
*関連ページ [#w18db114]
*参考情報 [#zcba7473]

-[[Rails / Ajaxを使って画面遷移しない一時保存機能をつける | Workabroad.jp:http://www.workabroad.jp/posts/2091]]
-[[Ruby - RailsでAjaxを使ってインクリメンタルサーチ - Qiita:http://qiita.com/Kta-M/items/99003e6d9d98b0ba512f]]

*概要 [#v5b7c337]
-formの内容をcommitしたい場合、jQuery Form Pluginのような便利なライブラリを使ったほうが便利。

*フォームの内容の自動保存する [#oec0ecd3]
-[[Rails / Ajaxを使って画面遷移しない一時保存機能をつける - Qiita:http://qiita.com/shunwitter/items/bdad11ec7d4a99ca3d3b]]より。
**フォームの入力フィールド [#e8da407e]
-class="create-temp"のdivがポイント
#pre{{
<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版) [#i4e5cc2d]
-submit用に[[jQuery Form Plugin:http://malsup.com/jquery/form/]]を使う。
-keydownにより何か変更があったら5秒後に送信されることになる。
#pre{{
    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 [#b1676ad0]
-上記JavaScriptでPostしているrouteをを作成。
#pre{{
  post '/posts/temp', to: 'posts#create_temp', as: :temp_post
}}
**コントローラー [#kf46062d]
-createは通常の保存処理。create_tempからajaxから呼ばれるメソッド。
#pre{{
  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[#va8d45d5]
-create_temp.js.erbの内容
#pre{{
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();

}}