blog.takuyan.com

Ruby & Javascript & Hack

Rails3とjQueryを使ってAjaxのloadingとかcompleteを表示する方法

はじめに


Railsが3になってしばらく経ちました。
数々の新機能や大幅な機能拡張があり、その中にはjavascriptに関する変更もありました。
いままでデフォルトでprototype.jsを基本としたJavascriptフレームワークを使用していたのを、Rails3からはシンプルに(jrailsを使うことなく)jQueryを使うことができるようになりました。*1
正確には、特定のjavascriptフレームワークに囚われない、ですかね。


それで、link_to_remote が link_to hoge_url, :remote => true に変更になったとかは割と文献があるんですが、次のステップで必ずぶち当たるであろう「じゃあloadingとかどうすんだよ」という文献があまり見当たらなかったので書いてみようと思います。

結論

  1. rails.jsをちょっと改造する
  2. jquery.js rails.js application.js の順に呼び出す
  3. jqueryのliveで引っ掛ける
rails.jsをちょっと改造


2011/01/6現在のjquery-ujsをすこし改造します(ここでダメな気もするが)pull requestもでてるからきっと平気。気にしない。
2011/01/07に取り込まれたので割愛。

jquerylive関数で引っ掛ける


Haml

= link_to "Ajaxなリンク", hoge_url, remote: true, method:  :post, id:  "hoge_id"


jquery

$(function(){
  $("#hoge_id")
    .live("ajax:beforeSend", function(){ alert("loading"); }) 
    .live("ajax:success", function(){ alert("success"); }) 
    .live("ajax:error", function(){ alert("error"); }) 
    .live("ajax:complete", function(){ alert("complete"); });
});

おわりに


Railsを触り始めて、かれこれ3年目になりますが、進歩が早くて、最近では、とても本なんか買っていられないですねぇ。
The Pragmatic Bookshelf のように電子書籍で随時更新がかかるものを買うというのは良い選択肢だと思います。


また周辺知識も量も膨大になってきていて、Rackから始まり、REST、Mongodb、テスト(Rspec)、セキュリティ、キャッシュなどなど、「どこまでおぼえることがあるんじゃクソがっ」と若干キレ気味ではあります。
ただ、最新技術を突っ走るあたりは技術者冥利に尽きるの一言です。やっぱりRailsって楽しいですよ。お試しあれ。

*1:Rails3でjqueryを使うには、[https://github.com/rails/jquery-ujs:title=jquery-ujs]というものが必要です。