มาทำ Autosave กันเถอะ jQuery Ajax ช่วยได้
มาอัพเดทต่อๆ วันนี้จริงๆว่าจะนอนแล้วล่ะ เหนื่อยๆ ง่วงๆ เพลียๆ มึนๆ ยังไงชอบกล แต่เอาว่า อยากได้ keyword “AJAX” ก็ต้องขยันอัพกันนิดนึง เพราะผมเชื่อในเรื่อง Content is the King เลย พยายมๆ สร้าง Unique Content ที่มีคุณภาพขึ้นมา ^^
วันนี้เราลองมาประยุกต์ใช้ ajax ในการทำ auto save ดีกว่า จริงๆ plugin แบบนี้ ถ้าหาดูจาก Google ก็จะเห็นอยู่ 2-3 ตัว มีทั้งแบบ save ลง Cookie หรือ ส่งไปทำงานตาม url ที่เรากำหนด พร้อม function restore มาเสร็จสรรพ
แต่เนื่องจากวันนี้ผมไม่ได้มา review แต่จะมาอธิบายถึง การประยุกต์ใช้งาน ajax ใน jQuery กัน เลยจะขอลองเขียน plugin แบบ simple ขึ้นมาใช้งานเองกัน เอาแบบง่ายๆ พอเป็นพิธีก็พอ
การทำ Autosave นั้น ก็คือการส่งข้อมูลไป save เป็นระยะๆ ทั้งๆ ที่เรายังไม่ได้กด save เลย โดยการทำแบบนี้ ก็มีข้อดีของมันดังนี้ครับ
1. ช่วยให้ข้อมูล ไม่หายในกรณี ไฟดับ คอมแฮงค์ หรือปัญหาที่ เรียกได้ว่าเป็น อุบัติเหตุ ทางเทคนิค
2. ช่วยเรื่อง session timeout ในกรณีที่ set timeout ของช่วงเวลา login
3. เท่ห์ ….
เอาล่ะ ทีนี้เรามาลองเขียน plugin ง่ายๆกัน สักตัวนึง
File: autosave.jquerytips.js
-
-
jQuery.extend({
-
-
autosave: function(s) {
-
var defaults = {
-
form: ‘#myform’,
-
delay: 10000,
-
calback: ”
-
}
-
var options = jQuery.extend(defaults, s);
-
this.save(options);
-
},
-
save: function(i) {
-
setInterval(function() {
-
-
var eml = document.createElement(‘div’);
-
jQuery(eml).attr(‘id’, ’status’).css({
-
position: ‘absolute’,
-
background: ‘red’,
-
color: ‘white’,
-
padding: ‘3px 10px’,
-
font: ‘12px verdana’,
-
top: jQuery(document).scrollTop(),
-
right: 0
-
}).html(’saved’);
-
-
jQuery(‘body’).prepend(eml);
-
-
var urlPost = jQuery(i.form).attr(‘action’);
-
var params = jQuery(i.form).find(‘input, textarea, select’).serialize();
-
jQuery.ajax({
-
url: urlPost,
-
type: ‘POST’,
-
data: params,
-
success: function(rs) {
-
setTimeout(function() { jQuery(‘#status’).remove() }, 2000);
-
i.callback(rs);
-
}
-
});
-
}, i.delay);
-
}
-
-
});
-
จากที่เห็น plugin จะทำงานแบบนี้ครับ คือรับ parameter เข้ามากำหนดค่า ดังนี้
form = id ของ Form ที่เราต้องการทำงานด้วย
delay = ช่วงหน่วงเวลาของการ save แต่ระครั้ง (inteval)
callback = ค่าที่จะ return กลับไปจากไฟล์ปลายทาง
คำสั่งหลักๆ จะอยู่ที่ method save ครับ โดยเริ่มต้นจาก การ set inteval ตามช่วงเวลาหน่วง และ ตกแต่งให้สวยงาม โดยการทำ label save ให้แสดงผล ที่บนขวา ของหน้าจอ
จากนั้นก็จะหา action ของ form มาด้วย
-
var urlPost = jQuery(i.form).attr(‘action’);
หาค่าทั้งหมดของ input มา serialize ด้วยคำสั่ง
-
var params = jQuery(i.form).find(‘input, textarea, select’).serialize();
แล้วก็ส่งให้ ajax ทำงาน สุดท้ายส่งค่าอะไรก็ตามที่ ไฟล์ save ส่งมาคืนให้กับ callback
File: sample.html
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
-
<head>
-
<title>jQueryTips.com</title>
-
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
-
<script src="autosave.jquerytips.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
<!–
-
$(function() {
-
-
$.autosave({
-
form: ‘#autosave’,
-
delay: 10000,
-
callback: function(data) {
-
alert( data );
-
}
-
});
-
-
});
-
//–>
-
</script>
-
</head>
-
<body>
-
<p style="height:500px;"></p>
-
-
<form method="post" action="save.php" id="autosave">
-
<fieldset>
-
<legend>Auto Save Plugin by jQueryTips.com</legend>
-
<p>
-
<label>Field 1</label>
-
<input type="text" name="field_1" value="" />
-
</p>
-
<p>
-
<label>Field 2</label>
-
<textarea name="field_2"></textarea>
-
</p>
-
<p>
-
<label>Field 3</label>
-
<select name="field_3">
-
<option value="a">A</option>
-
<option value="b">B</option>
-
<option value="c">C</option>
-
</select>
-
</p>
-
<p>
-
<label>Field 4</label>
-
<input type="radio" name="field_4" value="yes" /> Yes
-
<input type="radio" name="field_4" value="no" /> No
-
</p>
-
<label>Field 5</label>
-
<input type="checkbox" name="field_5" value="agree" /> Agree
-
</p>
-
<p>
-
<input type="submit" value="Save" />
-
</p>
-
</fieldset>
-
</form>
-
-
</body>
-
</html>
ส่วนนี้คือวิธีเรียกใช้งานครับ โดยระบุ parameters ไป คือ form, delay, callback (data ที่ return กลับมา จะเอามาทำอะไรต่อก็ตามแต่)
เท่านี้ก็เป็นอันเสร็จ
ส่วนการใช้งานในเรื่องของ save นั้นเราอาจจะทำได้แบบนี้ครับ
ส่งค่าเป็นเก็บลง DB จริงๆ เลย แต่ว่าทำ status เท่ากับ draft ไว้จากนั้นส่ง lnsert id กลับมา แล้วให้ callback append input hidden ของ id ลงไปใน เอกสาร HTML
หรือใครอาจจะเอาไปใช้แบบอื่นก็ได้นะครับ เช่นลองเก็บแบบ temporary เช่น memcached, apc, session, cookie, file อะไรก็ตามแต่จะไปคิดกัน
วันนี้พอแค่นี้ล่ะ บายๆ
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.
อันนี้แจ่มครับ ขอใช้ๆๆ อิอิ
ผมเหมือนโรคจิตอย่างนึง คือถ้าเลี่ยง request ไปยัง server ได้จะเลี่ยงให้หมด นึกๆดูแล้วถ้าใช้พวก storage น่าจะช่วยได้นะครับ คือเซฟข้อมูลไว้ใน client โดยใช้ flash หรือ gear ช่วย (จริงๆแล้ว 2 อย่างนี้ผมก็ไม่เป็นนะ เคยใช้ใน storage ของใน YUI อ่ะคับมันมี api ให้)