「javascript」タグアーカイブ

Rails application.js を application.js.coffee や application.js.erb にする


よく忘れることなのでメモしておきます。

application.js.coffee

Rails では あらかじめ application.js が用意されていますが、 これを coffeescript の形式にしたいと思うことがよくあります。 そういうときは次のように 上部のコメントアウト //# に書き換えます。

最後の require_tree は意図的に無効にしています。 余計な javascript まで読み込むので。

こちらは Rails 4.2.5, Ruby 2.0.0 で動くことを確認しています。

また、 Rails の変数・定数を使いたい場合に application.js.erb にしたこともあります。


AngularJS と Rails の form_for を組み合わせる


AngularJS と Rails の form_for を組み合わせて使ってみました。 何より厄介なのは action 属性 が 自動でついてしまうことです。

環境

  • Rails 4.1.8
  • Ruby 2.2.2
  • AngularJS 1.4.7
  • Ubuntu 15.04

状況

Rails の form_for を使うと、 Rails が action 属性 から すべて 設定してくれます。 もちろん、 form タグ の属性を 追加することもできます。 ただし AngularJS を使う上では問題がありました。

問題になるのは次のコードです。

このコードでは、 ボタンをクリックすると AngularJS による処理が実行された後で 本来の form の処理が実行されます。

AngularJS は、 action 属性 がないときは 本来の form の処理を行わないのですが、 Rails で action 属性 が自動でつけられている以上どうしようもありません。 いや、 action 属性 を消す方法があるのかもしれませんが、 私は見つけることができませんでした。

解決法

form タグ に onsubmit="return false;" を付け加えます。

button タグ で type="button" とすると、 ボタンクリック時はどうにか二重処理を防げますが、 入力欄で Enter を押されたときは防げません。

また AngularJS: How to prevent form submission after click on button? に記載されているような方法もありますが、 javascript として 他のところで使えないので、 上に書いたやり方の方がきれいに見えます。


javascript でテーブルをソートする方法


javascript を使ってテーブルをソートすることになった。ドットインストールを見ると複数項目でソートする方法まで載っている・・・が、これを一般化してどんなテーブルでもソートできるようにするにはどうするか考えてみた。公開されているライブラリもあるんですけどね。

続きを読む javascript でテーブルをソートする方法

ツールチップを表示するコード


Ruby On Rails のシステムの中でツールチップを表示しようと思ったときのメモです。

やることは単純で、クリックされたらヘルプを表示して、もう一度クリックされたらヘルプを隠すというものです。はてなマークがクリックされたらツールチップを表示・非表示するということです。

実装は javascript (jQuery) と CSS で行いました。そして Rails の helper に便利メソッドを作りました。以下がそのコード。

環境

  • Ruby 1.8.7p374
  • Rails 3.0.1
  • jQuery 1.4.3

基本

上のように javascript と css を記述して、次のように HTML を書きます。

image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。

正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。

helper の活用

Rails には helper というものがあるので活用してみます。

このメソッドを次のようにして使うと、上に書いた HTML のように出力されます。

2番目の引数はデフォルト値を設定しており、引数がなくてもいいようにしています。

私がこの tooltip 表示を書き始めたら ほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。