https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

That is the link to the jQuery source hosted by Google on their CDN. It’s probably already cached on client machines so it should be as fast as is possible! You can read more/use other Javascript libs from Google’s CDN here: http://code.google.com/apis/libraries/devguide.html#jquery

If you use the link_to_function to replace content in a div with content from a partial, any javascript that you include in the partial will not be executed. It is instead included, but will do nothing. Obviously, this isn’t the desired behavior. Why would we be taking the trouble to write the javascript in the partial? There is an easy fix. Instead of writing out the script tags, instead use the javascript_tag  method to wrap whatever javascript you would like executed when the partial is loaded.

<%=link_to_function "say hello" {|p| p.replace_html "container", :partial => "say_hello" }%>

And now in my say_hello.erb file

<% javascript_tag do %>
  alert("Hello World");
<% end %>

In the view there is a regular Rails form and a javascript function that will be triggered when the country select field is changed. The javascript function will make an ajax request to the country_select url with the country code passed as the id variable, e.g., /country_code/us for the United States. I’m also using the Carmen plugin for this example which will provide a list of countries and their respective states/provinces. Not all countries are full supported. More information on Carmen can be found at http://autonomousmachine.com/2009/4/1/carmen-a-rails-plugin-for-geographic-names-and-abbreviations and http://github.com/jim/carmen

<%form_for(@model) do |f| %>
<script type="text/javascript" charset="utf-8">
  function change_state_select(state_code)
 {
    new Ajax.Request('/country_select/'+state_code,
    {
      method: 'get',
      onSuccess: function(transport) {
        $('state_select').replace(transport.responseText);
      }
    });
  }
 </script>
 <%= f.select :country,
   Carmen::COUNTRIES,
   {},
   { :onchange => "change_state_select(this.options[this.selectedIndex].value);" }
%>
<div id='state_select'></div>

***Note the : onchange should really be one word but an emoticon shows up otherwise :onchange :(***
Since not all countries are supported I need to execute some conditional logic in the action country_select. If the country is supported I’ll return a snippet of html containing a select field that my form will use. If the country is not supported I’ll return a text field so that the user can write in their state/province.

class CountrySelectController < ApplicationController
  def country_selecet
      begin
         @states = Carmen::states(params[:id])
      rescue
         @states = nil
      end
      render :partial => "country_select/states"
  end
end

In the final partial that is rendered there is either a select field or a text field

<div id="state_select">
  <% if @states.nil? %>
    <%= text_field_tag :model, :state %>
  <% else %>
    <%= select :model, :state, @states%>
  <% end %>
</div>

There must be a better way to do the following with PrototypeJS. I want to loop over nested links inside of table td cells and apply a class to the row that the link is in when the link is clicked. If a user clicks on another link the class will be removed and applied to the current table row.

The code below works but I think it seems hackish. Any thoughts on improving this code?

Here is the link to the pastie http://pastie.org/703316

# This is the table with haml markup
%table
  %tr
    %td
       info
    %td
      = link_to "be clicked", remote_request_goes_here_path

And the Js

	$$("td.filter_link > a").each(function(element){
		Event.observe(element, "click", function(event){
			$$("td.filter_link").each(function(el){
				if(el != this){
					el.up().removeClassName("turnwhite");
				}
			});
                       // apply the turnwhite class to the table row
			this.up().up().addClassName("turnwhite");
		});
	});