Front End Development javascript tips & snippets: caching cdn Google javascript jquery page load speed
by bseanvt
leave a comment
Link to jQuery Source from Google’s CDN
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
javascript Ruby on Rails: javascript link_to_function partial prototype replace_html
by bseanvt
leave a comment
Execute Javascript When Using Link_to_function To Include a Partial in Rails
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 %>
javascript Ruby on Rails: ajax carmen countries event onchange prototype states
by bseanvt
48 comments
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 :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>
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");
});
});


