よく忘れることなのでメモしておきます。
application.js.coffee
Rails では あらかじめ application.js が用意されていますが、 これを coffeescript の形式にしたいと思うことがよくあります。 そういうときは次のように 上部のコメントアウト // を # に書き換えます。
|
|
# This is a manifest file that'll be compiled into application.js, which will include all the files # listed below. # # Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, # or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path. # # It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the # compiled file. # # Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details # about supported directives. # #= require jquery #= require jquery_ujs #= require turbolinks # require_tree . |
最後の require_tree は意図的に無効にしています。 余計な javascript まで読み込むので。
こちらは Rails 4.2.5, Ruby 2.0.0 で動くことを確認しています。
また、 Rails の変数・定数を使いたい場合に application.js.erb にしたこともあります。
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 を使う上では問題がありました。
問題になるのは次のコードです。
|
|
<%=form_for(@user, html: {'data-ng-submit': 'mainCtrl.create()', novalidate: :novalidate, name: 'createForm'}) do |f|%> <%=f.label :name%> <%=f.text_field :name, required: :required, 'data-ng-model': 'user.name'%> <button>submit</button> <%end%> |
このコードでは、 ボタンをクリックすると AngularJS による処理が実行された後で 本来の form の処理が実行されます。
AngularJS は、 action 属性 がないときは 本来の form の処理を行わないのですが、 Rails で action 属性 が自動でつけられている以上どうしようもありません。 いや、 action 属性 を消す方法があるのかもしれませんが、 私は見つけることができませんでした。
解決法
form タグ に onsubmit="return false;" を付け加えます。
|
|
<%=form_for(@user, html: {'data-ng-submit': 'mainCtrl.create()', novalidate: :novalidate, name: 'createForm', onsubmit: "return false;"}) do |f|%> <%=f.label :name%> <%=f.text_field :name, required: :required, 'data-ng-model': 'user.name'%> <button>submit</button> <%end%> |
button タグ で type="button" とすると、 ボタンクリック時はどうにか二重処理を防げますが、 入力欄で Enter を押されたときは防げません。
また AngularJS: How to prevent form submission after click on button? に記載されているような方法もありますが、 javascript として 他のところで使えないので、 上に書いたやり方の方がきれいに見えます。
javascript を使ってテーブルをソートすることになった。ドットインストールを見ると複数項目でソートする方法まで載っている・・・が、これを一般化してどんなテーブルでもソートできるようにするにはどうするか考えてみた。公開されているライブラリもあるんですけどね。
続きを読む javascript でテーブルをソートする方法 →
Ruby On Rails のシステムの中でツールチップを表示しようと思ったときのメモです。
やることは単純で、クリックされたらヘルプを表示して、もう一度クリックされたらヘルプを隠すというものです。はてなマークがクリックされたらツールチップを表示・非表示するということです。
実装は javascript (jQuery) と CSS で行いました。そして Rails の helper に便利メソッドを作りました。以下がそのコード。
環境
- Ruby 1.8.7p374
- Rails 3.0.1
- jQuery 1.4.3
基本
|
|
.help-tooltip { max-width: 600px; background-color: #fff; display: none; z-index: 10; font-size: 12px; position: static; border: solid 1px black; padding: 2px; } |
|
|
$('.help-tooltip-trigger').live( 'click', function () { $(this).next().slideToggle('fast'); } ); |
上のように javascript と css を記述して、次のように HTML を書きます。
|
|
<span class="help-tooltip-trigger"> <img src="image/quotation.png" style="width:16px;height:16px;" /> </span> <div class="help-tooltip"> <p>ヘルプメッセージ</p> </div> |
image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。
正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。
helper の活用
Rails には helper というものがあるので活用してみます。
|
|
def help_tooltip(message, size = '16x16') result = content_tag(:span, {:class => 'help-tooltip-trigger'}) do image_tag 'icons/question.png', :size => size end result += content_tag(:div, {:class => 'help-tooltip'}) do raw message end return result end |
このメソッドを次のようにして使うと、上に書いた HTML のように出力されます。
|
|
<%=help_tooltip '<p>ヘルプメッセージ</p>', '16x16'%> |
2番目の引数はデフォルト値を設定しており、引数がなくてもいいようにしています。
私がこの tooltip 表示を書き始めたら ほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。
ランダムなパスワードを作りたいときに使えるパスワードジェネレータを作りました。
続きを読む パスワードジェネレータ →
A Life Summary of an Gypsy
