jQuery UI Railsで使えるGem

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

投稿日:

 

前回

Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

 

フォルダの開け閉じを機能させる

前回までフォルダの開き閉じはできるようになったけど、閉じるときにその子ノードを削除していたので、
親を選択してから子ノードを選択すると、その子ノードまで選択されてしまうというバグがあった

autoCollapse

自動で開く閉じるをやってくれるオプション.
うまく機能したけど、あとからノードを足した場合はダメっぽい.

ので、autoCollapseは設定したうえで、さらに子ノードを追加したときに開くオプションをつけた.

expand:true

ノードをつくったとき初期状態で開いておくオプション.これも子ノードを追加したときには機能してない?
たぶんつくった子ノード自身を開くオプションで今回は子ノードをくっつけて、親ノード自身を開きたいので違う

LazyRead

ajaxを通信を想定してるんだけどうまく機能しなかった

 

コード

たぶん使い方としては、前についている+ボタンでフォルダの開閉をすることを想定してるぽい

結局、子ノードをつくるときに、すでにある子ノードは足さない方針にした

ちょっと冗長だけど

 

フォルダを追加するボタンをつくる

ダイアログフォームを設定する

次にjQuery UIのダイアログを利用してフォルダを追加するフォームをつくる

計画としてはこんな感じ

  1. index.htmlのボタンから、new_folder_pathをGETして、new.jsを取る
  2. new.jsでフォームダイアログを出現させる
  3. create.jsにいってダイアログを閉じる

index.htmlのボタンから、new_folder_pathをGETして、new.jsを取る

まず、remoteオプションをtrueにするとRailsはhtmlテンプレートじゃなくて、jsテンプレートを読みにいってくれる
ついでに、jQuery UIのButtonをつかって軽くリンクを装飾する

コントローラーにjsフォーマットを追加

app/assets/javascripts/folders.js.coffee

ボタン装飾をつける

new.jsでフォームダイアログを出現させる

jQueryでどこかにdiv要素をつくって、そこをダイアログにする

index.html.erb

app/views/folders/new.js.coffee

それっぽい

create.jsにいってダイアログを閉じる

まず、formのsubmitもjs通信にする

_form.html.erb

rermoteオプションをtrueにするだけ

コントローラーにjsフォーマットを追加

app/views/folders/create.js.coffee

ダイアログを閉じる

 

jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技

 

あとはドラッグアンドドロップと右クリックメニューをやりたい

-jQuery UI, Railsで使えるGem
-, ,

執筆者:

関連記事

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

Railsでhtmlファイルやリンク先のスクリーンショットを撮影~IMGKit&wkhtmltoimage

  github.com/csquared/IMGKit 目次1 環境2 wkhtmltoimageのインストール3 imgkitのインストール4 試す5 日本語フォント 環境 ubuntu …

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …