15 พฤษภาคม 2555

Internship, DAY 18

วันนี้ไปทำงานสายอีกแล้ว แต่อยากจะไปสายยิ่งกว่านี้อีกเพราะพี่วินแม่งแว๊นมาก ตัวงี้กระเด้งกระดอนอยู่บนมอเตอร์ไซต์ไม่รู้จะหล่นลงไปเมื่อไหร่ น่ากลัวชะมัด ขับช้าๆก็ได้เพ่ หนูไม่มีหมวกกันน็อกเหมือนเพ่นะ

ไปถึงก็สายโด่ง ทุกคนทำงานกันหมดแล้ว เราก็เปิดคอม กดทราเวียน เย้ยย เออนั่นแหละ แต่เค้าก็ทำงานด้วยนะ เริ่มจากหาโค้ดแสดงผลใน div ใหม่ (ก็คือ ajaxpage ตัวใหม่นั่นแหละ) ก็ได้จากเว็บใกล้ตัวอย่าง w3school โค้ดเข้าใจง่ายขึ้น แต่เอาไปใช้ยากขึ้นหน่อย

ลองเอาโค้ดไปเทสต์กับ Database ตัวเอง พบว่าต้องแปลง input ในฟังก์ชั่นของ Javascript ด้วย encodeURI() ก่อน ถึงจะเวิร์ก

จากการส่งค่าแบบธรรมดาอย่างนี้

xmlhttp.open("GET","getuser.php?q="+str,true);

ก็เปลี่ยนใหม่เป็นแบบนี้

xmlhttp.open("GET","getuser.php?q="+encodeURI(str),true);

และต้องแก้โค้ดที่ query Link 77 จังหวัดเสียใหม่ งมอยู่พอสมควร เพราะโค้ดเก่ามันเป็น Dropdown List แต่เราต้องการให้มันเป็น Link โง่ๆ ก็ได้ความช่วยเหลือจากเว็บนี้ จึงทำให้การเทสต์เบื้องต้นของเราสำเร็จ แก้แค่ตรง echo ใน Loop ก็จบ

echo ' < li class="list" >< a class="linklist" href="#" value="'.$p.'" onclick="showUser( this.value )" >'.$p.'< /a >< /li > ';

และพบความจริงที่แทบอยากจะร้องไห้

โค้ดนี้ส่งค่าให้ไฟล์ที่ query ตารางถูกเฉพาะ IE เท่านั้น นอกนั้นบึ้ม!

สรุปก็คือ โค้ดคราวก่อนใช้ได้ทุกตัวยกเว้น IE พอมาทำวันนี้ได้เฉพาะ IE ตัวอื่นใช้ไม่ได้ เจริญ!

ตอนนั้นกำลังหาทางรวมร่างโค้ดอยู่ ทั้งๆที่รู้ว่ามันบั๊กนั่นแหละ แต่ว่ามึนหัวมากเลย แถมพี่ต้องเรียกไปดูบั๊กที่ลง Driver ไปตั้งแต่เมื่อวาน ดูไปดูมา พี่ต้องบอกว่า เดี๋ยวพี่ดูเอง เหอๆๆๆ หนูขอโต๊ดดด แต่มันไม่รู้จะทำไงจริงๆอ๊ะ

พี่ต้องมาดูความคืบหน้างาน และบอกว่า ให้ทำแบบธรรมดา include ไฟล์ php มาแบบโง่ๆเลย คือบางส่วนหนูนึกออกอะค่ะ แต่บางส่วนก็นึกไม่เอาว่าทำไง ก็เลยใช้ ajax ปนด้วย พี่เค้าเห็นบั๊กบานเบอะของเราแล้วพูดว่า

เดี๋ยวโปรเจ็กจะเสร็จไม่ทันนะ

พอได้ยินคำว่าโปรเจ็กปุ๊บ เริ่มรู้สึกแปลกๆ รู้สึกว่าไองานที่นั่งทำอยู่นี่มันชักจะไม่ใช่ของเล่นแฮะ

แล้วที่ผ่านมา เราทำอะไรลงไปเนี่ย????

Internship, DAY 17

คำเตือน: บล็อกตอนนี้ยาวมาก

วันนี้มาจากบ้าน แทนที่จะมาจากหอ แถมกะเวลาพลาด เพราะนอกจากจะเป็นวันเปิดเทอมของเด็กมัธยมวันแรกแล้ว ยังเป็นวันสอบสัมภาษณ์ของเด็กปี 1 อีกต่างหาก ไปถึงออฟฟิศ 10 โมงครึ่ง เข้าไปถึง...

ไม่มีใครด่าซักกะคน 5555

วันนี้อารมณ์ดีขึ้นหน่อย เพราะไม่ได้จมอยู่แต่กับโค้ดแล้ว มีคอมพิวเตอร์เก่าๆโผล่มาจากไหนก็ไม่รู้เป็น 10 เครื่อง เหมือนจะเคยเป็นคอมจากร้านเน็ตมาก่อน เพราะนอกจากคอมแล้ว ยังมีเก้าอี้ โต๊ะ โผล่มาในออฟฟิศเต็มไปหมด

เรากับเพื่อนได้เช็คคอมแต่ละตัวว่าตัวไหนบึ้ม ตัวไหนไม่บึ้มก็จับลง windows ใหม่ แต่เอาเข้าจริงทั้งวันก็ลงแค่เครื่องเดียว กว่าจะแงะ เอาตัวอ่าน CD จากเครื่องนึงเอาใช้แทนอีกเครื่องที่บรึ้มไป CD ลงวินโดว์บางแผ่นก็บึ้ม ทำให้ไม่รู้ว่าตกลงลงวินโดว์ไม่ได้เพราะ CD หรือเครื่องอ่านกันแน่ (สรุปคือ ทั้งสองอย่างนั่นแหละ กำ = =)

สภาพเครื่องที่ต้องเอาตัวอ่าน CD จากเครื่องอื่นมาใช้แทน


ที่เหลือพี่เค้าบอกให้ Ghost เอาพรุ่งนี้ (เราตื่นเต้นมาก เพราะไม่เคยทำไรยังงี้มาก่อน แต่เพื่อนบอกว่า ก็แค่ บลาๆๆๆๆๆๆๆ จบกัน รู้สึกว่าตัวเองโง่มาก)

เพื่อนจัดการลง windows ซึ่งกินเวลา Format ยาวนานสามล้านปี เสร็จแล้วเราก็มานั่งลง Antivirus ต่อ พี่เค้าให้ใช้ของ avg ต้องลงตัวออฟไลน์ด้วยนะ ตอนแรกลงตัวออนไลน์ไป ไม่ได้ต่อสายแลน พี่เค้าไม่ยอมให้ต่อตอนที่ลงใหม่ๆ กลัวมีปัญหา ก็เลยต้องเอา avg ตัวออฟไลน์มาลงแทน แล้วก็ลงน้องแพนด้าด้วย

และก็ลง Nvidia Driver ซึ่งแผ่นที่พี่เค้ามีอยู่เดิมนั้นใช้บ่ได้ คนละรุ่นกัน เช็คใน DirectX Diagnostic Tools ก็ขึ้นว่า N/A ก็เลยต้องไปเช็คที่เลขรหัสไรซักอย่าง เนื่องจากโน้ตบุ๊กที่พิมพ์อยู่เป็น 7 เมนูอะไรหลายอย่างก็ต่างกัน ทำให้ลืมไปแล้วว่าเช็คยังไง เอาเป็นว่าได้รหัสก้อนควายๆมาเช็คได้ว่าการ์ดจอเรารุ่นอะไรกันแน่ แล้วก็โหลดจากเครื่องเราเนี่ยแหละ ก๊อปใส่ Flash Drive ไปลงเครื่องพี่เค้า ไอวิธีการเช็คแบบนั้นก็ถือเป็นความรู้ใหม่อย่างหนึ่ง

เสร็จแล้วก็ลง Driver ต่อ (จริงๆคิดว่าเพื่อนลงไปแล้ว ปรากฎว่ามันยังไม่ลง) เนื่องจากว่าต้องลง XP เนื่องจากสภาพเครื่องค่อนข้างเก่าพอควร ทำให้ต้องมาระลึกความหลังการลง Driver เรียงตามลำดับ โชคดีที่พี่ต้องม่โฟลเดอร์เรียงตามลำดับให้เรียบร้อย ฟิ่ว~~

แต่ยังเห็นเครื่องหมายต๊กกะใจสีเหลืองๆโผล่มาตรง Device Manager อยู่เลย ก็งงเหมือนกัน เพราะมันเป็นส่วน Audio และ Realtek ก็ใช้ได้ตามปกติแล้วด้วย อุตส่าห์เอาหูฟังอันเท่าบ้านมาเช็คเสียงให้เลยนะ พอดีพี่ต้องกลับไปแล้วตอนนั้น ก็เลยดองบั๊กไว้ก่อน Assume ว่าใช้ได้แล้ว


ส่วนระหว่างขั้นตอนการลงวินโดว์ ลงไดร์เวอร์อันแสนยาวนาน เราก็หนีไปเล่นทราเวียน เอ๊ย เออนั่นแหละ เล่นด้วยทำงานไปด้วย ทำ CSS ของตารางให้มัน fix ซักหน่อย แต่มันก็ fix ได้แค่ระดับนึง ยังขยับบ้างนิดหน่อย แต่ก็ดีกว่าตอนแรกที่ดูยืดขยายตามข้อมูลมากเกินไป พยายามหาวิธีจนขี้เกียจหาก็เลยค่อยๆไล่แกะบั๊ก Highlight Auto-Complete ทีละนิดอย่างใจเย็น (ใช้เวลาสงบสติอารมณ์กับบั๊กนานมาก สังเกตจากการโวยวายในบล็อกก่อนๆ) สุดท้ายก็ค้นพบว่า บั๊กมันอยู่ที่ไฟล์ที่ชื่อ reset.css ซึ่งสามารถหาโหลดได้ง่ายๆ มีไว้ reset CSS ให้เกลี้ยงเกลา จะได้เอาไปเขียนใหม่ต่อได้ง่ายๆ


โค้ดส่วนที่ต้องแก้ไขใน reset.css


  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14.     margin: 0;
  15.     padding: 0;
  16.     border: 0;
  17.     font-size: 100%;
  18.     font: inherit;
  19.     vertical-align: baseline;
  20. }



วิธีแก้ไขก็ไม่ยาก สังเกตเห็นว่าจะไม่มีประเภท b,i,u อยู่ในนั้น เพราะเราลบออกไปหมดแล้ว การที่ไปเซ็ตค่า b ใหม่ทำให้มันไม่ยอมแสดงตัวหนา เลยทำให้พาลไฮไลท์ไม่ได้ไปด้วย พอเอาออกแล้วก็ไฮไลท์ได้ทันที ดีใจน้ำตาร่วง เอาออกแค่นิดเดียวเอง นึกว่าโค้ดมันตีกันจนบึ้มไปแล้วซะอีก


script ที่ทำ Auto-Complete และทำให้มัน Highlight ได้ด้วย ใส่ไว้ในส่วน Header

ขอขอบคุณเว็บนี้ ที่ทำให้เราทำได้ จริงๆแยกกันก็ทำได้ พอรวมกันเจอ reset.css เข้าไป บึ้มเลย


  1. <script type="text/javascript">
  2.    
  3. $(function() {
  4.  
  5.             $( "#tags" ).autocomplete({
  6.                         source: "for_auto.php",
  7.                         minLength: 2,
  8.                         delay: 0
  9.             })
  10.             ;
  11. });
  12.  
  13. //makes jQuery autocomplete highlight properly
  14. //via http://stackoverflow.com/questions/3695184/jquery-autocomplete-highlighting
  15. $.ui.autocomplete.prototype._renderItem = function( ul, item){
  16. var term = this.term.split(' ').join('|');
  17. var re = new RegExp("(" + term + ")", "gi") ;
  18. var t = item.label.replace(re,"$1");             //$1
  19. return $( "
  20. )
  • .data( "item.autocomplete", item )
  • .append( "" + t + ")
  • .appendTo( ul );
  • };
  •  
  • function jQueryUIAutoCompleteMustMatch(input) {
  •             var found = 0;
  •            
  •             var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( jQuery.trim($(input).val()) ) + "$", "i" );
  •            
  •             jQuery.each($('.ui-autocomplete li'), function(i, val) {
  •                         if(jQuery.trim( $(val).text() ).match( matcher ) ) {
  •                                     found = 1;
  •                         }
  •             });
  •            
  •             if (found) {
  •                         return true;
  •             } else {
  •                         $(input).val('');
  •                         return false;
  •             }
  • }
  • script>



  • เสร็จแล้วก็จะได้ออกมาแบบนี้


    ให้พี่ต้องดู พี่ต้องบอกว่าไม่ค่อยชัด อยากให้ Highlight เป็นสีๆไปเลยมากกว่า ซึ่งลองแก้โค้ดเบื้องต้นแล้วไม่สามารถยัดความสามารถอื่นใดนอกจาก b,u,i ลงไปได้ ลองท่าอื่น Auto-Complete บึ้มทันที

    ส่วนบั๊ก IE ที่เคยพูดถึงในบล็อกคราวทีแล้ว พี่ต้องบอกว่าน่าจะเกิดจากเจ้า Ajaxpage นั่นแหละ ซึ่งเราว่า Ajaxpage อะ ไม่มีปัญหาหรอก เพราะมันก็แสดงส่วน linklist 77 จังหวัดได้สวยงาม

    IE ต่างหากที่มีปัญหา

    พี่เค้าบอกว่า...

    เขียนใหม่เถอะน้อง

    Orz