テキストをクリックして入力フォームを出現させる (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()
表示する要素と表示しない要素を用意して同時に表示・非表示を切り替えることで、見かけ上変化させるのがコツですね〜。