DataTables : Customizing navigation button

var $workflowTable = $('.workflow-table');
  $workflowTable.dataTable(
    {
      'iDisplayLength': 10,
      'fnDrawCallback': function (oSettings) {
        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
          $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        }
        var curPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
        var lastPage = Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength );

        if (curPage === 1){
          $(oSettings.nTableWrapper).find('.paginate_disabled_previous').hide();
        }else{
          $(oSettings.nTableWrapper).find('.paginate_enabled_previous').show();
        }
        if(curPage === lastPage){
          $(oSettings.nTableWrapper).find('.paginate_disabled_next').hide();
        }else{
          $(oSettings.nTableWrapper).find('.paginate_enabled_next').show();
        }
      }
    }
  );
Advertisements

jQuery Plugin : Full Calender Plugin : Delete button on Hover in Events

// iN 'eventAfterAllRender' Callback of full calender
,
eventAfterAllRender: function(view){
  addDeleteButtonOnEvents();
  customizeEventForPupup();
},
function addDeleteButtonOnEvents() {
  var $fcEvent = $(document).find('.fc-event');
  $fcEvent.each(function () {
    var $fcEvent = $(this);
    var splittedHREF = $fcEvent.attr('href').split('/');

    // GET SECOND LAST ITEM FROM ARRAY
    var eventId = splittedHREF.slice(-2, -1)[0];

    $(this).find('.fc-event-inner').append(
    '<div id="fc-event-delete-button-' + eventId + '" title="Delete" rel="tooltip" class="fc-event-delete-button"></div>'
    );
  });

  // Assign fancy tooltip to delete button recently added to the  DOM
  $(document).find('.fc-event-delete-button').tooltip();
}
.fc-event{
  &:hover .fc-event-delete-button{
      display: block;
  }
  .fc-event-delete-button{
    display: none;
    background: url(asset-path('icon-delete1.png')) no-repeat 0 0;
    width: 14px;
    height: 17px;
    margin: 0 0 0 10px;
    position: absolute;
    right: 8px;
    top: 2px;
  }
  .fc-event-time {
    display: none;
  }

  .fc-event-title{
    text-align: center;
  }
}

Install gem ‘Rake ‘ in windows

The reason is old rubygems. So we need to remove ssl source to be able to update gem --system which includes rubygems and so on. after this we can feel free to get back to ssl source.
gem sources -r https://rubygems.org/ - to temporarily remove secure connection
gem sources -a http://rubygems.org/ - add insecure connection
gem update --system - now we're able to update rubygems without SSL
after updating rubygems do vice versa
gem sources -r http://rubygems.org/ - to remove insecure connection
gem sources -a https://rubygems.org/ - add secure connection
Now you're able to update gems using secure connection.
gem update

Difference between Ruby’s Load, Include, Require and Extend

When you Include a module into your class as shown below, it’s as if you took the code defined within the module and inserted it within the class, where you ‘include’ it. It allows the ‘mixin’ behavior. It’s used to DRY up your code to avoid duplication, for instance, if there were multiple classes that would need the same code within the module.

The following assumes that the module Log and class TestClass are defined in the same .rb file. If they were in separate files, then ‘load’ or ‘require’ must be used to let the class know about the module you’ve defined.

module Log
  def class_type
    "This class is of type: #{self.class}"
  end
end
class TestClass
  include Log
  # ...
end
tc = TestClass.new.class_type
puts tc

The above will print “This class is of type: TestClass”

The load method is almost like the require method except it doesn’t keep track of whether or not that library has been loaded. So it’s possible to load a library multiple times and also when using the load method you must specify the “.rb” extension of the library file name.

Most of the time, you’ll want to use require instead of load but load is there if you want a library to be loaded each time load is called. For example, if your module changes its state frequently, you may want to use load to pick up those changes within classes loaded from.

Here’s an example of how to use load. Place the load method at the very top of your “.rb” file. Also the load method takes a path to the file as an argument:

load 'test_library.rb'

So for example, if the module is defined in a separate .rb file than it’s used, then you can use the

File: log.rb

module Log
  def class_type
    "This class is of type: #{self.class}"
  end
end

File: test.rb

load 'log.rb'
class TestClass
  include Log
  # ...
end

The require method allows you to load a library and prevents it from being loaded more than once. The require method will return ‘false’ if you try to load the same library after the first time. The require method only needs to be used if library you are loading is defined in a separate file, which is usually the case.

So it keeps track of whether that library was already loaded or not. You also don’t need to specify the “.rb” extension of the library file name.

Here’s an example of how to use require. Place the require method at the very top of your “.rb” file:

require 'test_library'

When using the extend method instead of include, you are adding the module’s methods as class methods instead of as instance methods.

Here is an example of how to use the extend method:

module Log
  def class_type
    "This class is of type: #{self.class}"
  end
end
class TestClass
  extend Log
  # ...
end
tc = TestClass.class_type
puts tc

The above will print “This class is of type: TestClass”

When using extend instead of include within the class, if you try to instantiate TestClass and call method class_type on it, as you did in the Include example above, you’ll get a NoMethodError. So, again, the module’s methods become available as class methods.

has_and_belongs_to_many association: Rails

The has_and_belongs_to_many Association

A has_and_belongs_to_many association creates a direct many-to-many connection with another model, with no intervening model. For example, if your application includes assemblies and parts, with each assembly having many parts and each part appearing in many assemblies, you could declare the models this way:

class Assembly < ActiveRecord::Base
  has_and_belongs_to_many :parts
end
class Part < ActiveRecord::Base
  has_and_belongs_to_many :assemblies
end

has_and_belongs_to_many Association Diagram

The corresponding migration might look like this:

class CreateAssembliesAndParts < ActiveRecord::Migration
  def change
    create_table :assemblies do |t|
      t.string :name
      t.timestamps null: false
    end
    create_table :parts do |t|
      t.string :part_number
      t.timestamps null: false
    end
    create_table :assemblies_parts, id: false do |t|
      t.belongs_to :assembly, index: true
      t.belongs_to :part, index: true
    end
  end
end

Source : http://guides.rubyonrails.org/association_basics.html#the-has-many-through-association

Chart.JS : JQuery Canvas Chart plugin: ZoomOut and reDrawing (IMage resolution) issue

/**
 * Renders the charts in specified Divs
 * @param data
 * @param idOfCanvas
 */
function renderPie(data, idOfCanvas) {
    var $canvas = $('#' + idOfCanvas);
    var $parent = $canvas.parent(); 
    /** 
    *   Canvas needs to be removed and re-rendered before we draw the chart
    *   Reason: When Chart is rendered and Window is Zoomed Out, On hovering the chart produces
    *   glitch in the chart
    */
    $canvas.remove();
    $parent.prepend("<canvas width='" + WIDTH_OF_PIE + "' height='" + HEIGHT_OF_PIE + "' id='" + idOfCanvas + "'>");
    
    var ctx = $parent.find('#' + idOfCanvas).get(0).getContext("2d");
    var chart = new Chart(ctx).Pie(data, {
        maintainAspectRatio: true,
        responsive: false,
        // String - Template string for single tooltips
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%> <strong><%=segments[i].value%></strong><%}%></li><%}%></ul>"

    });
    var legend = chart.generateLegend();
    $('#' + idOfCanvas + '-legend').html(legend);
}

yes it works, I have tested
I my case, I have a ‘select’ with list of locations. With each location data reloads in pie.
Issue ( Only when window is Zoomed Out) : With each reload the width and height of the canvas decreased continuously. Ultimately after 4 to 5 reloads the pie almost vanishes.
Solution: Before every reload, delete the previous canvas so that the older canvas along with its values is deleted.

responsive:true is not the solution, irrespective of responsive:true the chart’s size goes on decreasing for -ve zoom and increases for +ve zoom : Condition: The Window’s zoom must not be 100%