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

執筆者:

関連記事

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …

RailsでOAuthを使うには~OmniAuth

By: Freenerd – CC BY 2.0   github.com/intridea/omniauth   目次1 OmniAuthの受け持つ役割2 Rails …

文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit

By: the Italian voice 目次1 Best in place2 Mercury editor3 create.js4 スクラッチで5 X-editable Best in place …

no image

Mongoidで地理情報インデックスを使おうとしたけどうまくいかない

試したgem mongoid_geo mongoid_geospatial 試してないgem mongoid_spacial

no image

railsでdocxを生成する動画

  知り合いに試しに使ってもらうのに動画を作成しました