AJAX on Rails(2)
Posted by PunNeng, Sat Mar 04 22:27:00 UTC 2006
ต่อจากคราวที่แล้ว มาต่อกันด้วยการใช้ form_remote_tag จะมีลักษณะเหมือนกันกับ link_to_remote แต่คราวนี้มันจะไปทำงานร่วมกับ form แทน มาดูตัวอย่างกันดีกว่า
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>Ajax List Demo</title> <%= javascript_include_tag "prototype" %> </head> <body> <h3>Add to list using Ajax</h3> <%= form_remote_tag(:update => "my_list", :url => { :action => :add_item }, :position => "top" ) %> New item text: <%= text_field_tag :newitem %> <%= submit_tag "Add item with Ajax" %> <%= end_form_tag %> <ul id="my_list"> <li>Original item... please add more!</li> </ul> </body> </html> |
มันจะเหมือนกับการประกาศ <form>.....</form> แต่ปุ่ม submit แทนที่พอจิ้มแล้ว มันจะต้องสั่งไปที่ file อันนึง แล้วมันจะ redirect ไปหน้านั้น แต่อันนี้มันจะยิงไปที่ method ที่เราสั่งแทน มันก็ไม่เกิดการ refresh ขึ้น
โดย parameter ที่ส่งไปไนั้น จะมี id ของ tag ที่เราจะทำการ update อันถัดไปจะเป็น url ก็คือ method ที่เราจะสั่งให้มันทำงาน และอีกตัวนึงที่จะมีก็ได้ หรือไม่มีก็ได้ คือ ตำแหน่ง
จะได้หน้าตาแบบนี้มา
แล้วมาดูที่ฝั่ง controller กันบ้าง
1 2 3 4 5 6 7 8 | class ListdemoController < ApplicationController def index end def add_item render_text "<li>" + params[:newitem] + "</li>" end end |
add_item จะทำการคุม list เมื่อรับค่า newitem เข้ามาจาก form
หน้าตาจะเป็นแบบนี้เมื่อทำเสร็จแล้ว
โย่
ส่วนสำคัญอีกอันนึงคือการใช้ตัวคอยตรวจจับอย่าง Observers ตัว Observers จะมีหน้าที่คอยตรวจจับการเปลี่ยนแปลงของ tag ที่เราต้องการจะตรวจจับ เมื่อมีการเปลี่ยนแปลงมันจะไปเรียกให้ method ใน controller ให้ทำงาน เช่น
1 2 3 4 5 6 7 8 | <label for="searchtext">Live Search:</label> <%= text_field_tag :searchtext %> <%= observe_field(:searchtext, :frequency => 0.25, :update => :search_hits, :url => { :action => :live_search }) %> <p>Search Results:</p> <div id="search_hits"></div> |
ในนี้จะมี textfield มาตัวนึง ซึ่งมันจะถูกตรวจทุกๆ 0.25 วินาที เมื่อมีการเปลี่ยนแปลง ตัว live_search จะถูกเรียกให้ทำงาน ในกรณีที่ไม่ใส่ค่า :frequency มันจะสั่ง method ให้ทำงานในทุกๆ ครั้งที่มีการเปลี่ยนแปลง ดูตัวอย่างเท่ๆ ได้ที่ http://blog.curthibbs.us/ จะมี searchbox อยู่ ลองใช้ดูละกัน
website
- Official Ruby home page
- Official Ruby on Rails homepage
- Rails Ajax API
- Download the Rails source code used to create the screenshots in this article.
เอาละ คงจะรู้จัก AJAX กันมากขึ้น จากที่ผมเคยว่าไปแล้ว และก็อันนี้ ของใหม่ ที่ทำบน Rails สำหรับคนที่ต้องการจะใช้ ควรจะพิจารณาในหลายๆ ด้านก่อน อย่าคิดว่าจะใช้เพียงเพราะว่าความเท่อย่างเดียว เพราะสิ่งที่มันไม่ค่อยดีกับ AJAX ก็มีเหมือนกัน กล่าวคือ เมื่อเราต้องการจะ bookmark มันไง ถ้าหากว่าเราทำนั่นๆๆ นี่ๆๆ ไปหมดแล้ว แล้วอยากจะเก็บ link มันเอาไว้ มันก็จะเก็บไว้นะ แต่พอที่เรามาที่ link นี้อีกที มันก็จะกลับสู่หน้าแรก แล้วที่ทำๆๆ มาล่ะ ? อีกอันคือปุ่ม back บนหน้า browser เพราะเมื่อเรารู้สึกว่า มันผิดแล้ว อยากจะ back กลับไปจังเลย ถ้าจิ้มละก็ มันก็จะไป link ที่เราเคยมา นั่นหมายความว่า เปลี่ยนหน้าไปเลย เพราะ url มันก็เป็นอันเดิม พอสั่ง back มันก็กลับไป url ก่อนหน้าที่เราเคยเข้ามา
หรือในกรณีที่เราอยากจะทำการสร้างใหม่ทั้งหน้า
เหนื่อยตายเลย แบบนี้ เราจะนิยมโหลดหน้ามันมาใหม่เลยดีกว่า เพราะจะได้ไม่ต้องมาสั่งลบ html dom แล้วสั่งสร้างหน้าของเราใหม่อีกที
แต่ในกรณีนี้ เราอาจจะใช้ iframe เข้าช่วยได้
ก็คงจะแล้วแต่ทุกท่านละกัน ใช้งานอะไร ก็ให้มันเหมาะสมกับงานละกัน
ข้อมูลจาก http://www.onlamp.com
แก้ไขล่าสุด วันที่ 3 กรกฏาคม 2550 เวลา 21.58 น.
