Ruby on Rails javascript: ajax carmen countries event onchange prototype states
by bseanvt
leave a comment
Onchange Event Fired from Select Field in Rails Form
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
nchange
***
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, Carmen::states(@states)%>
<% end %>
</div>
javascript: $$ code optimization javascript nested prototype tables td
by bseanvt
leave a comment
Accessing Links in Nested TD Cells with Prototype
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");
});
});