Ruby on Rails: December 2010

Thursday, December 30, 2010

Datepick in FaceBox

:javascript
  $(document).bind('reveal.facebox', function() {
   $('.item_payment_date').datepick({dateFormat: 'yyyy-mm-dd'});
  });
you are calling datepick on class item_payment_date

"type deprecated use class instead"

I have a table with a column named "type" and I 'd like to access  
the type field of the correspondant model object but I get a   deprecation warning when I use the following code :

type is a reserved word in ruby for now. So call your type field  
something else like mytype or kind.

Datepicker not working in FaceBox

Fun with jQuery datepicker and Facebox

I know, big surprise, something stops working in facebox. In this case, it’s datepicker, which is actually a pretty nice little date selection plugin. Unfortunately, it uses HTML element ID attributes in order to function, and that means it all falls apart when facebox clones the HTML. After fiddling with it for a while, I figured out the following:

First, you have to deal with that pesky ID problem. Thankfully, you can use jQuery selectors to find the datepicker fields, and then the plugin will determine the IDs dynamically. Which means you don’t have to know the IDs before hand. So, you just bind a method to the facebox.reveal event to change the IDs, like so:

jQuery(document).bind('reveal.facebox', function() {
  jQuery('#facebox .datepicker').each( function(intIndex){
    jQuery(this).attr('id',jQuery(this).attr('id') + '-2')
  });
});

Of course, it is possible that those field IDs are important to you, In which case, when you need to refer to them you should remember that you appended that ‘-2′ to the end of the ID.

The next problem is that datepicker initiates after the page loads, which means that when facebox clones the HTML to display, the new date field won’t have initialized. This is simply solved by adding some more code to the binding the initialize method to the facebox.reveal event, instead of the page load. Like so:

jQuery(document).bind('reveal.facebox', function() {
  jQuery('#facebox .datepicker').each( function(intIndex){
    jQuery(this).attr('id',jQuery(this).attr('id') + '-2')
  });
  jQuery('#facebox .datepicker').datepick({
    alignment: 'bottomLeft',
    buttonImageOnly: true,
    buttonImage: '/images/calendar_date_select/calendar.gif',
    showOn: 'both',
    showStatus: true
  });
  jQuery('#facebox [name=field_name]').datepick('option', 'onSelect', function(value, date) {
    jQuery('#facebox [name=field_name]').val(value);
  });
});

There you go, now it initializes when the facebox loads. Problem solved.

Or is it?

It just happens that my particular implementation involved more than one facebox, each with it’s own datepicker. Suddenly, all of my well thought out hacks fall apart, and nothing works again.

There’s probably a prettier way to fix this, but I needed the solution to be modular. A given facebox might appear on one page by itself, and on another page with several others. I needed to solve the conflict without breaking the independence, so I ended up wrapping the whole script in an if statement that checks for an element on a given form.

jQuery(document).bind('reveal.facebox', function() {
  if(jQuery('#facebox [name=model[field]]').length>0){
    jQuery('#facebox .datepicker').each( function(intIndex){
      jQuery(this).attr('id',jQuery(this).attr('id') + '-2')
    });
    jQuery('#facebox .datepicker').datepick({
      alignment: 'bottomLeft',
      buttonImageOnly: true,
      buttonImage: '/images/calendar_date_select/calendar.gif',
      showOn: 'both',
      showStatus: true
    });
    jQuery('#facebox [name=field_name]').datepick('option', 'onSelect', function(value, date) {
      jQuery('#facebox [name=field_name]').val(value);
    });
  }
});

Not pretty, I know. Especially, since the above code is replicated everywhere a facebox with a datepicker field appears on the page, sometimes multiple times on one page. It works, though. That’s the important thing, right?

Datepicker not working in FaceBox

jQuery DatePicker Plugin and Facebox Gotcha

I have been using the excellent Datepicker Plugin by Keith Wood in one of my projects, along with Facebox and came across a gotcha today.

The Situation :-

I am basically using a link on the main page to open up a popup style window using Facebox. This main page itself is loaded via an AJAX call as one of the tabbed page content, not that it matters but I thought I would mention it. And in the Facebox window, I have a form which has some Date fields in it. I am using the mentioned Datepicker plugin to bring up a nice looking calendar for those fields.

The Problem :-

The DatePicker calendar popup doesn’t show up when you click on one of the Date fields, as it should. But when you close the window, you can see the remnants of the popup calendar, implying that it indeed opened up but was below the Facebox popup window, therefore, not visible.

The Solution :-

I used Firebug to see if the DatePicker was actually being written to the DOM. It was, indeed. I tried changing the z-index property to something high such as 9999 and it started appearing on the Facebox window form fields. So, I checked the jquery.datepick.js file to see how it was calculating the z-index. At line 980, it says :-

1var zIndex = $target.css('zIndex');
2zIndex = (zIndex == 'auto' ? 0 : parseInt(zIndex, 10)) + 1;

So, it is basically picking the z-index of the target element and adding 1 to it. Therefore, I went ahead and added the z-index style to my form elements :-

1<input type="text" style="z-index:9999;" id="startDatepicker" name="arrivaldate" 

FaceBox and datepicker

http://stackoverflow.com/questions/2386718/jquery-live-failing-with-jquery-ui-datepicker

Wednesday, December 29, 2010

jQuery date picker plug-in

This is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Designed from the ground up to be flexible and extensible, the date picker can be used in unlimited ways to allow you to add calendar widgets to your pages.
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

jQuery Datepicker

A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges
http://keith-wood.name/datepick.html

Tuesday, December 28, 2010

Configure Ruby on Rails with no database

Although Rails is intended for creating database-backed web applications, this example is simple enough that it doesn’t require one. In this case, you need to edit the enviroment.rb configuration file to indicate that your application does not use a database. It is possible to disable loading ActiveRecord by making a simple modification to environment.rb:

1. Open ‘/config/environment.rb’ file in a text editor.

2. Remove the pound character (#) in front of line 21 to uncomment it so that it reads as:

config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

ActiveRecord supports database access for Rails applications. When you create model objects, you will most likely base them on ActiveRecord::Base.

3. Save the file.

facebook graph api in ruby on rails application

TO SEARCH FACEBOOK POSTS IN RUBY ON RAILS WITH FGRAPH

Introduction :

Facebook Graph Ruby API implementation with Ruby magic (graph.facebook.com).

You can apply all options available with facebook graph API in your application.

Installation : script/plugin install http://github.com/jugend/fgraph.git

Benifits:

To use graph.facebook API in your application.

Allow to search any keyword or posts from facebook.

Allow to publish your posts.

You can fire single and multi object query.

The follwing steps will give you idea about using fgraph for searching posts from facebook.

Step1: Before starting you have to add facebook registered app_key and secrete key in your fgraph.yml file.

Step2: In controller or in your application’s console write following query.

FGraph.search(‘watermelon’, :type => ‘post’)

FGraph.search_post('watermelon')

Example:

>> @fb_post = FGraph.search_post(‘PAC-MAN’,:limit=>2)

=> [{"name"=>"FUNNY!!! The Funniest Boxing Bout Ever!!!", "from"=>{"name"=>"Rodelio Vergara", "id"=>"100000696510058"}, "application"=>{"name"=>"Links", "id"=>"2309869772"}, "icon"=>"http://static.ak.fbcdn.net/rsrc.php/yj/r/v2OnaTyTQZE.gif", "id"=>"100000696510058_164141430295647", "created_time"=>"2010-12-20T08:29:58+0000", "type"=>"video", "caption"=>"www.youtube.com", "updated_time"=>"2010-12-20T08:29:58+0000", "description"=>"Ladies and gentlemen, place ur bets cos this is the funniest fighting bout ever in the history of mankind. Laugh, comment n rate. Enjoy!!!", "link"=>"http://www.youtube.com/watch?v=atcOdlj6aQI", "source"=>"http://www.youtube.com/v/atcOdlj6aQI&autoplay=1", "message"=>"ito ang tatalo kay pacman!!", "picture"=>"http://external.ak.fbcdn.net/safe_image.php?d=9d9ef62897b0b3a6bec50451a530c99a&w=130&h=130&url=http%3A%2F%2Fi.ytimg.com%2Fvi%2FatcOdlj6aQI%2F0.jpg"}, {"name"=>"TrackRunners - Pacman The Best Pound for Pound [HD]“, “from”=>{“name”=>”Yeyeng Espiritu”, “id”=>”100000679937927″}, “application”=>{“name”=>”Links”, “id”=>”2309869772″}, “icon”=>”http://static.ak.fbcdn.net/rsrc.php/yD/r/aS8ecmYRys0.gif”, “id”=>”100000679937927_175007109186972″, “created_time”=>”2010-12-20T08:28:52+0000″, “type”=>”video”, “updated_time”=>”2010-12-20T08:28:52+0000″, “description”=>”Pacman Going Global .”, “link”=>”http://www.facebook.com/video/video.php?v=247590965601&comments”, “source”=>”http://video.ak.fbcdn.net/video-ak-sf2p/v6812/145/0/247590965601_14126.mp4?h=855c4a747638f225068a4c02d91e29aa&r=2060&__gda__=1293006640_a92b81d80f0e4463e8272d2eaa4c075f”, “properties”=>[{"name"=>"Length", "text"=>"4:13"}], “picture”=>”http://vthumb.ak.fbcdn.net/vthumb-ak-ash1/v2673/48/57/582600601/t582600601_247590965601_1820.jpg“}]

You can test this on

https://graph.facebook.com/search?q=watermelon&type=post

Step 3:To publish your post

FGraph.publish('arjun/feed', :message => 'Hello, Arjun. I like this n  ew API.',
    :access_token => '...')
  FGraph.publish_feed('arjun', :message => '...', :access_token => '...  ')
  FGraph.publish_feed('me', :message => '...', :access_token => '...')

For more options , please check on github