Posts tagged as:

javascript

One of my clients had Pivotal Labs build them a website. After Pivotal Labs finished the project, they helped them find a developer to maintain it for them. I took over from him.

This last week, I had to dig deeply into the javascript code to make a piece of functionality I was modifying conform to what they had in other places on the site. What happened during the two days I worked on it was that I learned how they had things set up. Here are some of the things I found.

Jelly

Jelly provides you with an extension to the JQuery framework that allows you to trigger callbacks from your Rails controller. It’s exceptionally useful for things you need to occur when your server call is completed.

Namespaced Functions

The Pivotal Labs developers put a lot of things under a namespace named after the project. They further namespaced functions under namespaces corresponding to controllers and widgets, with some functions matching up with action names where widgets and other functionality could be implemented and initialized.

This is really handy in cases where you need specific functionality only is specific cases.

Javascript Loading at the end of the page

Finally, a method in the ApplicationHelper was provided that added all of the requisite javascript files to an array and then called javascript_include_tag on the array to include all of the files. This was done at the bottom of the page to avoid holding up the rest of the page loading while waiting for assets.

This also allowed for functions that required the DOM to be loaded to simply be called instead of using the JQuery $(function(){…}) callback style.

{ 1 comment }

Specification

  • Clicking a star rating turns on the stars to the left of the star I clicked.
  • Clicking a star submits the star rating.
  • When I refresh the page, the star ratings should be persistent.

We’ll be using Rails’ functions including:

  • form_for
  • hidden_field
  • Rails Helpers

We’ll be using jQuery functions including:

  • click
  • each
  • ajax

<code>
<% form_id = “movie_#{movie.id}_rating” %>
<%= form_for movie.ratings.last || movie.ratings.build, :html => {:id => form_id , :class => “star_rating_form”} do |f| %>
<%= f.hidden_field :movie_id %>
<%= f.hidden_field :stars, :id => form_id + “_stars” %>
<% end %>
<% (1..5).each do |i| %>
<li id=”<%= form_id %>_<%= i %>” data-stars=”<%= i %>” data-form-id=”<%= form_id %>”></li>
<% end %>
</code>

<code>
var set_stars = function(form_id, stars) {
for(i=1; i <= 5; i++){
if(i <= stars){
$(‘#’ + form_id + ‘_’ + i).addClass(“on”);
} else {
$(‘#’ + form_id + ‘_’ + i).removeClass(“on”);
}
}
}

$(function() {
$(‘.rating_star’).click(function() {
var star = $(this);
var form_id = star.attr(“data-form-id”);
var stars = star.attr(“data-stars”);

$(‘#’ + form_id + ‘_stars’).val(stars);

$.ajax({
type: “post”,
url: $(‘#’ + form_id).attr(‘action’),
data: $(‘#’ + form_id).serialize()
})
});

$(‘.star_rating_form’).each(function() {
var form_id = $(this).attr(‘id’);
set_stars(form_id, $(‘#’ + form_id + ‘_stars’).val());
});
});
</code>

{ 4 comments }

 

Ruby on Rails 3.1 is moving to use Sprockets to compile CoffeeScript into JavaScript and include JQuery in it’s JavaScript by default.

This is a quick demo of how it all hangs together to manage your JavaScript in Rails 3.1.

Download 65.7 MB
Download (iPod & iPhone) 41.4 MB

{ 15 comments }

CoffeeScript is now going to be a default installation with Ruby on Rails. So, I installed CoffeeScript and NodeJS and have been playing with it for the last hour or so.

Here are the basics you need to know to use CoffeeScript including functions, arrays, hashes (objects), control functions (if, else, unless) and loops.

In my opinion it is friendlier than JavaScript and more terse, but I don’t feel like it’s a huge win over JavaScript. That being said, it is something I’m likely to use in the future.

Download 168 MB
Download (iPhone & iPod) 87.3 MB

{ 81 comments }

This video demonstrates how to build a countdown timer with the setInterval function in Javascript, a text field, and jQuery to update your text field.

Download 70.8 MB
Download (iPhone & iPod) 40.6 MB

{ 10 comments }