冷壞人技術部落格: 2015

2015年8月6日星期四

在經歷這麼多專案之後，時常會看到以下的設定，卻不知道是用來做什麼的：

Gemfile

gem 'jquery-rails'

application.js

//= require jquery
//= require jquery_ujs

來介紹一下貝殼幾乎每個專案都會使用到的： JQuery-ujs

舉例來說，會有以下幾個常用的狀況：

link_to "click me!", posts_path, data: { confirm: "Are you sure?" }

button_to "submit", posts_path, data: { diable_with: "loading..." }

simple_form_for @post, html: { multipart: true }, remote: true do |form|
...
end

這些設定會經由 Rails 內建的 ActionView::Helpers 產生相對應的 HTML：




<a ... data-remote="true">




<button ... data-confirm="Are you sure?">




<form ... data-disable-with="loading...">

而後引入 jquery_ujs 這支 Javascript 時，便會依照這些 data-xxx 屬性作出相對應的設定。
以 data-remote="true" 來說：

覆寫所有 click event / submit action，讓它們經由 AJAX 發送請求
綁定 4 個 AJAX callback function，在需要時可以覆寫這些 function（ajax:beforeSend, ajax:success, ajax:complete, ajax:error）

沒想到一行簡單的 code ，Rails 在背後做了這麼多事！
如果想瞭解更詳細的內容，可以參考 JQuery-ujs/rails.js

2015年8月3日星期一

最近在寫關鍵評論網的後台時，遇到了一個問題：無法利用 Rails Ajax 上傳檔案。

直覺的寫法：

simple_form_for @post, html: { multipart: true }, remote: true do |form|
...
end
這樣會發生錯誤，瀏覽器並不允許利用 HTTP Request 來上傳檔案。

那該怎麼辦呢？

藉由 Javascript，在網頁中動態加入一個隱藏的 iFrame，內嵌一個一模一樣的 Form，並利用一般的方式將檔案上傳，並將上傳成功的訊息回傳給使用者看到的 From，讓使用者產生瀏覽器利用 Ajax 上傳檔案的錯覺。


那在 Ruby on Rails 要怎麼做到呢？

只要安裝這個 gem ，不需要額外修改原本寫好的 Ruby code，它就會自動偵測上傳檔案的 Ajax form，幫助我們產生需要的 .ajaxSubmit() Javacript method。

參考資料：

2015年8月6日 星期四