Lightbox in rails

Using a lightbox in rails is just a few steps.

Download lightbox.js and lightbox.css (or) control.modal.js and control_modal.css, which will be available if you search in any search engine. Copy the js file to your javascripts folder in the app and copy the css file to your stylesheets folder.

Then do the following code in your view file

<%= javascript_include_tag ‘prototype.js’, ‘lightbox.js’%>
<%= stylesheet_link_tag ‘lightbox’%>

<span id=”lightbox”><a id=”call” href=”<%= new_personal_path %>”>Click Here to Add a New Employee’s Personal Detail</a></span>
<script>new lightbox($(‘call’), {className:’lightbox_container’});</script>

if you use control.modal.js instead of lightbox.js then do this

<%= javascript_include_tag ‘prototype.js’, ‘control.modal.js’%>
<%= stylesheet_link_tag ‘control_modal’%>

<span id=”Control.Modal”><a id=”call” href=”<%= new_personal_path %>”>Click Here to Add a New Employee’s Personal Detail</a></span>
<script>new Control.Modal($(‘call’), {className:’lightbox_container’});</script>

Making a ajax request from rails

Making a AJAX request in rails is pretty simple. Just follow the below example. It will take you to the particular  method (ex.., todo_fix method in the rooms controller) as used in my example. Then in controller you can perform your operation and do the render part.

In View File

Sample Rails code

<% todo_item=TodoItem.find(:first) %>

<a href=”javascript:call_this(<%= todo_item.id %>);”>Add a New To-Do Item</a>

JavaScript function in the same file

<script>
function call_this(a)
{
var url = “/rooms/todo_fix”;
var pars = “new_todo=” + a;
var target = ‘idresult’;
var myAjax = new Ajax.Updater(target,url, {method: ‘post’,parameters: pars});
}
</script>

Difference between Rails 2 & Rails 3 in using commands

Rails 2

script/generate

Rails 3

rails g (or) r g

Rails 2

script/console

Rails 3

rails c (or) r c

Rails 2

script/server

Rails 3

rails s (or) r s

Rails 2

script/dbconsole

Rails 3

rails db (or) r db

Conditions on Rails 3 is very simple

Post.where(:title => “test”)

Post.where(:title => “test”).order(“created_at DESC”)

Post.order(“created_at”).limit(10)

Post.where(“created_at <= ?”, Time.now).includes(:comments)

Post.where(:author => “Joe”).include(:comments).order(:title).limit(10)

Validation in Rails 3

• :presence => true
• :uniqueness => true
• :numericality => true
• :length => { :minimum => 0, maximum => 2000 }
• :format => { :with => /.*/ }
• :inclusion => { :in => [1,2,3] }
• :exclusion => { :in => [1,2,3] }
• :acceptance => true
• :confirmation => true

Example

validates :login, :presence => true, :length => {:minimum => 4},
          :uniqueness => true, :format => { :with => /[A-Za-z0-9]+/ }

Ajax Request in Rails 2 & Rails 3

AJAX request from anchor tag

Rails 2
<a href="#" onclick="new Ajax.Request('/comments/1', {asynchronous:true, evalScripts:ture, method:'delete'}); return false;">Destroy</a>

Rails 3
(unobstrusive JavaScript in Rails 3) 
<a href="/comments/1" data-remote="true" data-method="delete">Destroy</a>

Routing in Rails 3

Root Route

root :to => 'welcome#show'.

Named Route

match ‘logout’, :to => ‘sessions#destroy’

RESTful Routes

resources :products

Nested Resources

resources :projects do

resources :tasks, :people

end

Namespaced Resources

namespace :admin do

resources :projects

end

Some example :

  match "/about(.:format)" => "info#about", :as => :about

  match "/:year(/:month(/:day))" => "info#about", :constraints => { :year => /\d{4}/, :month => /\d{2}/, :day => /\d{2}/ }

BDD in Rails

Step 1 :First install the following gems

• gem install cucumber
• gem install rspec
• gem install webrat
• gem install factory-girl
• gem install cucumber-rails
• gem install database_cleaner

Step 2 :in environments/test.rb

config.gem ‘rspec-rails’, :lib=>false
config.gem ‘rspec’, :lib=>false
config.gem ‘cucumber’
config.gem ‘webrat’

Step 3 : in features/support/env.rb

require ‘cucumber/rails/rspec’
require ‘webrat/integrations/rspec-rails’

Step 4 : in command prompt

rake gems:install RAILS_ENV=test
script/generate cucumber
script/generate rspec

Step 5 : in /features/signin.feature ( create a new file)

Feature:
So that I can manage my own personal information securely
As a registered user
I want to log into the system

Scenario:

Given I am an existing user
When I fill in “login” with “selva”
And I fill in “password” with “selvaonrails”
And I press “Log in”
And I should see “Logged in successfully”
Then I am on the home page

Scenario:

Given I am a nonexisting user
When I fill in “login” with “baduser”
And I fill in “password” with “badpassword”
And I press “Log in”
Then I should see “Username / Password incorrect”

Step 6 : In /features/step_definitions/user.rb (create a new file)

Given /^a valid user$/ do
visit “/sessions/new”
fill_in(“login”, :value=>”selva”)
fill_in(“password”, :value=>”selvaonrails”)
end

Given /^I am a nonexisting user$/ do
visit “/sessions/new”
end

Step 7 : in /features/support/paths.rb

when /the home\s?page/
‘/’

Step 8 : run in command prompt
cucumber features/signin.feature

date_select

• :use_month_numbers – Set to true if you want to use month numbers rather than month names (e.g. “2” instead of “February”).
• :use_short_month – Set to true if you want to use the abbreviated month name instead of the full name (e.g. “Feb” instead of “February”).
• :add_month_number – Set to true if you want to show both, the month‘s number and name (e.g. “2 – February” instead of “February”).
• :use_month_names – Set to an array with 12 month names if you want to customize month names. Note: You can also use Rails’ new i18n functionality for this.
• :date_separator – Specifies a string to separate the date fields. Default is “” (i.e. nothing).
• :start_year – Set the start year for the year select. Default is Time.now.year - 5.
• :end_year – Set the end year for the year select. Default is Time.now.year + 5.
• :discard_day – Set to true if you don‘t want to show a day select. This includes the day as a hidden field instead of showing a select field. Also note that this implicitly sets the day to be the first of the given month in order to not create invalid dates like 31 February.
• :discard_month – Set to true if you don‘t want to show a month select. This includes the month as a hidden field instead of showing a select field. Also note that this implicitly sets :discard_day to true.
• :discard_year – Set to true if you don‘t want to show a year select. This includes the year as a hidden field instead of showing a select field.
• : order – Set to an array containing :day, :month and :year do customize the order in which the select fields are shown. If you leave out any of the symbols, the respective select will not be shown (like when you set :discard_xxx => true. Defaults to the order defined in the respective locale (e.g. [:year, :month, :day] in the en locale that ships with Rails).
• :include_blank – Include a blank option in every select field so it‘s possible to set empty dates.
• :default – Set a default date if the affected date isn‘t set or is nil.
• :disabled – Set to true if you want show the select fields as disabled.
• :prompt – Set to true (for a generic prompt), a prompt string or a hash of prompt strings for :year, :month, :day, :hour, :minute and :second. Setting this option prepends a select option with a generic prompt (Day, Month, Year, Hour, Minute, Seconds) or the given prompt string.

Examples

date_select("post", "written_on")
date_select("post", "written_on", :start_year => 1995)
date_select("post", "written_on", :start_year => 1995,
                       :use_month_numbers => true,
                       :discard_day => true,
                       :include_blank => true)
date_select("post", "written_on", : order => [:day, :month, :year])
date_select("user", "birthday", : order => [:month, :day])
date_select("post", "written_on", :default => 3.days.from_now)
date_select("credit_card", "bill_due",
                    :default => { :day => 20 })
date_select("post", "written_on",
       :prompt => { :day => 'Select day',
                    :month => 'Select month',
                    :year => 'Select year' })

Scrolling automatically to some part of the link when clicking the anchor tag in html and rails

<div align=”center”>
<table border=”1″ cellspacing=”1″ width=”500″ id=”table1″>
<tr>
<td>
<div align=”left” id=”top”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100″ id=”table2″>
<tr>
<td><a href=”#home”>HOME</a></td>
</tr>
<tr>
<td><a href=”#about”>ABOUT</a></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height=”500″ valign=”top”><span id=”home”>HOME AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
<td valign=”top” height=”700″><span id=”about”>ABOUT AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
</table>
</div>
$(document).ready(function(){
$(“.scroll”).click(function(event){
//prevent the default action for the click event
event.preventDefault();

//get the full url – like mysitecom/index.htm#home
var full_url = this.href;

//split the url by # and get the anchor target name – home in mysitecom/index.htm#home
var parts = full_url.split(“#”);
var trgt = parts[1];

//get the top offset of the target anchor
var target_offset = $(“#”+trgt).offset();
var target_top = target_offset.top;

//goto that anchor by setting the body scroll top to anchor top
$(‘html, body’).animate({scrollTop:target_top}, 500);
});
});