この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
プレビュー機能って結構考慮する部分が多くて面倒だったりします。のでそこで自分がよく使っていることを紹介します。
よくあるプレビュー機能の作り方
ボタンにパラメーターをつけてアクション内のif文で分けたりするapp/views/products/edit.slim
= form_for @product do |f| ・ ・ ・ = f.submit '保存', name: :submit, value: :save = button_tag 'プレビュー', name: :submit, value: :preview, formtarget: :_blank
app/controllers/products_controller.rb
def create
if params[:submit] == 'preview'
render 'show'
else
@product.save
.
.
.
end
def update
if params[:submit] == 'preview'
.
.
.
end
煩雑すぎる！！
のでアクションを分けましょう。
でもformの向き先は1つなので通常では分けられないです。
が、そこでjavascriptの登場です。
おすすめなプレビュー機能の作り方
app/controllers/products_controller.rb
def preview
.
.
.
end
app/views/products/edit.slim
= form_for @product, html: { id: :product_form } do |f|
・
・
・
= f.submit '保存'
= link_to 'プレビュー', 'javascript:void(0)', id: :preview_button, data: { request_url: preview_product_path(@product)}
app/assets/javascripts/products.coffee
“`
$main_form = $(‘#product_form’)
$preview_button = $(‘#preview_button’)
$preview_button.click ->
original_action = $main_form.attr(‘action’)
$main_form.attr(‘action’, $(this).data(‘request-url’))
$main_form.attr(‘target’, ‘_blank’)
$method = $main_form.find(“input[name=’_method’]”)
$main_form.find(“input[name=’_method’]”).remove()
$main_form.submit()
$main_form.append($method)
$main_form.attr(‘action’, original_action)
$main_form.removeAttr(‘target’)
“`
ボタンを押したときにformの向き先を変えて仕舞えばいいのです！
変えた後は元に戻すのを忘れずに。
この方法はプレビュ−機能以外にも応用できるのでぜひ使ってみてください
