418342 ภาคปลาย 2552/ปฏิบัติการที่ 11 - ประวัติรุ่นแก้ไข

87.216.168.25: /* ลงปลั๊กอิน auto_complete */

2011-10-01T03:46:16Z

ลงปลั๊กอิน auto_complete

2011-09-29T14:57:54Z

เพิ่ม autocomplete

2011-09-29T10:27:24Z

แก้ไข controller ของ Product

2011-09-29T10:26:16Z

เริ่มสร้างแอพพลิเคชัน

2010-02-05T02:25:57Z

2010-02-05T02:19:02Z

สร้างหน้า Search

2010-02-05T02:18:15Z

แก้ไข controller ของ Product

2010-02-05T02:13:19Z

เพิ่ม autocomplete

2010-02-05T02:02:13Z

สร้างหน้า Search

2010-02-05T01:58:21Z

สร้างหน้า Search

@@ แถว 3: / แถว 3: @@
 Walking in the presence of giants here. Cool thiiknng all around!
-== ลงปลั๊กอิน auto_complete ==
+Which came first, the problem or the solution? Luckily it doesn't mttaer.
 == สร้างหน้า Search ==

@@ แถว 60: / แถว 60: @@
 หลังจากทำขั้นนี้เสร็จแล้ว เมื่อเราพิมพ์ข้อความลงใน text box ของหน้า search หากข้อความนั้นตรงกับชื่อของสินค้าสักชิ้น เราก็จะได้ดูรายละเอียดของสิ้นค้าชิ้นนั้น แต่ถ้าไม่ตรงแม้แต่ตัวอักษรเดียว เราก็จะกลับมาที่หน้า search เหมือนเก่า
-== เพิ่ม autocomplete ==
+Play informative for me, Mr. inretent writer.
 == การทำ autocomplete ในกรณีที่มีความซับซ้อนมากยิ่งขึ้น ==
 ให้ดู http://railscasts.com/episodes/102-auto-complete-association

@@ แถว 7: / แถว 7: @@
   > ruby script/plugin install auto_complete
-== แก้ไข controller ของ Product ==
+Wham bam thank you, ma'am, my qeustinos are answered!
 == สร้างหน้า Search ==

@@ แถว 1: / แถว 1: @@
 ในปฏิบัติการนี้เราจะใช้ AJAX ในการทำ autocomplete ซึ่งหมายถึงตอนที่มีการพิมพ๋ข้อความในฟอร์ม ตัวเวบแอพพลิเคชันช่วยเลือกคำที่เราต้องการพิมพ์ให้
-== เริ่มสร้างแอพพลิเคชัน ==
+Walking in the presence of giants here. Cool thiiknng all around!
 == ลงปลั๊กอิน auto_complete ==

@@ แถว 39: / แถว 39: @@
 <geshi lang="rails">
-   # GET /products/search?name=abc
+   # GET /products/search?product[name]=abc
-   # POST /products/search?name=abc
+   # POST /products/search?product[name]=abc
    def search
-     if not params[:name].blank?
+     if not params[:product].blank? and not params[:product][:name].blank?
-       @product = Product.find_by_name(params[:name])
+       @product = Product.find_by_name(params[:product][:name])
        respond_to do |format|
          if @product
@@ แถว 107: / แถว 107: @@
    <p>
      <b>Name:</b>
-     <%= text_field_with_auto_complete :product, :name, {:name=>"name"}, {:method=>:get} %>
+     <%= text_field_with_auto_complete :product, :name, {}, {:method=>:get} %>
    </p>
    <%= submit_tag "Search" %>
 <% end %>
 </geshi>

@@ แถว 75: / แถว 75: @@
 <geshi lang="rails">
 ActionController::Routing::Routes.draw do |map|
-   map.resources :products, :collection=>{:search=>[:get,:post]}
+   map.resources :products, :collection=>{
    ...

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 02:18, 5 กุมภาพันธ์ 2553
แถว 18:		แถว 18:
	auto_complete_for :product, :name		auto_complete_for :product, :name

		+	...
		+
		+	end
		+	</geshi>
		+
		+	การสั่ง auto_complete_for จะทำให้มีการสร้าง action ขึ้นมาใหม่หนึ่ง action (ชื่อ auto_complete_for_product_name) ซึ่งเราจะต้องบอกให้ rails รับรู้ว่ามี action ใหม่นี้เข้ามาด้วยการเปลี่ยน config/routes.rb ดังต่อไปนี้
		+
		+	<geshi lang="rails">
		+	ActionController::Routing::Routes.draw do \|map\|
		+	map.resources :products, :collection=>{
		+	:auto_complete_for_product_name=>:get}
		+
	...		...

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 02:02, 5 กุมภาพันธ์ 2553
แถว 68:		แถว 68:

	end		end
		+	</geshi>
		+
		+	หลังจากทำขั้นนี้เสร็จแล้ว เมื่อเราพิมพ์ข้อความลงใน text box ของหน้า search หากข้อความนั้นตรงกับชื่อของสินค้าสักชิ้น เราก็จะได้ดูรายละเอียดของสิ้นค้าชิ้นนั้น แต่ถ้าไม่ตรงแม้แต่ตัวอักษรเดียว เราก็จะกลับมาที่หน้า search เหมือนเก่า
		+
		+	== เพิ่ม autocomplete ==
		+	อันดับแรกเราต้องเพิ่ม javascript_include_tag ลงในไฟล์ app/views/layouts/product.html.erb ก่อน
		+
		+	<geshi lang="html">
		+	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
		+	<head>
		+	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		+	<title>Products: <%= controller.action_name %></title>
		+	<%= stylesheet_link_tag 'scaffold' %>
		+	<%= javascript_include_tag :defaults %> <-- เพิ่มบรรทัดนี้
		+	</head>
		+	<body>
	</geshi>		</geshi>