Friday, December 31, 2010

Rails Calendar date select without Image

Hi.

calendar_date_select plugin uses the following tag,

<%= calendar_date_select_tag "start_date", Time.now, :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>
<script>
jQuery(function() {
jQuery("#datepicker").datepicker();
});
</script>

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.

http://jqueryui.com/themeroller/

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) || {}
super
end

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

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

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

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 { }
end

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 {
padding:0.3em;
text-align:right;
}
.pagination a, .pagination span {
padding:0.2em 0.5em;
}
.pagination span.disabled {
color:#AAAAAA;
}
.pagination span.current {
color:#8FBF5D;
font-weight:bold;
}
.pagination a {
border:1px solid #DDDDDD;
color:#0063DC;
text-decoration:none;
}
.pagination a:hover, .pagination a:focus {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#0063DC none repeat scroll 0 0;
border-color:#003366;
color:white;
}
.pagination .page_info {
color:#AAAAAA;
padding-top:0.8em;
}
.pagination .prev_page, .pagination .next_page {
border-width:1px;
}

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;
}"} %>