Posts tagged as:

jquery

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 }

Here is what I’ve done to create this application:

  1. Use the ‘rails new’ command to create a rails application
  2. Set up the Gemfile
  3. Configure the Database
  4. Install Cucumber
  5. Install Rspec
  6. Install Devise
  7. Install CanCan
  8. Install jQuery
  9. Configure Devise

Download (HD) 84.2 MB
Download (iPod & iPhone) 47.4 MB

{ 37 comments }

Ruby on Rails allows you to nest models within a form. Ryan Bates of Railscasts demonstrated how to set up these forms with JavaScript using the Prototype framework, which ships with Rails.

In this episode, Charles Max Wood gives a brief overview of how Ryan’s code works, and then refactors the JavaScript to use JQuery.

Ryan Bates demonstrated how to build a form with nested attributes in Ruby on Rails with Prototype. This screencast demonstrates how to refactor that form into usage of jQuery.
Download 88.4 MB
Download (iphone & ipod) 40.7 MB

{ 2 comments }


In this screencast we’ll cover aligning floated elements on an HTML page using jQuery, the jQuery Masonry plugin and CSS.
Download 83 MB
Download (iphone & ipod) 55 MB

{ 2 comments }


In this concluding episode, we go over how to add search functionality to our Flitter application, and add a ‘follow / unfollow’ button which uses AJAX. This is the last of the 6-part series on how to create a Twitter Clone using Ruby on Rails.
Download 346 MB
Download (iphone & ipod) 110 MB

{ 2 comments }


The saga continues. Here we learn how to add the friends list to your application and we use AJAX to add/remove friends.
Download 251.4
Download (iphone & ipod) 111.4

{ 27 comments }


In this screencast, we continue our challenge of creating a Twitter clone called ‘Flitter’ using Ruby on Rails. We learn how to use jQuery to create a countdown for the text area box. We also set up adding and removing friends via the interface. Oh… you hear my baby cry and my sister-in-law call. Fun stuff 😀
Download 399 MB
Download (iphone & ipod) 119 MB

{ 0 comments }

Earlier, I had a problem getting the result of my Ajax call and operating on it without doing an asynchronous callback. What I wanted to do was assign the result of my ajax call to a variable so I could parse through it and return a result. After a little searching, I found this result.

var result = $.ajax({url: "/my_relative_path", data: {param1: value, param2: value}, async: false}).responseText;

Please note that because responseText returns a string, if your Ajax response includes JSON formatted objects, you need to use eval to convert them to objects.

var result_objects = eval(result);

In my case, I was returning a list of parameter id’s that matched some form fields I need to to change the style of. So, I created a for loop and looped over the objects in my array.

{ 5 comments }