Railsで画面遷移なしでレコードを作成&更新したいことがよくあるので、CoffeeScriptを使った実装パターンをまとめてみました。
Railsのほうでは/blog/site_configs
コントローラがJSON APIになっていて、create
アクションとupdate
アクションが実装してあるとします
なお、この記事ではCoffeeScriptのサンプルコードだけご紹介しますが、RailsとHTMLまで含めたコードについては元記事「Rails4でhas-one関連先のレコードをCoffeeScriptから作成&更新する」の方をご覧ください。
下記のCoffeeScriptでは
- 「編集」ボタンを押したら入力フォームを表示する
- 「保存」ボタンを押したら
create
アクションかupdate
アクションをリクエストする - 保存できたら入力フォームを非表示にする
という動作を記述しています。
# app/assets/javascripts/blog/sites/index.coffee
$ ->
$('body#blog-sites-index-page').each ->
$('button.redirect-to-edit').click ->
showBlogSiteConfigForm($(@).data('blog-site-id'))
showBlogSiteConfigForm = (blogSiteId) ->
$("tr#blog-site-#{blogSiteId} span.blog-site-config-edit").slideDown()
$("tr#blog-site-#{blogSiteId} span.blog-site-config-show").slideUp()
hideBlogSiteConfigForm = (blogSiteId) ->
$("tr#blog-site-#{blogSiteId} span.blog-site-config-edit").slideUp()
$("tr#blog-site-#{blogSiteId} span.blog-site-config-show").slideDown()
$('button.redirect-to-save').click ->
createOrUpdateBlogSiteConfig($(@).data('blog-site-id'))
createOrUpdateBlogSiteConfig = (blogSiteId) ->
id = blogSiteConfigIdOf(blogSiteId)
if id
url = "/blog/site_configs/#{id}/"
method = 'PUT'
else
url = '/blog/site_configs/'
method = 'POST'
$.ajax url,
type: method,
data:
site_config: blogSiteConfigParams(blogSiteId)
dataType: 'json'
success: (data) ->
receiveBlogSiteConfig(blogSiteId, data)
hideBlogSiteConfigForm(blogSiteId)
blogSiteConfigIdOf = (blogSiteId) ->
$("tr#blog-site-#{blogSiteId} td.blog-site-config").data('id')
blogSiteConfigParams = (blogSiteId) ->
site_id: blogSiteId,
redirect_to: $("tr#blog-site-#{blogSiteId} input.redirect-to-input").val()
receiveBlogSiteConfig = (blogSiteId, data) ->
$("tr#blog-site-#{blogSiteId} td.blog-site-config").data('id', data['id'])
$("tr#blog-site-#{blogSiteId} p.redirect-to-show").text(data['redirect_to'])
$("tr#blog-site-#{blogSiteId} input.redirect-to-input").val(data['redirect_to'])