Posts Tagged ‘ruby on rails’

Create a Page Loading Animation Using Ruby on Rails and AJAX

Thursday, January 7th, 2010

I had a difficult time locating all the pieces needed to accomplish this so I’m pulling them together into one tutorial that will hopefully help more people out.

Purpose: I had a page in my Rails application which did a lot of processing before the page loaded. This could take up to a minute depending on how many items needed to be processed. Obviously, this made for a poor user experience. To correct this, I created a new page with an animated GIF and a short message explaining to the user that it could take some time to load. I then used AJAX to do the intensive processing and then overwrote the HTML in the DIV tag that displayed the animated GIF. I’ve outlined the steps I took below.

Step 1: Create Your Animated GIF

Go to www.ajaxload.info to generate your animated wait image. Store the animaged GIF in your images folder.

Step 2: Add Remote_Function

You need to add the Rails remote_function code to create an AJAX call that runs when the page loads. To do this, you will need to add this code to the body tag.

<body onload="<%= remote_function(:url => { :action => :get_content_to_display } ) %>">

Step 3: Add Code to Display Animated GIF

Example: products/web_page.html.erb

<div id="display_ajax">
     <p>Please wait while your information loads.</p>
     <p><img src="/images/ajax-loader.gif" /></p>
</div>

Step 4: Create Partial to Display HTML Code

Example: products/_name-of-your-partial.html.erb

This file includes your display code.

Step 5: Create Controller to Display Ajax

Example: products_controller.rb

def get_content_to_display
     #Place code here
     render :update do |page|
          page.replace_html "display_ajax", :partial => 'name-of-your-partial'
     end
end

Now when you load this page, the animated gif will run until Rails has completed your get_content_to_display action. When this done, page.replace_html will overwrite your animated GIF and display your new content.

If you have any questions, please email me, chris@marketingformavens.com or post them in the comments below.

Using Bit.ly and Ruby on Rails to Shorten a URL

Monday, January 4th, 2010

If you’re building a Rails application and you need to add a URL Shortening service then you should look at philnash’s bitly gem. Bit.ly is dominating the crowded URL Shortening category. Its dashboard provides statistics for each shortened URL which makes it a very valuable tool.

To get started simply type:

gem install bitly

In your controller you’ll want to add:

require 'bitly'

Finally, to use the service you’ll need an API key. First create an account at bit.ly and then go to the following URL to retrieve you key: http://bit.ly/account/your_api_key/

To shorten a URL:

bitly = Bitly.new('your-bitly-user-id','your-bitly-api-key')
page_url = bitly.shorten('www.marketingformavens.com')
page_url.shorten => http://bit.ly/7BWXcQ

The URL has been shortened and you can display or use it in your application. You can also log into your Bit.ly dashboard and see detailed statistics on each URL.

To display stats in your dashboard use the following code:

page_url = bitly.shorten('www.marketingformavens.com', :history => 1)

For other options such as expanding a Bit.ly URL check out the documenation on github.

How to Develop Your Own Twitter App

Thursday, October 29th, 2009

Recently, I’ve been working on a new Twitter application that you can find in the Marketing for Mavens lab called ReStream. I don’t want to get into the details of that app as you can read more here. What I’d like to do is help those that have their own Twitter app ideas get started.

Thanks to those who have walked this path before me, getting your own Twitter app running is much easier than you’d think, especially if you’re already familiar with Ruby on Rails. If you’re not familiar with Rails, don’t let it hold you back. If you’ve programmed in other languages before then you can quickly pick it up.

Getting Started

To get started you will need Rails setup on your local machine. Start with RubyOnRails.org and these tutorials which helped me (some are old but are still helpful).

Now that Rails is Setup

  • Go to github.com and download jnunemaker’s Twitter application.
  • You will want to create a new folder for your Twitter application and copy all of the files and folders from this zip file you just downloaded into your new folder.
  • Open a your terminal window and go to the new folder you created for your Twitter app.
  • Install this Twitter gem. sudo gem install twitter
  • Start your server. script/server
  • Your application should now be running.
  • Open http://localhost:3000 in your browser and login to your new Twitterapp.

What’s Next

The sky’s the limit. jnunemaker has provided a fantastic foundation for any one aspiring to use Twitter’s API to build new applications. Even if your not familiar with Rails, you can look through the existing code to see how everything comes together.

If you need help or have any questions please let me know in the comment section below.

Filtering Active_Scaffold in Rails Using Drop Down Box

Wednesday, February 11th, 2009

We use active_scaffold throughout the Marketing for Mavens application and love it. There are several instances where we wanted to filter the generated tables based on a selected item in a drop down box. Since we couldn’t find this process documented any where on the web, I’ve decided to highlight what we did to get this working.

First you’ll want to start with you drop down box. We used Rails observe_field to generate an onselect JavaScript action when an item was selected from the drop down box.

INDEX.HTML.ERB

<%= observe_field   :widget_widget_type_id,                       
        # The field to observe
:with => "'widget_type_id=' + escape(value)",                    
        # The input to validate :o n  => "onselect",                                               
        # The frequency in seconds to watch for changes
:url  => {:action => 'filter_widget', :controller => 'widgets' }, 
        # The action to call when changes occur
:update => :filter_widget
        # Name of the <div> to update
%>

<div id="filter_widget"><%= render :active_scaffold => 'widgets',
   :constraints => {:company_id => @company.id}, :condition => @condition %></div>

You will notice we created a <div> tag to hold the generated table. This is important because the filter will replace this code after the user selects an item from the drop down box, effectively filtering your results.

Now we need to update the widgets controller to handle the new “filter_widget” action.

WIDGETS_CONTROLLER.RB

def filter_widget
  @conditions = "widget_type_id=#{params[:widget_type_id]}"
  render :inline => "<%= render :active_scaffold => 'widgets',
     :constraints => {:company_id => #{@company.id}}, :conditions => @conditions %>"
end

def conditions_for_collection
  @conditions
end

condition_for_collection creates the initial conditions for the table. After a selection is made from the drop down, filter_widget is called and the <div> in the INDEX.HTML.ERB file is replaced with the new code. Now your table is filter accordingly.

When implementing this code you may receive an “ActionController::InvalidAuthenticityToken” error message. One fix for this is to use the following code in your controller.

protect_from_forgery :o nly => [:create, :update, :destroy]

This may make your application vulnerable to hackers so research the side effects before implementing to make sure it’s right for your environment.