2016年4月20日 星期三

Escape Unicode control characters except \t \r \n

轉譯 \t \r \n 以外的 Unicode 控制字元成 \uxxxx 的形式

Escape Unicode control characters except \t \r \n

2016年3月3日 星期四

Facebook Pixel activated N times issue

Use multiple Facebook pixel in single page

在同一個頁面載入多個 Facebook Pixel 的方法

Correct usage 正確用法:

// Initialize Facebook Pixel object
fbq('init', 'FIRST_PIXEL_ID');
fbq('init', 'SECOND_PIXEL_ID');

// Trigger Facebook Pixel track events
fbq('track', 'PageView');
fbq('track', 'AddToCart');

只要初始化一次後接下來的事件都會傳送到所有已載入的 Facebook Pixel 帳戶。

2015年8月6日 星期四

JQuery-ujs 的運作模式 - Unobtrusive scripting adapter for jQuery


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

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..." } 
還有上篇 Remotipart - Upload File via AJAX 提過的:
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" 來說:

  1. 覆寫所有 click event / submit action,讓它們經由 AJAX 發送請求
  2. 綁定 4 個 AJAX callback function,在需要時可以覆寫這些 function(ajax:beforeSend, ajax:success, ajax:complete, ajax:error)
沒想到一行簡單的 code ,Rails 在背後做了這麼多事!
如果想瞭解更詳細的內容,可以參考 JQuery-ujs/rails.js


2015年8月3日 星期一

Remotipart - Upload File via AJAX



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


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

那該怎麼辦呢?

JQuery Form Plugin 解決了這個問題。 使用範例





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


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


Remotipart

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








參考資料: