AJAX

上次寫了 [jQuery] 表單取值 radio checkbox select text 驗證表單，這篇淺顯易懂，在 ptt 有人問到如何把 select 的 value 跟 text 值加入到另一個 select 的 options 裡面，其實還蠻簡單的，利用 jQuery - Select box manipulation 這個 plugin 就可以輕鬆做到了，底下是我的一些筆記心得：

實作案例

首先如何取得 select 的 value 跟 text

1
2
3
4
5

/*
*
* 取得 select value 值
*/
$('#selectList').val();

取得 text 值，可以利用 :selected 這個

1
2
3
4
5

/*
*
* 取得 select text 值
*/
$('#selectList :selected').text();

最近在專案全面使用 jQuery 來整合後台部份，目前還沒有大量用到 AJAX 的部份，等以後有時間會全部轉換 AJAX 利用 JSON 的部份，其實之前就有寫到一篇用 datatype JSON 的方式來實現 AJAX：[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單，大家可以參考看看，不過今天大概寫一下昨天在實做驗證表單取值的一些心得，在設計後台的時候，我把編輯文章跟新增文章的功能做在同一塊，然後利用 jQuery 去改變傳值狀態，利用 hidden 的 mode 欄位來決定是要新增文章還是修改文章

$(document).ready(function() 
{
  $("#add_news_link").click(function(){
    $("#mode").attr("value", "add");
  });
})

沒想到 jQuery 可以做到畫圖的功能，Flot 是 Javascript plotting library for jQuery，目前支援瀏覽器：Internet Explorer 6/7/8，Firefox 2.x+，Safari 3.0+，Opera 9.5 和 Konqueror 4.x+，瀏覽器跑起來都還不錯快，唯獨 Internet Explorer 有另外寫一個 excanvas 模擬器，也就是在 IE 上面看還需要 include 另外一個 js 檔案，才可以顯示圖形，我在 google 找到一些也是 PHP Chart 的好用工具，都是國外開發的：Libchart - Simple PHP chart drawing library，XML/SWF Charts，其實還蠻多的，自己 google 就會出現一堆，不過要上去試試看。 我個人還蠻喜歡 jQuery 的，所以我就推薦 Flot 這一個 jQuery 的 library，在官網上面有很多 example 的介紹，可以去看看這裡。 畫最簡單的圖，還有支援 cos sin 的三角函數喔 $(function () { /* [橫座標,縱座標] Math.sin 支援三角函數 */ var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.cos(i)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot($("#placeholder"), [ d1, d2, d3 ]); });[/code] 畫出來的圖如下：

之前寫了一篇讓 wordpress 可以支援 Google Map API 的教學：[AJAX] google map 的應用，不過我將 WordPress 升級到 WordPress 2.8-bleeding-edge 版本，發現 javascript 語言就不能使用了，因為在寫 javascript 的時候，有利用到
這個 Tag，不過送出後轉出來的 javascript 語言會變成編碼過後，" 會變成 ” Big5 編碼，所以這個問題很困擾我，去找一下 ，Wordpress 把斷行完全用 wpautop 這個函式下去取代，所以你只要在內容寫入 <br / > 都會消失，不然就是出現怪問題。 這個問題也不是無解，在網路上找到兩個解法： 1. inline-js - wordpress plugin 您只要在 javascript 語言包一層 tag 就可以了

在 jQuery 底下要如何實現這個功能，其實還蠻簡單的，首先看 html 部份

1
2
3
4
5
6

<input name="user_active_col[]" type="checkbox" value="1"> 1
<input name="user_active_col[]" type="checkbox" value="2"> 2
<input name="user_active_col[]" type="checkbox" value="3"> 3
<input name="user_active_col[]" type="checkbox" value="4"> 4
<input name="user_active_col[]" type="checkbox" value="5"> 5
<input name="clickAll" id="clickAll" type="checkbox"> 全選

最近在弄動態下拉式選單，因為層級的關係，所以必須用到，大學裡面各學院，底下在各系所，在網路上看到一篇 [AJAX] jQuery的多重下拉式選單應用 PART1，實做起來是不會困難，可是我遇到一些怪問題就是了，目前還沒有解決，當然首推 jQuery plugin 套件 cascade，那也參考了國外的一篇文章 jQuery.cascade : Cascading values from forms ，這幾篇看完其實就差不多了，因為大家都寫得很清楚，官方網站 更是把所有應用都寫出來了，詳細很多用法可以參考 官方網站，看原始碼大概就知道在寫甚麼了。 先來說明一下使用的方法：在這個 jQuery cascade plugin 裡面，定義了一格式：

/*
格式就在底下總共有三攔
*/
{'when':'selectedValue','value':'itemValue','text':'itemText'}

中正大學學校首頁 目前已經大致上開始運作快1個禮拜了，這次已經是創校以來第七次改版，我是這次改版程式負責的工讀生，我覺得這次改版跟上一次的風格大同小異，那前一版本的樣子，可以到 這裡 看看，不確定什麼時候會砍，所以我用了 screen 的功能截圖下來： 最新版： 前一版：