jquery-ujsとはRuby on RailsについてくるJavaScriptのライブラリ。エレメントのdata-*属性にいろいろ書くだけでいろいろしてくれる。
rails/jquery-ujs - Ruby on Rails unobtrusive scripting adapter for jQuery
This unobtrusive scripting support file is developed for the Ruby on Rails framework, but is not strictly tied to any specific backend.
unobtrusiveとはでしゃばらないとか控えめなという意味だそうです。
インストール
どうやってもいいですが一例としてbowerで。
$ bower install jquery-ujs
で、HTMLに読み込む。
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ujs/src/rails.js"></script>
</head>
<body>
<?php var_dump($_POST); ?>
</body>
</html>
ここまでテンプレ。
アンカークリック時にPOSTやDELETEする
<a href="index.php" data-method="delete">DELETE!</a>
実際にはdeleteではなくpostして_methodパラメータにdeleteがセットされる。csrfトークンもpostしたい場合はmetaタグで指定する。
<meta name="csrf-param" content="token" />
<meta name="csrf-token" content="abcde" />
リンクをクリックすると以下のように表示される。
array(2) { ["_method"]=> string(6) "delete" ["token"]=> string(5) "abcde" }
アンカーリック時にconfirmを表示させる
<a href="index.php" data-confirm="本当に？">Go!</a>
window.confirm()が表示される。よりリッチなダイアログを表示したい場合は、
$.rails.confirmをオーバーライドする。
もう一つ重要な機能としてajax関連があるんだけど調べたら書く。
→書きました JavaScript - Rails以外でjquery-ujsを使う（ajax編） - Qiita
追記:Laravelでの例
Unobtrusive JavaScript with jquery-ujs and Laravel – Barry vd. Heuvel