jQueryTips by Tee++; » Ajax http://www.jquerytips.com Coding is fun. Sun, 25 Apr 2010 11:30:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 มาทำ Autosave กันเถอะ jQuery Ajax ช่วยได้ http://www.jquerytips.com/2009/03/27/autosave-jquery-ajax/ http://www.jquerytips.com/2009/03/27/autosave-jquery-ajax/#comments Thu, 26 Mar 2009 17:43:17 +0000 Tee++; http://www.jquerytips.com/?p=347 มาอัพเดทต่อๆ วันนี้จริงๆว่าจะนอนแล้วล่ะ เหนื่อยๆ ง่วงๆ เพลียๆ มึนๆ ยังไงชอบกล แต่เอาว่า อยากได้ 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

  1.  
  2. jQuery.extend({
  3.  
  4.         autosave: function(s) {
  5.                 var defaults = {
  6.                         form: ‘#myform’,
  7.                         delay: 10000,
  8.                         calback: ”
  9.                 }
  10.                 var options = jQuery.extend(defaults, s);
  11.                 this.save(options);
  12.         },
  13.         save: function(i) {
  14.                 setInterval(function() {
  15.  
  16.                         var eml = document.createElement(‘div’);
  17.                         jQuery(eml).attr(‘id’, ’status’).css({
  18.                                 position: ‘absolute’,
  19.                                 background: ‘red’,
  20.                                 color: ‘white’,
  21.                                 padding: ‘3px 10px’,
  22.                                 font: ‘12px verdana’,
  23.                                 top: jQuery(document).scrollTop(),
  24.                                 right: 0
  25.                         }).html(’saved’);
  26.  
  27.                         jQuery(‘body’).prepend(eml);
  28.  
  29.                         var urlPost = jQuery(i.form).attr(‘action’);
  30.                         var params = jQuery(i.form).find(‘input, textarea, select’).serialize();
  31.                         jQuery.ajax({
  32.                                 url: urlPost,
  33.                                 type: ‘POST’,
  34.                                 data: params,
  35.                                 success: function(rs) {
  36.                                         setTimeout(function() { jQuery(‘#status’).remove() }, 2000);
  37.                                         i.callback(rs);
  38.                                 }
  39.                         });
  40.                 }, i.delay);
  41.         }
  42.  
  43. });
  44.  

จากที่เห็น plugin จะทำงานแบบนี้ครับ คือรับ parameter เข้ามากำหนดค่า ดังนี้
form = id ของ Form ที่เราต้องการทำงานด้วย
delay = ช่วงหน่วงเวลาของการ save แต่ระครั้ง (inteval)
callback = ค่าที่จะ return กลับไปจากไฟล์ปลายทาง

คำสั่งหลักๆ จะอยู่ที่ method save ครับ โดยเริ่มต้นจาก การ set inteval ตามช่วงเวลาหน่วง และ ตกแต่งให้สวยงาม โดยการทำ label save ให้แสดงผล ที่บนขวา ของหน้าจอ

จากนั้นก็จะหา action ของ form มาด้วย

  1. var urlPost = jQuery(i.form).attr(‘action’);

หาค่าทั้งหมดของ input มา serialize ด้วยคำสั่ง

  1. var params = jQuery(i.form).find(‘input, textarea, select’).serialize();

แล้วก็ส่งให้ ajax ทำงาน สุดท้ายส่งค่าอะไรก็ตามที่ ไฟล์ save ส่งมาคืนให้กับ callback

File: sample.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>jQueryTips.com</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  7. <script src="autosave.jquerytips.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. <!–
  10.         $(function() {
  11.  
  12.                 $.autosave({
  13.                         form: ‘#autosave’,
  14.                         delay: 10000,
  15.                         callback: function(data) {
  16.                                 alert( data );
  17.                         }
  18.                 });
  19.  
  20.         });
  21. //–>
  22. </script>
  23. </head>
  24. <body>
  25. <p style="height:500px;"></p>
  26.  
  27. <form method="post" action="save.php" id="autosave">
  28. <fieldset>
  29.         <legend>Auto Save Plugin by jQueryTips.com</legend>
  30.         <p>
  31.                 <label>Field 1</label>
  32.                 <input type="text" name="field_1" value="" />
  33.         </p>
  34.         <p>
  35.                 <label>Field 2</label>
  36.                 <textarea name="field_2"></textarea>
  37.         </p>
  38.         <p>
  39.                 <label>Field 3</label>
  40.                 <select name="field_3">
  41.                         <option value="a">A</option>
  42.                         <option value="b">B</option>
  43.                         <option value="c">C</option>
  44.                 </select>
  45.         </p>
  46.         <p>
  47.                 <label>Field 4</label>
  48.                 <input type="radio" name="field_4" value="yes" /> Yes
  49.                 <input type="radio" name="field_4" value="no" /> No
  50.         </p>
  51.                 <label>Field 5</label>
  52.                 <input type="checkbox" name="field_5" value="agree" /> Agree
  53.         </p>
  54.         <p>
  55.                 <input type="submit" value="Save" />
  56.         </p>
  57. </fieldset>
  58. </form>
  59.  
  60. </body>
  61. </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 อะไรก็ตามแต่จะไปคิดกัน

วันนี้พอแค่นี้ล่ะ บายๆ

]]> http://www.jquerytips.com/2009/03/27/autosave-jquery-ajax/feed/ 2 มาคุยกันเรื่อง Ajax อีกที ดีกว่ามั้ย? http://www.jquerytips.com/2009/03/24/jquery-ajax-again/ http://www.jquerytips.com/2009/03/24/jquery-ajax-again/#comments Tue, 24 Mar 2009 15:00:04 +0000 Tee++; http://www.jquerytips.com/?p=318 หลังจากประสบความสำเร็จ กับ 2 keywords หลัก jQuery และ codeigniter ในผลการค้นหาจาก Google ในหน้าภาษาไทย โดยได้อันดับที่ 1 และ 6 ตามลำดับ ตอนนี้จะขอมาเล่น keyword ต่อไป คือคำว่า “AJAX” ซึ่งตอนนี้ยังไม่มีตำแหน่งใดๆ เลย ฮ่าๆๆ

แต่ด้วยจำนวนคู่แข่งที่มีเพียง 375,000 เท่านั้นเอง เลยคิดว่า ไม่น่าจะยากเย็นอะไร โดยเป้าหมายไม่ได้หวัง ถึงอันดับ 1 ขอแค่หน้าแรกได้ก็ดีใจละ ดังนั้นเอาเป็นว่า บทความในวันนี้จะขอ พูดเรื่อง ajax เลยละกัน

หลายๆ คนที่ใช้ ajax ใน jQuery ก็คงจะรู้แล้วว่ามันง่ายแสนง่ายเพียง ไหน ไม่ต้องมาเสียเวลาเขียนโคด 30-40 บรรทัด เพียงแค่บรรทัดเดียวก็ วิ่งฉิว สบายใจเฉิบแล้ว

วันนี้ผมก็จะมาลองปรับแต่ง เพื่อ optimize การเขียนโคดอีกสักนิดนึงให้ performance โดยรวมของเว็บไซด์ ดีขึ้น เอาเป็นว่าวันนี้จะพูดถึงการใช้งาน ajax แล้วพักไว้ใน ตัวแปร เพื่อใช้งานต่อ ไปใน กรณีที่ ต้นทาง ไม่ได้มีข้อมูลที่เปลี่ยนไปตลอด ซึ่ง เทคนิค นี้ไม่ได้มีอะไรที่วุ่นวาย แล้วก็ไม่ได้ยากเย็นอะไร เพียงแต่ว่า บางคน อาจจะยังไม่รู้เท่านั้นเอง .ึ่งการ load data แบบนี้ พวก ไอ้หรั่งเรียกว่า “Loads data synchronously” ซึ่งมันตรงข้ามกับ asynchronously

บางคนอาจจะเคยเขียน jQuery Ajax ประมาณนี้

  1. <script type="text/javascript">
  2.  var xmlRs = null;
  3.   $.ajax({
  4.    url: ’some.xml’,
  5.    success: function(rs) {
  6.     xmlRs = rs
  7.    }
  8.  });
  9.  alert( xmlRs );
  10. </script>

แล้วสงสัยว่า ทำไง var xmlRs ใช้ไม่ได้ทั้งๆ ที่ประกาศเป็นตัวแปร Global เรียบร้อยแล้ว

งานนี้ปัญหามีนิดเดียวเองครับ ก็คือ asynchronously มัน เป็น true อยู่ ที่ถูกต้องจะต้องเขียนแบบนี้ครับ

  1. <script type="text/javascript">
  2.  var xmlRs = $.ajax({
  3.   async: false,
  4.   url: ’some.xml’
  5.  }).responseText;
  6.  alert( xmlRs );
  7. </script>

และถ้าจะเอา var ที่ได้มา Find ต่อ เช่นหา node ของ xml ต้องแก้จาก responseText เป็น responseXML นะครับ ไม่งั้นมันจะมีปัญหากับ IE ตัวยุ่ง

เท่านี้ก็เป็นอันหมดปัญหา สบายๆ ลองกันดูนะครับ ^^

]]> http://www.jquerytips.com/2009/03/24/jquery-ajax-again/feed/ 1 AjaxQ เรียงคิวให้ request กันหน่อย http://www.jquerytips.com/2009/03/14/jquery-ajax-q/ http://www.jquerytips.com/2009/03/14/jquery-ajax-q/#comments Sat, 14 Mar 2009 10:42:42 +0000 Tee++; http://www.jquerytips.com/?p=266 วันนี้แวะมาล้างรถ ในระหว่างที่กำลังรอ ว่างๆ ก็เลยคิดว่าน่าจะม่ Update อะไรสักหน่อย เลย Search Keyword “jquery plugin” จาก Google ดูซิว่ามี อะไรพอจะหยิบยกมาเขียนได้

หลังจากลองสุ่มๆ ดูก็เจอ plugin ที่พอจะมีประโยชน์บ้างมาแนะนำกัน เผื่อใครที่กำลังเจอปัญหาเรื่องนี้พอดี

รู้มั้ยครับว่า Browser แต่ละตัวมันมี Limit ของ Connection Server กันด้วย โดยที่ Mozilla, Opera, Safari มี limit อยู่ที่ 8 connections ต่อ 1 server ต่อ ช่วงเวลา หรือที่แล้วก็ไอ้ตัวเจ้าปัญหา IE มี limit อยู่ที่ 2 !!!!

ที่นี้มันก็อาจจะทำให้เกิดปัญหาได้โดยที่เค้าเรียกว่า การ flooding server (แปลเป็น TH ไม่ถูกจริงๆ)

ซึ่งที่ถูกจริงๆ แล้วในการ Design AJAX Application จริงๆ การ request ควรจะเป็น 1:1 ดังนั้นสิ่งที่จะมาแก้ไขปัญหาก็คือ การทำ Ordering ให้กับ request นั่นเอง

ซึ่ง plugin ตัวที่ผมจะแนะนำนี้แก้ปัญหาให้ได้ครับ โดยแก้ไข Syntax การเรียกใช้งาน AJAX จาก jQuery นิดเดียว

Example

  1. $.ajaxq ("testqueue", {
  2.     url: "test_1.html",
  3.     cache: false,
  4.     success: function(html)
  5.     {
  6.         $("#results").append(html);
  7.     }
  8. });
  9.  
  10. $.ajaxq ("testqueue", {
  11.     url: "test_2.html",
  12.     cache: false,
  13.     success: function(html)
  14.     {
  15.         $("#results").append(html);
  16.     }
  17. });

เท่านี้เองครับ ซึ่งถ้าใครสนใจจะเอามาแก้ไขปัญหา หรือศึกษาเพิ่มเติมก็ไป Download กันได้ ที่นี่ เลยครับ

]]> http://www.jquerytips.com/2009/03/14/jquery-ajax-q/feed/ 1 มา Translate กันเถอะ พี่ GG เค้าจัดมาแล้ว http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/ http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/#comments Fri, 06 Mar 2009 16:36:05 +0000 Tee++; http://www.jquerytips.com/?p=261 Google Translate

ว้าว ขณะที่ Post ข้อความอยู่นี้ เชื่อมั้ยครับว่าผมเขียนบทความ ลงใน jQueryTips นี้ทั้งหมดกี่บทความแล้ว 80 !!!!! ใช่แล้วตั้ง 80 แน่ะ รวมบทความนี้ก็จะเป็นบทความที่ 81 ไม่น่าเชื่อเลย ว่าตัวเองจะเขียนได้มาไกลถึงขนาดนี้ 555++

ตอนแรกก็กะเขียนเล่นๆ คิดว่า วัน สองวันตัวเอง คงเบื่อ ไปๆมาๆ นี่เขียนกันเป็นปีเลย อืมม์ คิดๆแล้วก็ ภูมิใจแฮะ วันนี้เดี๋ยว export มา backup ซะหน่อยดีกว่า ^^

เอาล่ะๆ มาเข้าเรื่องที่จะเขียนวันนี้กันเลยดีกว่า “ภาษาอังกฤษ” -*- เชื่อแน่ๆ เลยครับว่าปัญหาเรื่อง ภาษา ไม่แข็งแรงนั้น สั่งสมอยู่กับคนไทย มานานแสนนาน ทำให้เราขาดโอกาส และการเรียนรู้ที่ดีๆ จาก international website, e-book หรือสื่อ ภาษาต่างประเทศ อะไรต่อมิอะไรไปไม่ใช่น้อย

แต่ผมคิดว่า ต่อไปนี้ปัญหาอาจจะเบาบางลง ด้วยท่านเทพแห่งโลกไซเบอร์อย่างพี่ Big Google เพราะตอนนี้ ท่านได้ออก Language Service ชุดของการ Translate ใน version th -> en, en -> th หรือ ภาษาอื่นๆ อีกเยอะแยะมาแล้ว

จะแปลทั้งเวบ หรือจะแปลเป็นประโยค ก็สะดวกสบาย รวดเร็ว ไปลองกันดูได้ ที่นี่ Google Translate

เห็นมั้ย เจ๋งโครต แต่ถ้าคิดว่าวันนี้ ผมจะมาแนะนำ Service แค่นี้ล่ะก็ ผิดถนัดครับ ผมมีอะไรๆ ทีเด็ดกว่านี้เยอะรอให้ไปอ่านกันอยู่แล้ว……

รู้มั้ยครับว่า Google AJAX Language ก็มี API ด้วย ซึ่งการใช้งานก็โครตจะง่าย เพราะมันถูก plug เข้ามาอยู่ในชุดของ Google JS API แล้ว ทำให้เราเรียกโหลดมาจาก Google ได้เลย โดยไม่จำเป็นต้องมา include อะไรวุ่นวาย

ไม่เชื่อเอาโคดชุดนี้ไปรันดู

  1. <html>
  2.   <head>
  3.                 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4.     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  5.     <script type="text/javascript">
  6.  
  7.     google.load("language", "1");
  8.  
  9.     function translate() {
  10.       var text = document.getElementById("text").innerHTML;
  11.       google.language.detect(text, function(result) {
  12.         if (!result.error && result.language) {
  13.           google.language.translate(text, result.language, "en",
  14.                                     function(result) {
  15.             var translated = document.getElementById("translation");
  16.             if (result.translation) {
  17.               translated.innerHTML = result.translation;
  18.             }
  19.           });
  20.         }
  21.       });
  22.     }
  23.  
  24.     </script>
  25.   </head>
  26.   <body>
  27.     <div><span id="text">สวัสดี ชาวโลก</span><input type="button" value="translate" onclick="translate()" /></div>
  28.     <div id="translation"></div>
  29.   </body>
  30. </html>

ซึ่งใน API ชุดนี้ของ GG จะประกอบไปด้วย สองส่วนหลักๆก็คือ
1. Detect language
ตัวนี้เป็นตัวตรวจสอบภาษาที่จะแปลครับ ว่าเป็นภาษาอะไร โดยเราไม่จำเป็นต้องบอก GG ว่าเรากำลังจะแปลจาก ภาษาอะไรเป็นภาษาอะไร โดยแค่เราส่ง กลุ่มที่จะแปลเข้าไป GG จะบอกมาเองว่าเรากำลังทำงานกับภาษาอะไร จะคืนค่าเป็น th, en, jp หรือ ภาษาอื่นๆ

2. Translate
แน่นอนอีกตัวคือหัวใจครับ ตัวแปลนั่นเอง โดยตัวแปลนี้เราสามารถส่ง text เข้าไปแปล โดยต้องระบุ

text = ประโยคที่จะทำการแปล
source = แปลจากภาษาอะไร เช่น en (ตรงนี้เราจะสามารถใช้ api ชุด detect lang ทำงานแทนได้)
destination = แปลมาเป็นภาษาอะไร เช่น th

ซึ่งจากที่ผมเอา Firebug จับมา การทำงานของ API Google ชุดนี้ก็คือ JSONP นั่นเอง

  1. http://www.google.com/uds/Gtranslate?callback=google.language.callbacks.id101&context=22&q=สวัสดีชาวโลก&langpair=th|en&key=notsupplied&v=1.0

เอาล่ะๆ ไอ้ที่บอกมาทั้งหมด มันแค่เกริ่นเท่านั้นเองอ่ะ ที่เป็นบทความวันนี้จริงๆ มันต้องเป็น jQuery แน่นอนอยู่แล้ว นี่ครับ

Sunday Morning jQuery Google Translate API

ซึ่งหน้าตาโดยรวมแล้ว ให้ 9/10 ครับ สวยงามน่าใช้ แถมใช้งานง่ายด้วย สามารถแปลแบบ กลุ่มคำ หรือแบบ คำเดี่ยวก็ได้ ใช้เป็น Dict ภายในเวบเลยก็ยังได้

ยังไงก็ลองไปเล่นกันดูนะครับ ผมคงไม่เขียนอธิบายวิธีใช้ เพราะเค้าเขียนไว้หมดแล้ว ไม่เข้าใจยังไง view source ดูกันเอาก็น่าจะพอเข้าใจอยู่ ตัวนี้ส่วนตัวผมถือว่าเป็น Plugin น้ำดี ตัวนึงเลยทีเดียว

อันนี้เป็นตัวอย่างที่ผมลองเอามาเขียนเล่นๆครับ

  1. http://www.jQueryTips.com/example/GTranslate/

เอ แต่ถ้าอ่าน เว็บเค้าแล้วไม่เข้าใจ ก็ลองอย่าลืมใช้ Google Translate มาเป็นภาษาแม่ เราดูนะครับ 555++

วันนี้ลาไปก่อนแค่นี้ล่ะ จะไปแรดข้างนอกละ ^^

]]> http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/feed/ 4 โหลดเมื่อจำเป็นต้องโหลด http://www.jquerytips.com/2008/09/09/getscript-jquery/ http://www.jquerytips.com/2008/09/09/getscript-jquery/#comments Mon, 08 Sep 2008 17:21:40 +0000 Tee++; http://www.jquerytips.com/?p=127 รู้มั้ยครับ คุณสมบัติเด่นอีกอย่างนึงของ JavaScript คืออะไร “แดกแรม client” ใช่แล้วครับ มันชอบดูดแรมผู้ใช้งานไปเรื่อย โดนไม่คืนเสียด้วย แถมการ include JavaScript ที่เขียนเยอะๆ ไฟล์ใหญ่ๆ เข้าไปยังทำให้ page load ช้าอีก นอกเหนือจาก เทคนิค การ บีบอัดไฟล์ js แล้ว วันนี้ผมจะมาแนะนำ อีกเทคนิคนึงกัน นั่นคือ…

การใช้คำสั่ง $.getScript ซึ่งคำสั่งนี้ ใช้ทำอะไรบ้างมาดูกัน

1. สามารถ ใช้เรียก javascript ให้ทำงาน หลังจากทำ Event ต่างๆ เป็นการแก้ปัญหา event listener ไปในตัว
2. สามารถ ลดโหลด ในหน้าเวบได้ โดยจะเรียกใช้เมื่อจำเป็นเท่านั้น

ในวันนี้ผมจะมาแนะนำ ประโยชน์ในข้อที่ 2 กัน เพราะข้อที่ 1 พูดมาหลายทีแล้ว เรื่องแก้ปัญหา event ไม่รับฟังหลังจากมีการ append DOM ขึ้นมาใหม่เนี่ย

test.html

  1.  
  2. <html>
  3. <head>
  4. <title>jQueryTips.com</title>
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script language="JavaScript">
  7. <!–
  8. $(function() {
  9.  
  10.         $(‘.loadJs’).click(function() {
  11.                 $.getScript(’script.js’ , function() {
  12.                         // do something after script loaded
  13.                 });
  14.                 return false;
  15.         });
  16.  
  17. });
  18. //–>
  19. </script>
  20. </head>
  21. <body>
  22.  
  23. <a href="http://www.google.com" class="loadJs">Click to load JS</a>
  24. <div class="redit">Some Text</div>
  25.  
  26. </body>
  27. </html>
  28.  

script.js

  1.  
  2. $(function() {
  3.   $(‘.redit’).css(‘background’, ‘red’);
  4. });
  5.  

จากตัวอย่าง ไฟล์ script.js จะทำหน้าที่ เปลี่ยนสีของ bg โดยจะหา node ที่มี class = redit

ซึ่งการทำงานจะเริ่มตั้งแต่มีการกด .loadJs หลังจากที่ทำการกด จะไปเรียก script include ที่ชื่อว่า script.js โดยใช้คำสั่ง $.getScript

และ script.js จะทำงานต่อทันที เพื่อใช้งาน ณ ขณะนั้นเลย ไม่จำเป็นต้องโหลดมาไว้ทั้งหมดก่อน

เอาล่ะ วันนี้อัพเดท สั้นๆ พอหลังจากหายไปนาน ไว้จะเอา Tips เด็ดๆ มาฝาก jQueryTips Fans กันอีกนะครับ ^^

]]> http://www.jquerytips.com/2008/09/09/getscript-jquery/feed/ 2 livequery ปลั๊กอินที่ ช่วยแก้ปัญหา JS ไม่ยอมเชื่อฟังหลังจาก DOM อัพเดท http://www.jquerytips.com/2008/08/15/jquery-livequery/ http://www.jquerytips.com/2008/08/15/jquery-livequery/#comments Thu, 14 Aug 2008 17:52:36 +0000 Tee++; http://www.jquerytips.com/?p=114 วันนี้มาแนะนำ plugin ดีๆ อีกตัว…

โปรแกรมเมอร์หลายคนที่เขียน ajax หรือ javascript บ่อยๆ คงเคยเจอปัญหา ว่า javascript ไม่ยอม ทำงานต่อหลังจากที่เรา append DOM ใหม่ๆ ที่มี event เข้ามาด้วย

จริงๆ ผมก็เคยแนะนำวิธีไปคร่าวๆ แล้วเหมือนกัน ใน “วิธีแก้ไขปัญหา events ไม่ทำงานหลังจาก ajax requested”

แต่วันนี้จะมาทำเรื่องง่ายให้เป็นเรื่อง ง่ายเข้าไปอีด้วย plugin ดีๆ ตัวนี้ “livequery”

สมมุติว่าเราเขียน jquery แบบนี้

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>jqueryTips.com</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script language="JavaScript">
  8. <!–
  9. $(document).ready(function() {
  10.  
  11.         $(‘ul#container li’).click(function() {
  12.                 $(this).clone().appendTo(‘ul#container’);
  13.         });
  14.  
  15. });
  16. //–>
  17. </script>
  18. </head>
  19. <body>
  20.  
  21. <ul id="container">
  22.         <li><a href="#">Try me</a></li>
  23. </ul>
  24.  
  25. </body>
  26. </html>

ซึ่งการเขียนแบบนี้ แน่นอนว่า หลังจากที่ มีการ append DOM ขึ้นมาใหม่แล้ว ตัวที่ append ขึ้นมาจะไม่สามารถทำงานต่อไปได้ แต่ถ้าเราเปลี่ยนมาเป็นเขียนโดยใช้ livequery ช่วย แบบนี้

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>jqueryTips.com</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript" src="jquery.livequery.pack.js"></script>
  8. <script language="JavaScript">
  9. <!–
  10. $(document).ready(function() {
  11.  
  12.         $(‘ul#container li’).livequery(‘click’, function() {
  13.                 $(this).clone().appendTo(‘ul#container’);
  14.         });
  15.  
  16. });
  17. //–>
  18. </script>
  19. </head>
  20. <body>
  21.  
  22. <ul id="container">
  23.         <li><a href="#">Try me</a></li>
  24. </ul>
  25.  
  26. </body>
  27. </html>

ปัญหาทุกอย่างก็จะหมดไปทันที ทั้งยังสามารถเอาไปใช้กับ ajax ได้อย่างสบาย ลองดูละกัน ^^

Ps. ณ ปัจจุบัน jQuery 1.3x บรรจุ function live ไว้ใน core แล้ว ไม่ต้องทำงานผ่าน plugin livequery อีกต่อไป

jQuery/events/live

]]> http://www.jquerytips.com/2008/08/15/jquery-livequery/feed/ 1 Ajax with jQuery (Media version) http://www.jquerytips.com/2008/06/27/jquery-on-youtube/ http://www.jquerytips.com/2008/06/27/jquery-on-youtube/#comments Thu, 26 Jun 2008 17:20:54 +0000 Tee++; http://www.jquerytips.com/2008/06/27/xx/ คราวนี้ขอ อัพเดทแบบง่ายๆ ทีนึง พอดีไปแวะ Youtube มาเลยลอง หา jQuery Tutorial มาฝาก คราวนี้เป็น basic ajax ครับ แต่ ajax พื้นๆ ที่ไม่ต้องพึ่งพา ปลั๊กอินใดๆ แค่ jQuery ตัวเดียวก็เหลือแหล่

เนื้อหาก็เป็นการสอน เกี่ยวกับ ajax กับการรับ response ในรูปแบบต่างๆ เช่น html, xml เอาเป็นว่าไปดูกันเองเลยดีกว่า

[wp_youtube]XdUFjAvOPU0[/wp_youtube]

]]> http://www.jquerytips.com/2008/06/27/jquery-on-youtube/feed/ 0 Ajax Cross Domain ใครว่าทำไม่ได้ http://www.jquerytips.com/2008/04/26/ajax-cross-domain/ http://www.jquerytips.com/2008/04/26/ajax-cross-domain/#comments Fri, 25 Apr 2008 18:56:32 +0000 Tee++; http://www.jquerytips.com/2008/04/26/ajax-cross-domain-%e0%b9%83%e0%b8%84%e0%b8%a3%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%97%e0%b8%b3%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b9%84%e0%b8%94%e0%b9%89/ เรื่อง cross domain กับ ajax จริงๆแล้วในทางทฤษฎี มันควรจะทำได้ครับ แต่ทางปฎิบัติเราติดปัญหาเรื่อง Security เลยไม่อนุญาติให้ทำกัน แต่ทีนี้ผมจะมาพูดถึง ajax cross domain อีกรูปแบบ ในกรณีที่อีก page ต่าง domain ยินยอมให้เข้าไป get ข้อมูล โดย register method ไว้ก่อน ซึ่งลักษณะนี้เรามักเรียกว่า Web Service หรือ API นั่นเอง

  1. var base_url = ‘http://www.jquerytips.com/debug/jsonp.php’;

 

  1. <!– JavaScript –>
  2. $(document).ready(function() {
  3.   $(‘.doajax’).click(function() {
  4.                 $.ajax({
  5.                         url: base_url,
  6.                         dataType: ‘jsonp’,
  7.                         data: ‘id=10′,
  8.                         jsonp: ‘jsoncallback’,
  9.                         success: function(str) {
  10.                                 $.each(str, function(i, item) {
  11.                                         alert( i + ‘=’ + item );
  12.                                 });
  13.                         }
  14.                 });
  15. });
  16. <!– JavaScript –>

 

  1. <a href="javascript:void(0);" class="doajax">Ajax Call</a>

ตามตัวอย่างโคดด้านบนจะเห็นได้ว่า dataType เราเป็น jsonp โดยที่เรามี callback ชื่อว่า jsoncallback ที่นี้เรามาดูโคดทางฝั่ง server ว่าจะคืนค่ามายังๆไง (ในที่นี้ผมใช้ php เป็น server side script)

  1. <?php
  2. require_once(‘JSON/JSON.php’);
  3. $json = new Services_JSON();
  4.  
  5. $arr[‘uri’] = $_SERVER[‘REQUEST_URI’];
  6. $arr[‘query’] = $_SERVER[‘QUERY_STRING’];
  7.  
  8. echo $_GET[‘jsoncallback’].‘(‘.$json->encode($arr).‘)’;
  9. ?>

สังเกตุว่าผมมีการ set ค่า $_GET['jsoncallback'] ก่อนที่จะ return data คืนให้นั่นคือตัวบอกครับ ว่าเราจะ allow callback ตัวนี้ เท่านี้เราก็จะได้ data ที่เป็น json กลับไปแล้วครับ ถึง 2 script นี้จะอยู่ต่าง domain กัน

จริงๆ แล้ว jQuery ในส่วนของ ajax request เรายังเขียนได้สั้นกว่านี้อีกนะครับ โดยเขียนแค่

  1. $.getJSON(base_url + ‘?jsoncallback=?’, function(obj) {
  2.                         $.each(obj, function(i, item) {
  3.                                 alert( i + ‘=’ + item );
  4.                         });
  5.                 });

ก็ยังทำงานได้เหมือนกันตามปกติ

ทีนี้เราลองมาคิดดูว่าการทำแบบนี้จะมีประโยชน์ยังไงบ้าง

1. ลด resource ของการทำงาน โดยเราไม่จำเป็นต้องใช้ server เดียวในการ return data
2. สามารถทำ Web Service เพื่อให้ชาวบ้านมาใช้ได้ง่ายๆ

ตอนนี้คิดประโยชน์ได้แค่นี่ แหะๆ ^^

]]> http://www.jquerytips.com/2008/04/26/ajax-cross-domain/feed/ 6 วิธีแก้ไขปัญหา events ไม่ทำงานหลังจาก ajax requested http://www.jquerytips.com/2008/04/21/events-after-ajax-requested-not-working/ http://www.jquerytips.com/2008/04/21/events-after-ajax-requested-not-working/#comments Mon, 21 Apr 2008 16:44:33 +0000 Tee++; http://www.jquerytips.com/2008/04/21/events-after-ajax-request-not-working/ ผ่านพ้นสงกรานต์ไปแล้วก็หวังว่าทุกคนคงยังสบายดีกันอยู่นะครับ ไม่ใช่ไปเมาตกน้ำแถวไหน อิอิ (ล้อเล่นนะครับ) ตัวผมเองก็ห่างหายจากการอัพเดทบล๊อกไปนานทีเดียว วันนี้ก็เลยจะมาพูดถึงปัญหาสำคัญที่หลายๆ คนมักตั้งข้อสงสัยกันว่า

“ทำไม event ต่างๆที่เขียนในรูปแบบของ jQuery จึงไม่ทำงานหลังจาก ajax call ?”

เช่นสมมุติเราเขียน function ให้ทำงานตามนี้

  1. $(‘a.doajax’).click(function() { alert(‘I am a link’); });

จากนั้นเีรามี ajax request ไปที่ไฟล์ more.html ซึ่งหลังจากเรารับค่ามาแล้ว พอดีในไฟล์นี้มี tag a.doajax อยู่ด้วย แต่มันจะไม่สามารถทำงานได้ เพราะว่าคำสั่งที่เราเขียนว่าจะทำงาน at time ที่มันโหลดเท่านั้น ไม่ทำงานต่อในกรณีเราใช้งาน ajax call ซึ่งเราสามารถแก้ไขปัญหาได้แบบนี้

  1. <script language="javascript">
  2. $(document).ready(function() {
  3.   var bindBehaviors = function() {
  4.     $(‘a.doajax’).click(function() {
  5.       alert(‘I am a link’);
  6.     });
  7.   }
  8.  
  9.   bindBehaviors
  10.  
  11.   $(‘a.ajaxRequest’).click(function() {
  12.     $(‘#somediv’).hide().load(‘more.html’, function() {
  13.       bindBehaviors
  14.       $(this).fadeIn();
  15.     });
  16.   });
  17. });
  18. </script>

วิธีการนี้เป็นการเตรียม function ไว้ก่อน ซึ่งตอน load เราก็เรียกมา 1 ที หลังจาก ajax call เราก็เรียกมาอีก 1 ทีเพื่อให้ tag a.doajax ที่อาจจะมีใน more.html รับฟังมันไปอีกที ไม่ยากใช่มั้ยครับ

ซึ่งนอกจากวิธีนี้ ก็ยังมี นักพัฒนาหลายคนที่เขียน plugin ไว้แก้ปัญหานี้ด้วยเช่น

Live Query
Intercept

สำหรับวันนี้พอแค่นี้ละครับ หอมปากหอมคอ เดี๋ยวเร็วๆนี้จะนำเรื่องที่น่าสนใจกว่านี้มาอัพให้ครับ

]]> http://www.jquerytips.com/2008/04/21/events-after-ajax-requested-not-working/feed/ 1 Ajax SEO และ jQuery http://www.jquerytips.com/2008/01/15/ajax-seo-jquery/ http://www.jquerytips.com/2008/01/15/ajax-seo-jquery/#comments Tue, 15 Jan 2008 04:33:05 +0000 Tee++; http://www.jquerytips.com/2008/01/15/ajax-seo-%e0%b9%81%e0%b8%a5%e0%b8%b0-jquery/ ช่วงนี้กระแส SEO กำลังแรง เลยขอมาพูดซะหน่อย ^^

ตอนนี้เทรนด์ที่มาแรงในการพัฒนาเวบไซด์คงหนีไม่พ้น Ajax ซึ่งหลายๆคนคงทราบอยู่แล้วว่ามันมีการทำงานยังไง ถ้ายังไม่รู้ก็ลองไปอ่านได้ที่ Blog เพื่อนผมเอง What’s ajax แต่ปัญหาที่สำคัญของ Ajax ก็คือเรื่อง SEO นี่แหละ เพราะจากที่ผมทราบ Googlebot ไม่สามารถที่จะอ่าน Javascript หรือ Events ต่างๆ เช่น onclick, onkeypress, on… ต่างๆ ได้ ทำให้เป็นผลเสียกับ SEO เป็นอยากมาก เพราะ Botengine ไม่สามารถที่จะ เก็บข้อมูลเพื่อไปสร้าง Index ให้ได้

ลองดูข้อมูลที่ Bot เห็นได้ที่นี่ คลิก

แต่ปัญหานี้เราสามารถแก้ไขได้ครับ โดยการไม่ใช้ Events ตรงๆ เช่น onclick=”ajaxsomething();” แต่เปลี่ยนมาเป็นการไต่เอกสารในรูปแบบ DOM แทน ซึ่งลองดูตัวอย่างได้ ที่เวบเพื่อนผมอีกคน Bot vs SEO

ซึ่งตจรงนี้เราสามารถใช้ jQuery ได้ง่ายๆเช่น เราจะเรียก content เพื่อมาวางใน div ชุดนึง

ซึ่งจากโคดด้านบนผมต้องการที่จะให้เรียก url ที่อยู่ตาม link เพื่อมาแสดงใน div ผมก็จะเขียนแค่

$(document).ready(function() {
$("[@rel='aj']").click(function() {
var URL = $(this).attr('href');
$.get(URL, function(data) {
$("#fadeContent").html(data);
});
return false;
});
});

เท่านี้ผมก็สามารถให้ Ajax ทำงานเหมือนเดิมโดยที่ Bot ก็ยังวิ่งไปที่ Anchor ได้เหมือนเดิม และยัง เก็บ index ได้ตามปกติ แต่ว่า…

วิธีนี้ก็ยังมีผลเสียอีกนิดนึงที่เราอาจจะมองข้ามไป นั่นคือสิ่งที่ Google จะเก็บ ตามตัวอย่างนี้คือ somecontent.html ซึ่งแน่นอนมันจะมีแค่ content ซึ่งเราจะดึงมาโชว์ในหน้าที่จัด layout แล้ว ดังนั้นเวลา Google index ไปแล้ว user คลิกเข้ามาจาก search จะเจอแต่ตัว content ที่ไม่มี layout แน่นอนว่ามันไม่ใช่ผลดีเลย -*-

ดังนั้นเราอาจจะแก้ไขได้โดย เติม parameter 1 ตัวส่งไปเช่น

var URL = $(this).attr('href') + '?type=ajax';

แล้วในหน้า somecontent.html ก็เปลี่ยนมาเป็น server side script เช่น php asp jsp แล้วไปดักข้อมูลคือ

(ในที่นี่ผมจะลองโดยใช้ php)

if ($_GET['type'] == 'ajax')
{
//ค่าที่จะส่งให้ javascript นำไปประมวลผลต่อ อาจจะออกมาในรูปแบบ html, text, json, xml อะไรก็ตามแต่สะดวก
echo "content";
}
else
{
//render ตามปกติ เป็นเวบไซด์ซึ่งมี content กับ layout
echo "header";
echo "content";
echo "footer";
}

เท่านี้ปัญหาก็จะหมดไป รวมถึงไม่ต้องกังวลว่า web เราจะไม่สามารถใช้ได้ถ้า user ไม่มี javascript อีกดวย ^^

]]> http://www.jquerytips.com/2008/01/15/ajax-seo-jquery/feed/ 9