Rails4でhas-oneなレコードをCoffeeScriptから作成する

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'])

参考

• Rails4でhas-one関連先のレコードをCoffeeScriptから作成＆更新する