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.
my blog is abt wht i have learnt technically, mostly in Ruby on Rails, Javascript, node.js hope this share a little bit of info & adds a bit stuff., Thanks.
Friday, December 31, 2010
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..
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
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.
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.
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;
}
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;
}"} %>
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;
}"} %>
Subscribe to:
Posts (Atom)