Posts

Showing posts from December, 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.

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..

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

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 =...

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

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