Ajaxification

26Sep09

(Notes from Chapter 24 of “Agile Web Development with Rails, Third Edition”)

ActionView::Helpers::PrototypeHelper

Prototype – makes doing Ajax calls simpler

  • Should use form_tag(‘javascript:void(0)’) do %> when want to avoid the form actually being submitted via a non JavaScript way
  • wrap the rendered partial that we want to be able to replace <div id=”ajaxWrapper”> … </div>
  • encodeURIComponent(value) is useful for sending parameters with the Ajax request
  • <%= javascript_include_tag “prototype” %> generates the code for including a JavaScript file
  • Possible responses: nothing (just HTTP headers), HTML to be injected into the page, structured data such as XML or CSV, JavaScript code to be executed by the browser
  • :update can be a simple element ID (string) or a hash of :success and :failure element IDs
  • :position tells the JavaScript where to insert the response, relative to the existing content
    • :before, :after – before/after target element’s open tag
    • :top, :bottom – just inside the target element, either after the opening tag (:top) or the closing tag (:bottom)
  • filters – wrapping the Ajax call with conditionals
    • :confirm => “string” only sends the Ajax call if the user clicks OK in a JavaScript confirmation dialog box containing “string” as the text
    • :condition => expression only sends the Ajax call if expression is true
    • :before => expression evaluates the JavaScript expression immediately before making the Ajax request
    • :after => expression evaluates the JavaScript expression immediately after sending the Ajax request (not necessarily before receiving a response)
  • JavaScript callbacks – :success, :failure, :complete (like begin,rescue, and ensure)

Prototype Helper functions

  • link_to_remote – calls a controller method
    • first parameter is the text to show on the link
    • followed by a hash of options, such as :url link in url_to with the :action, and :update as explained above
  • link_to_function – clicking on a link results in a JavaScript function being called
  • observe_field binds a remote_function to the onchange event
  • observe_form essentially performs observe_field on each form element
  • form_remote_tag creates a form tag with a handler for the onsubmit that points at a controller action (like form_tag)
  • remote_form_for acts just like form_for but with Ajaxification
  • submit_to_remote describes the problem that I am supposed to be fixing, ticket #357 that hitting enter in the input field does nothing
    • If you are just using buttons and not a specially set submit button to post the form with the onclick event, then hitting enter does *not* submit the form, as you would expect – it only works if you click on it

RJS Templates

  • file in the app/views hierarchy with a .js.rjs extension
  • contains Ruby helper methods to make JavaScript calls
  • a .js.rjs file will automatically be called after the corresponding action has reached the end
  • replace_html replaces the innerHTML of the element and replace replaces the entire element including the tag
    • takes an ID (or array of IDs) and anything you can pass in a render call
  • insert_html
    1. position of the insert, one of :before, :top, :bottom, :after
    2. ID of target element
    3. options
  • show, hide, and toggle – takes single ID element or an array of IDs
  • remove – remove the given ID element or array of element IDs
  • select a specific element on the page with page[‘element_id’]
Advertisements


No Responses Yet to “Ajaxification”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: