AJAX in Ruby-on-Rails

1. AJAX in Ruby-on-Rails

2. Ruby on Rails and AJAX AJAX can be done with just Javascript Easier if you use libraries Prototype SAJAX jQuery Libraries only handle the client side Ruby on Rails also makes it easy on the server side

3. Simple Consistent Model A trigger action occurs button or link, javascript event Data is sent asynchronously Server side action handler takes some action and returns data may be HTML partial Client side receives the data/HTML and updates the view

4. Client Side Based on the prototype library Simple Ruby functions link_to_remote form_remote_tag periodically_call_remote submit_to_remote remote_function View uses these functions which generate appropriate HTML tags and javascript function calls

5. View

6. Details javascript_include_tag includes the appropriate javascript libraries :defaults includes a few may also just include specific libraries link_to_remote (can be complex) most often need text for link name id of the DOM element to update url may also specify :method - default is POST :position - must be one of :before, :top, :bottom, :after :complete, :success, :failure javascript callback functions

7. Server Side AJAX calls are treated just like any other HTTP request However, we don�t want full response layout, css, etc. To suppress full response use render(:text => �string�) may also use render_text render(:layout => false) .js.rjs file with partial controller with no layout

8. Example

9. form_remote_tag

10. More complex

11. .js.rjs templates Controller action methods are paired by name with view files in app/views/controller_name directory Typically, .html.erb files May also be .js.rjs ruby javascript javascript to be executed on load allows for multiple page updates written in Ruby Paired with controller action method that doesn�t contain calls to render

12. .js.rjs example

13. Updating the DOM with .js.rjs Mark the location to be updated <div id=�someid�> or <span id=�someid�> </div> or </span> Now replace the stuff in that location using page.replace_html page.replace_html �someid�, �<b>HI</b>� .js.rjs file is interpreted into javascript and the javascript is executed when it is loaded

14. Other page methods alert(message) replace_html(id, *options_for_render) options for render may be string with html insert_html(position, id, *options_for_render) position must be :before, :after, :top, :bottom show( *ids ), hide( *ids ), & toggle( *ids ) toggles the visibility of the html elements visual_effect(effectname, id, options) page.visual_effect(:fade, �someid�, :duration => 0.5) page.visual_effect(:appear, �someid�, :duration => 0.5) page.visual_effect(:highlight, �someid�, :duration => 1)

15. .js.rjs Much of what you can do is based on the scriptaculous library http://script.aculo.us/ Also look at the Ruby on Rails api ActionView::Helpers::ScriptaculousHelper ActionView::Helpers::PrototypeHelper

17. Another Example - View Dynamically populate form elements

18. Another Example cont - controller

19. Another Example cont - partial _options