RailsでTwitterBootstrap RubyOnRails

Rails3.2.11でTwitterBootstrapのモーダルをフォームに使う例

投稿日:2013年1月12日 更新日:

はじめに

Rails3.2でTwitterBootstrap導入のあれこれ
sass-rails-bootstrapとsimple_formを使っている

Rails3.2でCoffeeScriptをerbテンプレートとして使う件

 

CoffeeScriptをテンプレートにつかう件がわかったのでTwitterBootstrapのモーダルをフォームにしてみた

よくあるScaffoldから

index.html.erbのnew_***_pathのremoteオプションをtrueにする

 

index.html.erbにモーダルを準備する

フォームまで全部準備するとフォーム用のオブジェクトを用意しないといけない(@単数形のやつ)ので、divだけ

twitter.github.com/bootstrap/javascript.html#modals

controllerのnewアクションにjsフォーマットを足す

 

new.js.coffeeをつくる

jQueryでフォームをrenderした後、TwitterBootstrapのスクリプトからモーダルをshowする

ここでjsエスケープを忘れるとrenderした”などがエスケープされずにActionView::Template::Error (SyntaxError: reserved word “class” can’t be assigned on line 5):みたいなエラーが出て悩むことになる

また、要素を追加せずにDismissした場合には足したフォーム要素を削除しておかないと、またモーダルを呼んだときに二重にフォームが追加されてしまう

 

formのremoteオプションをtrueにする

このままだとモーダルが消えないのでモーダルを隠す操作をする必要がある

 

controllerのcreateアクションにjsフォーマットを足す

 

create.js.coffeeをつくる

ここではモーダルをhideして、足したフォーム要素を削除した

そうしないとまたNewするとフォーム要素が2つ足されてしまう

Railsでつくった要素にはたいていIDがついているのでそれを調べればOK

2013-01-12_00h39_16

最後にindexのテーブル要素に新しく足したデータを加える必要があるけど、ajax datatablesでjsonを呼んだり、jqueryでappendしたりすればよいんじゃないでしょうか

-RailsでTwitterBootstrap, RubyOnRails
-,

執筆者:

関連記事

Railsで前のデータを使って新規作成

By: Jonathan Combe – CC BY 2.0 目次1 前提2 構想3 routes.rb4 view5 documents_controller6 view7 DEKITA …

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja

no image

Rubyで対話型のコマンドを実行する~pty expect

  Rubyから普通のLinuxコマンドを実行するのはコマンドで実行できる たとえば、Linuxコマンドがなんらかの入力を要求するときはexpectライブラリを使えばいいらしい www.ru …

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …