Home arrow JavaScript arrow Page 4 - Dynamically Generate a Selection List in a Rails Template
JAVASCRIPT

Dynamically Generate a Selection List in a Rails Template


If you're tired of the usual ways in which AJAX generates web widgets, read this article for something new. It lets the user choose the content of the pop-up. This article is excerpted from hack 58 of the book Ajax Hacks, written by Bruce W. Perry (O'Reilly; ISBN: 0596101694). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
July 31, 2008
TABLE OF CONTENTS:
  1. · Dynamically Generate a Selection List in a Rails Template
  2. · Work with Ajax and Ruby on Rails
  3. · Rendering the HTTP Response
  4. · A Little Partial Pizzazz

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Dynamically Generate a Selection List in a Rails Template - A Little Partial Pizzazz
(Page 4 of 4 )

Thepartialneeds thearrayvalues to build theselectlist; these are stored in theteamArrvariable. Rails uses its built-in naming convention forpartials (the underscore requirement) to find the correct content and render it as the response. Let’s look at thepartial_options.rhtml file:

  <select id="<%= sptype %>" name="<%= sptype %>">
  <% sports.each do |sport| %>
  <option><%= sport %></option>
  <% end %>
  </select>

A little embedded Ruby code gives theselectelement itsidandname. The embedded code then iterates through thearray(passed into thepartialby therender()method) and creates anoptionelement for eacharraymember, as in<option>hockey</option>. Although a little server-side Ruby code was involved, the code did not have to touch the request object or deal with fetching or massaging the return value.

Cleanup Code

The only bit of trickery involved is making sure that the application does not append one newselect list after another inside thedivas the user clicks the button. We want all the existingselects in thatdivto be replaced by any new ones. Therefore, we include a little cleanup code that empties thedivbefore it’s updated with a newselect list:

  <%= form_remote_tag(:update => "sel_con",:url => { :action =>
:create_select
  },
  :position => "top",success => "$('sel_con').innerHTML=''" ) %>

successsequentially precedes thecompletestage, so this code sets thediv’s content to the emptystring before the newselect list appears.

To handle any request failures, such as a downed web server, add this code from a prior hack as aform_remote_tag()parameter:

  #$('failure') is Prototype's shortcut for
  #document.getElementById('failure')
  :failure => "$('failure').innerHTML='Failure;
  request status='+request.status"
  


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials