การใช้ link_to_remote()

เริ่มต้นการสร้าง Application Ajax อย่างง่าย ดังนี้

  1. สร้าง rails application
  2. เขียน controller และ view

เขียน controller

class DemoController < ApplicationController
  def index
  end

  def say_when
    render_text "<p>The time is <b>" + DateTime.now.to_s + "</b></p>"
  end
end

เขียน view

<html>
  <head>
    <title>Ajax Demo</title>
    <%= javascript_include_tag "prototype" %>
  </head>
  <body>
    <h1>What time is it?</h1>
    <div id="time_div">
      I don't have the time, but
      <%= link_to_remote( "click here",
                         :update => "time_div",
                         :url =>{ :action => :say_when }) %>
      and I will look it up.
    </div>
  </body>
</html>
  • javascript_include_tag() เป็นการ include ไฟล์ javascript “prototype” เพื่อทำให้ Ruby สามารถใช้งาน Ajax ได้
  • link_to_remote() เป็นรูปแบบหนึ่งการเขียน มี 3 พารามิเตอร์ดังนี้
  1. ข้อความลิงค์ที่แสดง, click here
  2. กำหนด Tag id ที่เป็น DOM element ซึ่่งจะนำค่าของฟังก์ชันที่เรียกมาแสดงที่ tag นี้ ในที่นี้คือ time_div
  3. เป็น URL ที่จะเรียก action (method) ให้ทำงานทางฝั่ง server เมื่อถูกคลิ้ก ในที่นี้คือ action say_when

จะได้การแสดงผลดังนี้

a11.png

a12.png

จะเห็นได้ว่ามีการเรียก action “index” ทำให้เกิดการแสดงผลดังรูปด้านบน ซึ่งเมื่อดู code ใน controller นั้น action “index” ไม่มีการ implement อะไรเลย เพียงแต่มี template(view) “index.rhtml” เพื่อใช้ในการแสดงผลเท่านั้น และ action “say_when” จะมีการทำงานโดยไปดึงวันเวลาปัจจุบัน ออกมาแสดงผลเมื่อมีการคลิ้กลิงค์ ที่คำว่า “click here”

เมื่อ user คลิ้กที่คำว่า “click here” หลังจากนั้น browser จะส่งไปที่ URL ไปโดยจะเรียกไปที่ action “say_when” ที่ซึ่งจะ return ค่าออกมาในรูปแบบ HTML ที่บรรจุ เวลาปัจจุบัน


ทางฝั่ง client จะใช้ javascript รับ response นี้และ นำไปแสดงผลภายใน tag <div> ชื่อ time_div ซึ่งเราจะเรียกใช้ ส่วนนี้

<%= link_to_remote( "click here",
                   :update => "time_div",
                   :url => { :action => :say_when },
                   :position => "after" ) %>
  • มีการเพิ่ม parameter :position => “after” เพื่อบอก Rails ว่าให้แทรกสิ่งที่ return ออกมาหลังจาก target element (time_div)
  • เราสามารถกำหนด :position ได้ โดยมี values ได้แก่ before, after, top, and bottom
    • top และ bottom แทรกภายใน the target element,
    • while before และ after แทรกข้างนอก target element.

เมื่อเราเพิ่ม code แล้ว จะได้การแสดงผลดังนี้

a14.png

หน้า web page ทั้งหมดไม่ได้เปลี่ยน จะมีการเปลี่ยนเฉพาะส่วนของ tag div เท่านั้น จึงจะช่วยในการทำงานของ web page เร็วขึ้น ช่วยเพิ่มประสิทธิภาพของ web site


การใช้ form_remote_tag

เขียน controller

เพิ่ม 2 action ได้แก่ add_item และ demoform ในไฟล์ controller ดังนี้

class ListdemoController < ApplicationController
  def index
  end
  
  def say_when
    render_text "<p>The time is <b>" + DateTime.now.to_s + "</b></p>"
  end

  def add_item
    render_text "<li>" + params[:newitem] + "</li>"
  end

  def demoform
  end

end

จะเห็นว่า action : add_item จะเป็นส่วนที่นำข้อความที่ user พิมพ์จาก textbox มาแสดงผล

เขียน view

เขียน demoform.rhtml

<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>

Notice the two parts in bold. They define the beginning and end of the form. Because the form started with form_remote_tag() instead of form_tag(), the application will submit this form using XMLHTTPRequest. The parameters to form_remote_tag() should look familiar:

* The update parameter specifies the id of the DOM element with content to update by the results of executing the action–in this case, my_list. * The url parameter specifies the server-side action to call–in this case, an action named add_item. * The position parameter says to insert the returned HTML fragment at the top of the content of the my_list element–in this case, a

    tag.


    จะได้การแสดงผลดังนี้ a15.png

    a16.png

    a18.png

    การใช้ Observers

    Rails lets you monitor the value of a field and make an Ajax call to an action handler whenever the value of the field changes. The current value of the observed field is sent to the action handler in the post data of the call.

    A very common use for this is to implement a live search:

    <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>
    
    

แหล่งอ้างอิง