「javascript」タグアーカイブ

オイラーの関数とメビウスの関数を計算


代数系入門(松坂和夫) の 第1章 §8 問題1 の解答です。

続きを読む オイラーの関数とメビウスの関数を計算


Pepper の会社が、できる javascript エンジニア を募集しています


ロボット業界で日本初の事例を連発するあの会社、生活革命が、javascriptエンジニアを募集しています。

Pepper が開発者を募集しています

続きを読む Pepper の会社が、できる javascript エンジニア を募集しています


jQuery.validationEngine: ポップアップの位置を変更する方法


jQuery.validationEngine で、 ポップアップの位置を変更する方法をまとめました。

続きを読む jQuery.validationEngine: ポップアップの位置を変更する方法


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 として 他のところで使えないので、 上に書いたやり方の方がきれいに見えます。