テキストをクリックして入力フォームを出現させる (rails+haml+coffee)

一覧画面とかで、表示されているテキストクリックしたら入力フォームが出現して、 サクッと内容変更できたらカッコ良いじゃないですか。 例えばブログ記事のタイトルとか、クリックしたら編集できるようになるとか。

というわけで毎度のメモです。

haml

#posts
  - @posts.each do |post|
    .title
      .value= post.title
      = text_field :post, :title, class: :field

scss

.title {
  .value {
    display: inline;
  }
  .field {
    display: none;
  }
}

coffee

$('.value').on('click', ->
  $(@).hide()
  $(@).next('.field').show()
                     .val($(@).text())
                     .focus()
)

$('.field').on('blur', ->
   # $.ajax
   #   hogehoge

   $(@).hide()
   $(@).prev('.value').show()

# 直感的にはEnterで確定したいので作ったる
$('.label_field').keypress (e) ->
  if e.which == 13
    e.target.blur()

ちなみに

単純なテキストの切り替えだったらこんな感じ。

haml

#toggle_me
  #showing.toggle_pair Toggle Me!!
  #hidden.toggle_pair Toggled!!

:scss
  #hidden {
    display: none;
  }

coffee

$('#toggle_me').on 'click', ->
  $(@).children('.toggle_pair').toggle()

表示する要素と表示しない要素を用意して同時に表示・非表示を切り替えることで、見かけ上変化させるのがコツですね〜。