Adding callback to an inline editable input field with jEditable plugin of jQuery

In my previous post I talked about adding size and stylesheets to an inline editable field with jEditable.
I have this div:

<div >
  <div class="mouseover"> Title </div>
  <div class="help_text"> (Click on the Title to edit) </div>
</div >

I had to add some text next to this field which says "click to edit". When a user clicks on it , I wanted to add a callback function to this field, so that when I click on it title comes in input tag as inline editable and the text in next div (Clieck on the Title to edit) should go away. I found that you can use callback here just like in any ajax call.

Here is what I did:

$(".mouseover").editable('<custom url>', {
      indicator : '<custom image path>',
        onblur    : "submit",
        placeholder : "click here to edit",
        type      : "custom_input",
        callback  : function(data, settings){
          $(this).siblings(".help_text").text("(Click on the label to edit)");
        }
    });
(posting it ... so that someone else should not spend time in figuring out :)

Adding size to input field with jEditable plugin of jQuery

I am using jEditable a jQuery plug-in and is is really cool for inline editing. I stuck when I had to add size(say 50 characters) field and css  for an input field which is inline editable.

Then, I extended jeditable and added my own input type with size and class attributes:
In anything.js:
$(document).ready(function(){
    jQuery.editable.addInputType('custom_input', {
    element : function(settings, original) {
                    var input = $('<input size=50 class="input_inline"/>');
                    if (settings.width  != 'none') { input.attr('width', settings.width);  }
                    if (settings.height != 'none') { input.attr('height', settings.height); }
                    /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */
                    //input[0].setAttribute('autocomplete','off');
                    input.attr('autocomplete','off');
                    $(this).append(input);
                    return(input);
                }
    });
});

$(".mouseover").editable('<custom url>', {
      indicator : '<custom image path>',
        onblur    : "submit",
        placeholder : "click here to edit",
        type      : "custom_input"
    });
In any.html:
<div class="mouseover"></div>
so all div with mouseover class will become inline editable.

Give style to your MS Excel sheets in Ruby

I recently got a requirement to generate MS Excel workbook with different worksheets in Ruby on Rails. Also, I had to give style to the column headers, set background color for table of content and make columns justified.

I came across http://rubyonwindows.blogspot.com and spreadsheet links which are very helpful if you want to try anything with MS Excel in Ruby.

I installed spreadsheet gem (sudo gem install spreadsheet), but giving styles did not seem very straightforward

So, I thought of giving it a shot. Let's first try to create a workbook with three worksheets.

workbook = Spreadsheet::Workbook.new
worksheet_for_books = workbook.create_worksheet(:name => "Books")
worksheet_for_stationaries = workbook.create_worksheet(:name => "Stationary")
worksheet_for_laptops = workbook.create_worksheet(:name => "Laptops")

Now, set headers in all worksheets:
for worksheet in workbook.worksheets
  row = 0
  (0..2).each do |column|
    worksheet[row, column] = "Name_#{column}"
  end
end

In the above code snippet, you might have noted that:

• Iterating over worksheet is very simple, just like array.
• Setting value to a cell is very simple, just worksheet[row, column] = value

Now let's make the column headers bold and justified:
format_header = Spreadsheet::Format.new(:weight => :bold, :align => :justify)
for worksheet in workbook.worksheets
  (0..4).each do |column|
    worksheet.row(0).set_format(column, format_header)
  end
end


Now let's try to add background color 'yellow' to these headers:

format_header = Spreadsheet::Format.new(:weight => :bold, :align => :justify, :pattern_fg_color => :yellow)

for worksheet in workbook.worksheets

  (0..4).each do |column|

    worksheet.row(0).set_format(column, format_header)

  end

end

It didn't work! why? no it's not because we have added :pattern_fg_color , you might be thinking :pattern_bg_color is for background, but this is wrong, this is what I found in the references.

"Use :pattern_fg_color to set background of a cell"

Anyways, even this option didn't work for me. I couldn't understand why. But I found a work around(reference) and here is the enhanced version:

Create color_format class and put it in a library

class ColorFormat < Spreadsheet::Format

   def initialize(opts)

     super opts

   end

end

And our code will look like:

require "color_format"

format_header = ColorFormat.new(:weight => :bold, :align => :justify, :pattern_fg_color => :yellow, :pattern => 1)

for worksheet in workbook.worksheets

  (0..4).each do |column|

    worksheet.row(0).set_format(column, format_header)

  end

end

And that's it!