วันพฤหัสบดี, กรกฎาคม 05, 2550

อ่าน Agile Web Development with Rails ( 11 )

ทีนี้มาดูว่าเขาใช้ AJAX ใน Rails กันอย่างไร

ปกติเราใส่ปุ่มเข้าไปใน Rails โดยแทรกโค้ดง่ายๆดังนี้

<%= button_to "Add to Cart" , :action => :add_to_cart, :id => product %>

ซึ่งในเวลาทำงานจะสร้างโค้ด html อย่างนี้

<form method="post" action="/store/add_to_cart/1" class="button-to" >
<input type="submit" value="Add to Cart" />
</form>

เราเอา AJAX มาใช้ตรงนี้โดยการแทนที่แท็ก button_to โดยโค้ดนี้

<% form_remote_tag :url => { :action => :add_to_cart, :id => product } do %>
<%= submit_tag "Add to Cart" %>
<% end %>

คำสั่ง form_remote_tag ใช้สร้างฟอร์ม โดยโค้ดระหว่างบล็อก do - end จะเป็น elements ในฟอร์มที่สร้างขึ้น

นอกจากนี้ เพื่อให้ Rails รับรู้การใช้งาน AJAX เราต้องไปเพิ่มคำสั่ง javascript_include_tag ที่ head ใน app/views/layouts/store.rhtml ดังนี้

<head>
<title>Pragprog Books Online Store</title>
<%= stylesheet_link_tag "depot" , :media => "all" %>
<%= javascript_include_tag :defaults %>
</head>

โค้ดที่เขียนขึ้นจะถูกเรียกโดย add_to_cart แต่เราจะไม่ใช้ app/views/store/add_to_cart.rhtml อันเก่า (ลบทิ้งซะ) แต่จะใช้ app/views/store/add_to_cart.rjs แทน ดังนี้

page.replace_html("cart" , :partial => "cart" , :object => @cart)

เช่นนี้เอง

ไม่มีความคิดเห็น: