มาดูวิธีการเขียน Select Boxes Multi Level แบบ Line:Line
วันนี้จะมาพูดถึงเรื่อง jQuery’s Plugin กันอีกแล้ว พักหลังๆ ถ้าสังเกตุกัน จะเห็นได้ว่า ผมมักจะเขียนแต่เรื่องนี้ เพราะว่ามันอัพเดทง่ายดี ไม่เปลืองสมอง ไม่เปลืองแรง 555++
แต่เอาล่ะ เดี๋ยวหลายๆ คนจะรู้สึกว่า เข้ามาอ่าน Blog นี้ไม่ได้อะไรกลับไปเลย วันนี้ก็เลยจะมาเปลี่ยนแนวซะหน่อย ก็คือ แนะนำ Plugin แต่จะเอา Code มาตีแผ่กัน เป็น บรรทัด ไป ดังนั้น เลยต้องเลือก plugin ที่มันสั้นๆ แต่มีประโยชน์กันหน่อย ก็คือตัวนี้ครับ
Select-Chain: Select boxes multilevel ประโยชน์ของมันก็คือการสร้าง input select แบบที่ Related กันหลายระดับ ถ้านึกไม่ออก ก็นึกภาพ
ประเทศ -> จังหวัด -> อำเถอ -> ตำบล
แต่ลักษณะการทำงานของ Plugin ตัวนี้ไม่ได้ทำการ จอง Array หรือ Object ไว้ก่อน แต่เป็นการ เรียกค่า JSON ผ่าน Ajax เป็นยังไง ลองไปดูกัน
และนี่คือ ไฟล์ Plugin เต็มๆ
-
-
(function ($) {
-
$.fn.selectChain = function (options) {
-
var defaults = {
-
key: "id",
-
value: "label"
-
};
-
-
var settings = $.extend({}, defaults, options);
-
-
return this.each(function () {
-
var $$ = $(this);
-
-
$$.change(function () {
-
var data = null;
-
if (typeof settings.data == ’string’) {
-
data = settings.data + ‘&’ + this.name + ‘=’ + $$.val();
-
} else if (typeof settings.data == ‘object’) {
-
data = settings.data;
-
data[this.name] = $$.val();
-
}
-
-
settings.target.empty();
-
-
$.ajax({
-
url: settings.url,
-
data: data,
-
type: (settings.type || ‘get’),
-
dataType: ‘json’,
-
success: function (j) {
-
var options = [], i = 0, o = null;
-
-
for (i = 0; i < j.length; i++) {
-
-
o = document.createElement("OPTION");
-
o.value = typeof j[i] == ‘object’ ? j[i][settings.key] : j[i];
-
o.text = typeof j[i] == ‘object’ ? j[i][settings.value] : j[i];
-
settings.target.get(0).options[i] = o;
-
}
-
-
setTimeout(function () {
-
settings.target
-
.find(‘option:first’)
-
.attr(’selected’, ’selected’)
-
.parent(’select’)
-
.trigger(‘change’);
-
}, 0);
-
},
-
error: function (xhr, desc, er) {
-
alert("an error occurred");
-
}
-
});
-
});
-
});
-
};
-
})(jQuery);
-
ทีนี้เราลองมาแยกส่วนประกอบของ plugin ตัวนี้กัน ส่วนการส่งค่าจาก Server Side Script และวิธีใช้งาน ผมจะกล่าวถึงภายหลังนะครับ
-
(function ($) {
-
$.fn.selectChain = function (options) {
-
var defaults = {
-
key: "id",
-
value: "label",
-
url: ‘xxx.php’,
-
type: ‘get’,
-
data: ‘{ ajax: true, another: ‘anotherValue‘ }’
-
};
-
var settings = $.extend({}, defaults, options);
-
})(jQuery)
1. ตรงนี้คือส่วนของการสร้าง plugin ที่มีชื่อว่า selectChain และมีค่า default ซึ่งสามารถ set ได้ เป็น
key = ค่า key ที่ server จะคืนมา
value = ค่า value ที่ server จะคืนมา
ตรงนี้ ถ้าเราใช้ php ค่าที่จะต้องส่งคืนมาคือ
-
$row[‘id’] = 1;
-
$row[‘value’] = "Thailand";
-
$row[‘id’] = 2;
-
$row[‘value’] = "USA";
——————
-
return this.each(function ()
2. ตรงนี้คือส่วนที่ จะจะค้นหา node ที่ match กับ ที่เราเรียกไว้ทั้งหมด
-
var $$ = $(this);
3. เอาตัวแปร $$ มาเก็บค่า this
-
// [No 1]
-
$$.change(function () {
-
var data = null;
-
// [No 2]
-
if (typeof settings.data == ’string’) {
-
data = settings.data + ‘&’ + this.name + ‘=’ + $$.val();
-
} else if (typeof settings.data == ‘object’) {
-
data = settings.data;
-
data[this.name] = $$.val();
-
}
-
// [No 3]
-
settings.target.empty();
-
// [No 4]
-
$.ajax({
-
url: settings.url,
-
data: data,
-
type: (settings.type || ‘get’),
-
dataType: ‘json’,
-
success: function (j) {
-
var options = [], i = 0, o = null;
-
-
for (i = 0; i < j.length; i++) {
-
o = document.createElement("OPTION");
-
o.value = typeof j[i] == ‘object’ ? j[i][settings.key] : j[i];
-
o.text = typeof j[i] == ‘object’ ? j[i][settings.value] : j[i];
-
settings.target.get(0).options[i] = o;
-
}
-
// [No 5]
-
setTimeout(function () {
-
settings.target
-
.find(‘option:first’)
-
.attr(’selected’, ’selected’)
-
.parent(’select’)
-
.trigger(‘change’);
-
}, 0);
-
},
-
// [No 6]
-
error: function (xhr, desc, er) {
-
alert("an error occurred");
-
}
-
});
-
}
ตรงนี้ขอ รวดเดียวจบเลยละกันครับ มันเกี่ยวเนื่องกัน เริ่มตั้งแต่ ….
1. ถ้า มี event onchange gกิดขึ้นกับ element เมื่อไหร่ ให้ทำงาน
2. จัดการกับค่าตัวแปร ที่จะถูกส่งให้กับ Server Side Script
3. เคลียร์ค่า ให้กับ Target ที่ จะเอา option ไปใส่
4. เริ่มส่งค่าให้ Ajax จากนั้นรับ Return ค่ารวมทั้ง สร้าง element options วนลูปค่าลงไป แล้วส่งให้ Element ที่เป็น target
5. เรียกตัว target เพื่อทำการ add attribute selected ให้พร้อมทั้งส่ง Trigger ว่า Target ต้องทำ event onchange อีกที เพื่อตรวจสอบว่า select ตัวถัดไปต้องเปลี่ยนค่ามั้ย
6. ทำการ Debug Error
วิธีใช้งานและตัวอย่างดูได้ที่เวบไซด์ เจ้าของ Plugin เลยครับ
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
จบแล้วครับ สำหรับ บทความในวันนี้ ที่อยากจะให้เพื่อนๆ Focus กันก็คือคำสั่ง Trigger ครับ คำสั่งนี้เป็น ลักษณะ ของการจัดการ event ในรูปแบบ หนึ่งที่น่าสนใจทีเดียวครับ การทำงานก็จะเป็นการสร้าง trigger (อธิบาย ยากแฮะ) เช่น
เมื่อมีการ Click ที่ ปุ่มที่ 1 แต่ผมอยากจะให้ ปุ่มที่ 2 คลิกตามไปด้วย ผมก็จะใช้ Trigger นี่แหละครับ เป็นตัวบอก เช่นแบบนี้ครับ
-
$(‘#b2′).click(function() {
-
alert(‘I am B2′);
-
});
-
-
$(‘#b1′).click(function() {
-
alert(‘I am B1′);
-
$(‘#b2′).trigger(‘click’);
-
});
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ขอนอกเรื่องนิดนึงได้มั้ยครับ
ขออนุญาติรบกวนถามเรื่อง plugin cookie หน่อยได้มั้ยครับ คือผมลองใช้ http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ เพื่อกำหนดสีในเวบ โดยให้เวลาเปิดเวบขึ้นอีกครั้ง สีจะเป็นไปตามที่เคยเลือกเอาไว้ แต่มันไม่เป็นไปตามที่ต้องการครับ คือมันจะเก็บขอมูลการเรียกสีแค่เวลา refresh browser ครับ แต่มันจะไม่เก็บขอมูลการเรียกสีถ้าผมปิดแล้วเปิดขึ้นมาใหม่ ไม่ทราบพอรู้มั้ยครับว่าทำไม