Rails/Ajax
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails/Ajax);
*目次 [#n755f4d8]
#contents
*関連ページ [#w18db114]
-[[Rails]]
-[[Rails/検証]]
*参考情報 [#zcba7473]
-[[Rails / Ajaxを使って画面遷移しない一時保存機能をつける...
-[[Ruby - RailsでAjaxを使ってインクリメンタルサーチ - Qii...
-formの内容をcommitしたい場合、[[jQuery Form Plugin:http:...
*インクリメンタル検索の実装 [#ubc92a8e]
**フォームとJavaScript [#j217fe3c]
-ransackを使った検索フォーム
#pre{{
<!-- 検索フォーム部分 -->
<%= search_form_for(@search) do |f| %>
<%= f.text_field :title_cont, {:placeholder => ...
<% end %>
}}
-JavaScript部分。jQueryを使用して一定時間ごとにイベントを...
#pre{{
<!-- JavaScript部分 -->
<script type="text/javascript">
// 内容の自動保存処理
var preFunc = null;
var preInput = ''
var input = '';
var timeoutValue = 10;
ajaxPost = function() {
$("#book_search").ajaxSubmit({
url: '/books/',
type: 'get'
});
}
$('#q_title_cont').on('keyup', function () {
input = $.trim($(this).val()); //前後の不要な空白を...
if (preInput !== input) {
clearTimeout(preFunc);
preFunc = setTimeout("ajaxPost()", timeoutValue);
}
preInput = input;
});
</script>
}}
-コントローラー。通常検索件Ajaxを処理する場合respond_toで...
#pre{{
def index
@books = @search.result.page(params[:page])
respond_to do |format|
format.js {}
format.html {}
end
end
}}
-index.js.erb。もともとのコンテンツを隠し検索結果を表示す...
#pre{{
$("#main_content").hide();
$("#booklist_list").show();
$("#booklist_list").html("<div class='well'><h2>インクリ...
}}
*フォームの内容の自動保存する [#oec0ecd3]
-[[Rails / Ajaxを使って画面遷移しない一時保存機能をつける...
**フォームの入力フィールド [#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/...
-keydownにより何か変更があったら5秒後に送信されることにな...
-spanのdeta-result属性がtrueでない場合はcreate-tempを、tr...
#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.setTimeo...
return tempSubmit();
}, 5000);
});
}
};
tempSubmit = function() {
if ($('.create-temp span').data('result') !== tru...
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_...
}}
**コントローラー [#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.js {}
format.html {redirect_to @post, notice: 'Post was...
else
format.js {}
format.html {render :edit}
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]" ...
// Chnage REST method
$('.blog-form input[name=_method]').remove();
$('.blog-form form').prepend('<input name="_method" t...
// Change URL
$('.blog-form form').attr('action', '/posts/<%= @post...
} else {
msg = "下書き保存のための情報が足りません";
}
// Message
notice = "<span data-result=" + result + ">" + msg + "</s...
$('.create-temp span').remove();
$('.create-temp').hide().append(notice).fadeIn();
}}
-update.js.erbの内容。
#pre{{
var persisted = <%= @post.persisted? %>;
var result = <%= @post.valid? %>;
var msg = "";
if (result == true) {
msg = "下書きが更新保存されました";
} else {
msg = "下書き更新保存のための情報が足りません";
}
// Message
notice = "<span data-result=" + persisted + ">" + msg + "...
$('.create-temp span').remove();
$('.create-temp').hide().append(notice).fadeIn();
}}
*flashメッセージの取り扱い [#ya8fb586]
-通常のrequestと取り扱いがことなるためajax_requestで設定...
-[[How do you handle Rail's flash with Ajax requests? - S...
-これを回避するためにApplicationControlerにafter_filterを...
#pre{{
after_filter :clear_flash
private
def clear_flash
flash.discard if request.xhr?
end
}}
*トラブルシューティング [#jb3edf89]
**js.erbがレンダリングされない [#r8751e38]
-例えばupdateメソッドでupdate.js.erbが実行されない。
-以下のようにresponde_toで、「format.js {}」を追加する必...
-さらにformat.jsが、format.htmlより先にないとだめかも？
#pre{{
def update
respond_to do |format|
if @post.update(post_params)
format.js {}
format.html {redirect_to @post, notice: 'Post was...
else
format.js {}
format.html {render :edit}
end
end
end
}}
** ActionController::UnknownFormatエラーが発生する [#e849...
-コントローラーにビューから呼び出されるメソッドは存在する...
#pre{{
respond_to do |format|
format.js { }
end
}}
-このrespond_to自体がなくても改善しない。原因としてありが...
-あるいはJavaScriptを使ってonclickでsubmit()処理を実行し...
終了行:
&tag(Rails/Ajax);
*目次 [#n755f4d8]
#contents
*関連ページ [#w18db114]
-[[Rails]]
-[[Rails/検証]]
*参考情報 [#zcba7473]
-[[Rails / Ajaxを使って画面遷移しない一時保存機能をつける...
-[[Ruby - RailsでAjaxを使ってインクリメンタルサーチ - Qii...
-formの内容をcommitしたい場合、[[jQuery Form Plugin:http:...
*インクリメンタル検索の実装 [#ubc92a8e]
**フォームとJavaScript [#j217fe3c]
-ransackを使った検索フォーム
#pre{{
<!-- 検索フォーム部分 -->
<%= search_form_for(@search) do |f| %>
<%= f.text_field :title_cont, {:placeholder => ...
<% end %>
}}
-JavaScript部分。jQueryを使用して一定時間ごとにイベントを...
#pre{{
<!-- JavaScript部分 -->
<script type="text/javascript">
// 内容の自動保存処理
var preFunc = null;
var preInput = ''
var input = '';
var timeoutValue = 10;
ajaxPost = function() {
$("#book_search").ajaxSubmit({
url: '/books/',
type: 'get'
});
}
$('#q_title_cont').on('keyup', function () {
input = $.trim($(this).val()); //前後の不要な空白を...
if (preInput !== input) {
clearTimeout(preFunc);
preFunc = setTimeout("ajaxPost()", timeoutValue);
}
preInput = input;
});
</script>
}}
-コントローラー。通常検索件Ajaxを処理する場合respond_toで...
#pre{{
def index
@books = @search.result.page(params[:page])
respond_to do |format|
format.js {}
format.html {}
end
end
}}
-index.js.erb。もともとのコンテンツを隠し検索結果を表示す...
#pre{{
$("#main_content").hide();
$("#booklist_list").show();
$("#booklist_list").html("<div class='well'><h2>インクリ...
}}
*フォームの内容の自動保存する [#oec0ecd3]
-[[Rails / Ajaxを使って画面遷移しない一時保存機能をつける...
**フォームの入力フィールド [#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/...
-keydownにより何か変更があったら5秒後に送信されることにな...
-spanのdeta-result属性がtrueでない場合はcreate-tempを、tr...
#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.setTimeo...
return tempSubmit();
}, 5000);
});
}
};
tempSubmit = function() {
if ($('.create-temp span').data('result') !== tru...
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_...
}}
**コントローラー [#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.js {}
format.html {redirect_to @post, notice: 'Post was...
else
format.js {}
format.html {render :edit}
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]" ...
// Chnage REST method
$('.blog-form input[name=_method]').remove();
$('.blog-form form').prepend('<input name="_method" t...
// Change URL
$('.blog-form form').attr('action', '/posts/<%= @post...
} else {
msg = "下書き保存のための情報が足りません";
}
// Message
notice = "<span data-result=" + result + ">" + msg + "</s...
$('.create-temp span').remove();
$('.create-temp').hide().append(notice).fadeIn();
}}
-update.js.erbの内容。
#pre{{
var persisted = <%= @post.persisted? %>;
var result = <%= @post.valid? %>;
var msg = "";
if (result == true) {
msg = "下書きが更新保存されました";
} else {
msg = "下書き更新保存のための情報が足りません";
}
// Message
notice = "<span data-result=" + persisted + ">" + msg + "...
$('.create-temp span').remove();
$('.create-temp').hide().append(notice).fadeIn();
}}
*flashメッセージの取り扱い [#ya8fb586]
-通常のrequestと取り扱いがことなるためajax_requestで設定...
-[[How do you handle Rail's flash with Ajax requests? - S...
-これを回避するためにApplicationControlerにafter_filterを...
#pre{{
after_filter :clear_flash
private
def clear_flash
flash.discard if request.xhr?
end
}}
*トラブルシューティング [#jb3edf89]
**js.erbがレンダリングされない [#r8751e38]
-例えばupdateメソッドでupdate.js.erbが実行されない。
-以下のようにresponde_toで、「format.js {}」を追加する必...
-さらにformat.jsが、format.htmlより先にないとだめかも？
#pre{{
def update
respond_to do |format|
if @post.update(post_params)
format.js {}
format.html {redirect_to @post, notice: 'Post was...
else
format.js {}
format.html {render :edit}
end
end
end
}}
** ActionController::UnknownFormatエラーが発生する [#e849...
-コントローラーにビューから呼び出されるメソッドは存在する...
#pre{{
respond_to do |format|
format.js { }
end
}}
-このrespond_to自体がなくても改善しない。原因としてありが...
-あるいはJavaScriptを使ってonclickでsubmit()処理を実行し...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
