Friday, December 31, 2010

Rails Calendar date select without Image


calendar_date_select plugin uses the following tag,

<%= calendar_date_select_tag "start_date",, :size => 15 %>

The above tag gives a text box and an Image. Which i really don't need.

I have called the onclick function which was written in the image onclick with text box as follows,

<input type="text" name="start_date" onclick="new CalendarDateSelect( this, {year_range:10} );" />

Date Select work fine now with image.

Monday, December 27, 2010

MiniMagick - undefined method `output'

I have got error like this in attachment fu while uploading image and creating thumbnail,

NoMethodError (undefined method `output' for #<MiniMagick::CommandBuilder:0xb14dde4>):

I changed my Minimagick gem version to 1.2.5 and things worked fine..

Thursday, December 9, 2010

jQuery UI datepicker in Rails

I have spent lot of time in making this. The problem was there was conflict in the prototype & Jquery. This is how i did it,

Step 1:

Download jquery.ui.datepicker.js from jquery UI and add it in Javascripts folder.

Step 2 :

Add these in Layout,

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.datepicker.js"></script>
jQuery(function() {

Note: instead of $(function) i have used jQuery(function)

Step 3 :

Then the View file, use,
<%= text_field_tag "datepicker" %>

Note :

If you get this error, "jquery ui $(input).zIndex is not a function"

1. Go to the datepicker JS & comment out the line where you get the error.
2. Add .ui-datepicker {z-index: 3000;} in ur stylesheet

Wednesday, December 8, 2010

Design your Site with Jquery UI

Jquery UI themeroller gives various themes and also we can customize and download.

It also gives various options like Datepicker, Accordian, Autocomplete etc.

Just select your theme, customize if you want & click Download Theme. Things will be in your hand.

Will Paginate Ajax pagination

I have gone through many articles on how to use Ajax pagination with will_paginate.

Here is how i did & it worked for me,

Step 1 :
Create a helper called remote_link_renderer.rb and use the following code,

class RemoteLinkRenderer < WillPaginate::LinkRenderer
def prepare(collection, options, template)
@remote = options.delete(:remote) || {}

def page_link(page, text, attributes = {})
@template.link_to_remote(text, {:url => url_for(page), :method => :get}.merge(@remote), attributes)

Step 2:
Make the view file table in a partial(_units.html.erb),

<div id="units">
<%= render :partial => "units" %>

Step 3 :

And in the partial _units.html.erb add will paginate code,
<%= will_paginate @units, :renderer => 'RemoteLinkRenderer' , :remote => { :update => 'units'} %>

Step 4 :

In the controller use:

respond_to do |format|
format.js { render :partial => 'units' }
format.html { }

Now Pagination works without refreshing the page.

Will paginate pagination style

Pagination using will paginate comes with div class "pagination"

Copy & paste the below code in css file, to make the pagination look a better.

.pagination {
.pagination a, .pagination span {
padding:0.2em 0.5em;
.pagination span.disabled {
.pagination span.current {
.pagination a {
border:1px solid #DDDDDD;
.pagination a:hover, .pagination a:focus {
background:#0063DC none repeat scroll 0 0;
.pagination .page_info {
.pagination .prev_page, .pagination .next_page {

Tuesday, December 7, 2010

Send Ajax request after Auto Complete text box - after_update_element

Continuation for my previous post about Auto complete plugin

I have used after_update_element to send the value that is selected in the Auto complete

<%= text_field_with_auto_complete 'phonenumber', 'to',{:size=>25, :class=> "text ui-widget-content ui-corner-all", :value=>@service_order.phonenumber}, {:skip_style => false, :after_update_element=> "function(element,value){new Ajax.Request('/controller/action', {asynchronous:true, evalScripts:true, method:'get', parameters:'number=' + $('phonenumber_to').value }); return false;
}"} %>