RailsでTwitterBootstrap RubyOnRails

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

投稿日:

 

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
-,

執筆者:

関連記事

no image

Rails3でrtfを出力

  rtfはリッチテキストフォーマット、ms wordなどで扱えるほか、標準添付のwordpadなどでも扱える config/initializers/mime_types.rbを編集 [c …

collection_selectに複数カラムのテキスト情報を表示

include multiple column value in Ruby on rails Collection_select. Also format the date モデルに [crayon- …

no image

Rails3部分テンプレートとAjax化のまとめ

参考 guides.rubyonrails.org/layouts_and_rendering.html#using-partials また混乱したので公式を参考にして書き直しました 目次1 部分テン …

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

    前提 今度こそRails3.2からdocxを生成する テンプレートからデータを代入してdocxを作れるようになったけど、実際には過去のデータを流用して新しいdocxを作りた …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …