1. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 16 Introduction to Ajax

2. 16-2 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16.3 Rails with Ajax The prototype JavaScript library is integrated into Rails Rails and Ajax have some limitations Not all elements can be modified, depending on the browser The div element can be modified Rails and Ajax process Sequence is triggered Data is sent asynchronously to an action handler The action handler creates a response JavaScript in the browser interprets the response

3. 16-3 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16.3 The Initial Form Document The popcorn example is used here, with the zip code helper The show_form action and document show_form.rhtml are the first contact, providing the form

4. 16-4 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16.3 Triggering Ajax Ruby provides methods to set up triggers for Ajax processing link_to_remote triggers when a link is activated observe_field is triggered when a widget is changed Method observe_field Takes the name of the widget as a first paramater Several ‘keyword’ parameters :url where to post, often associated with an :action symbol definition :update associated to the id of the elment whose value is to be changed in response :with specifies a parameter for the HTTP request :frequency specifies how often to check :complete, :success, :failure associate with callbacks used depending on the outpcome of the reuqest

5. 16-5 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16.3 Example A special tag is used to introduce JavaScript into a Rails template A method update_city_state is defined as the :complete callback since two fields have to be changed with the response

6. 16-6 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16.3 The Controller The fill_city_state method is added to the controller to handle the asynchronous request The render method is used to create the content of the response since it is simple text