Michael Benedict

Subscribe to Michael Benedict: eMailAlertsEmail Alerts
Get Michael Benedict: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Related Topics: RIA Developer's Journal, AJAX World RIA Conference

RIA & Ajax: Article

AJAX in Ruby on Rails with Prototype, Script.aculo.us

Look at the Script.aculo.us wiki to know more about other effects and their parameters.

AJAX Helpers

  1. button_to_function(button_value, *args, ∓block)
    Returns a button that‘ll trigger a JavaScript function using the onclick handler. All of these go into the body tag of the view file. You can use the visual_effect function to specify any visual effects
  2. Example :
    This will show a button with the value “Greeting”, upon clicking will show a alert box with “Hello World!” inside.

    <%=button_to_function "Greeting", "alert('Hello world!')" %>

    This will display a button with value “Fade”, upon clicking will fade in or fade out the element ‘fade_text’ (It can be a div element with id=fade_text).

    <%=button_to_function "Fade", visual_effect(:toggle_appear, "fade_text", :duration => 0.5)%>
  3. link_to_function(name, *args, &block)
    Intead of a button, if you want to implement AJAX functionality using a text link. You can use this helper.
    Returns a link that will trigger a JavaScript function using the onclick handler and return false after the fact.

    Example :
    This will show a “Greeting” link, upon clicking will show a alert box with “Hello World!” inside.

    <%=link_to_function "Greeting", "alert('Hello world!')" %>

    This will display a “Slide Me” link, upon clicking it will slide in or out the element ’slide_text’ (It can be a div element with id=slide_text).

    <%=link_to_function "Slide Me", visual_effect(:toggle_slide, "slide_text", :duration => 0.5)%>

    Helper for Animation

  4. visual_effect(name, element_id = false, js_options = {})
    Returns a JavaScript snippet to be used on the Ajax callbacks for starting visual effects.

    Example :
    This will show a “Highlight” button, upon clicking will highlight the element which is specified.

    <%=button_to_function "Highlight", visual_effect(:highlight, "element_id_name",:startcolor => '#ffff99', :endcolor => '#ffffff')%>

    This will display a “Grow” link, upon clicking it will grow the specified element_id_name

    <%= link_to_function "Grow", visual_effect(:grow,"element_id_name",:direction => "center",:duration => 1)%>

I would really suggest to go through Script.aculo.us WIKI to know more about every effect and their parameters. All of these effects can be used with RoR. For Example I have attached the code for the demo file.

Code for the Demo File

View Demo

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>AJAX</title>
  6. <%= javascript_include_tag :defaults %>
  7. </head>
  8. <body>
  9. <%=button_to_function "Greeting Alert Me", "alert('Hello world!')" %><br /><br />
  10. <h4>Actions with paragraph using buttons</h4>
  11. <%=button_to_function "Fade", visual_effect(:toggle_appear, "fade", :duration => 0.5)%>
  12. <%=button_to_function "Slide", visual_effect(:toggle_slide, "fade",:duration => 1)%>
  13. <%=button_to_function "Highlight", visual_effect(:highlight, "fade",:startcolor => '#ffff99', :endcolor => '#ffffff')%>
  14. <div id="fade" style="border:1px solid #dbdbdb; margin:50px;">
  15. This is test, This is test<br>
  16. This is testing....<br>
  17. Lorum ipsum blablasadadada
  18. </div>
  19. <h4>Actions with Green Box using links</h4>
  20. <%= link_to_function "Toggle Fade", visual_effect(:toggle_appear, "s1", :duration => 0.5)%> ||
  21. <!-- Transitions --><%= link_to_function "Fade with wobble","new Effect.Fade('s1', { transition: Effect.Transitions.wobble })" %> ||
  22. <!-- grow effect --><%= link_to_function "Grow", visual_effect(:grow,"s1",:direction => "center",:duration => 1)%> ||
  23. <!-- shake effect --><%= link_to_function "Shake", visual_effect(:shake,"s1",:distance => "30",:duration => 1)%> ||
  24. <!-- morph effect --><%= link_to_function "Morph to Red box", visual_effect(:morph,"s1",:style => "{background: '#f00',color: '#fff',width: '200px'}" )%> ||
  25. <br>
  26. <br>
  27. <div id="s1" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #444; text-align:center;">
  28. </div>
  29. <h4>Drag Action with Blue Box</h4>
  30. <div id="s2" style="width:80px; height:80px; cursor:move; background:#7baaed; border:1px solid #333; text-align:center;">
  31. <%= draggable_element("s2", :revert => true) %>
  32. DRAG ME
  33. </div>
  34. </body>
  35. </html>

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.