Skip to main content

How to create a yahoo datatable in rails

To create a Yahoo Ajax Datatable (with local datasource) from a rails view, I had to do the following. First I had to add this helper method to the Application controller:

module ApplicationHelper

  #Outputs the javascript code necesary to create a yahoo datable 
  # from a plain datasource
  # column_array: and array of 2-item arrays in the form: 
  #               ["name_wihout_spaces", "Text to show in the column header"]
  # data_rows: an array or rows. Each row is an array that has the values in the 
  #            order specified in the column_array.
  def to_yahoo_array_data_source(column_array, data_rows, custom_div_id = "myContainer", 
custom_col_var_name = "data_cols",
      custom_datasource_var_name = "data_source")
   
    column_items = []
    column_array.each do |column|
      column_items << "{key:\"#{column[0]}\", label:\"#{column[1]}\", sortable:true}"
    end
    column_code = "var #{custom_col_var_name} = [#{column_items.join(',')}];"


    data_items = []
    data_rows.each do |row|
      data_for_row = []
      for col_idx in 0...column_array.size
        row[col_idx] = "\"#{escape_javascript(row[col_idx])}\"" unless row[col_idx].is_a?(Fixnum)
        data_for_row << "#{column_array[col_idx][0]}: #{row[col_idx]}"
      end
      data_items << "{#{data_for_row.join(',')}}"
    end
    record_set_code = "var #{custom_datasource_var_name} = new YAHOO.util.LocalDataSource([#{data_items.join(',')}]);"
    #    {key:"no", label:"No.", sortable:true},
    #    {key:"lname", label:"Last Name", sortable:true},
    #    {key:"age", label:"Age", sortable:true}
    #];
    return "#{column_code}\n #{record_set_code}\nvar myDataTable = new YAHOO.widget.DataTable(\"#{custom_div_id}\", #{custom_col_var_name}, #{custom_datasource_var_name});"
  end
end

Next I added the required javascript libraries to the application layout:

<html>

<head>
 <title>Email Detentions</title>

 <%= javascript_include_tag 'prototype' %>
 <!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>

<!-- OPTIONAL: JSON Utility (for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>

<!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

<!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js"></script>

<!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>

<!-- OPTIONAL: Calendar (enables calendar editors) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>

<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>

</head>
<body class="yui-skin-sam">

<%= @content_for_layout %>
</body>
</html>

And then I had to call the helper method from my view. This is an example (which by the way, it also shows how to implement the "click all" check box that select all check boxes when clicked):

<h1>Email Demerit Detention letters</h1>
<% form_tag({:controller => 'deans', :action => 'send_detention_demerits_letter'}, :id => 'students_selection') do -%>
  <br/>Please enter the detention date as it will appear in the email: <%= text_field(:email, :detention_date, :value => Time.now.next_week(day = :thursday).to_date.to_formatted_s(:long_ordinal) ) %>
  <%= hidden_field(:email, :beg_date, :value => @beg_date) %>

  <br/> Mark the checkbox of the students that should receive an email:
  <br/>
  <input id="check_all" name="check_all" type="checkbox" 
onclick="Form.getInputs('students_selection', 
'checkbox').each(function(box){box.checked = $('check_all').checked})" />
  Select All Students
  <br/>
  <div id="myContainer"></div>

  <%= submit_tag "Send emails"  %> <strong>(don't click twice, it may take some time to send all emails)</strong>

<% end -%>

<!-- Create the table -->
<script type="text/javascript">

<% column_array = [['no', "No."],['Name', "Name"],['Total_Demerits', "Total Demerits"],
  ['Credits', "Credits"],
  ['Balance', "Balance"]]; data_rows = []; std_idx = 1 %>
<% for student in @students_needing_detention %>

  <% std_name = student.Students_LastName + ", " + student.Students_FirstName %>
  <% data_rows << ["#{std_idx.to_s.rjust(3)} #{check_box_tag("students[#{std_idx}]", 
student.Students_StudentID, false)}" , std_name, 
student.tot_dems.to_s.rjust(5), student.tot_creds.to_s.rjust(5), student.diff.to_s.rjust(5)] %>
  <% std_idx = std_idx + 1 %>

<% end %>
<%= to_yahoo_array_data_source(column_array, data_rows) %>

</script>

Comments

Post a Comment

Popular posts from this blog

Powershell script for converting JPG to TIFF

The following Powershell script will convert a batch of JPEG files to TIFF format: #This Code is released under MIT license [System.Reflection.Assembly]::LoadWithPartialName("System.Drawing") $files_folder = 'C:\path-where-your-jpg-files-are\' $pdfs = get-childitem $files_folder -recurse | where {$_.Extension -match "jpg"} foreach($pdf in $pdfs) { $picture = [System.Drawing.Bitmap]::FromFile( $pdf.FullName ) $tiff = $pdf.FullName.replace('.PDF','').replace('.pdf','').replace('.jpg','').replace('.JPG','') + '.tiff' $picture.Save($tiff) }
Post a Comment
Read more

Power Automate: SFTP action "Test connection failed"

When I added an SFTP create file action to my Power Automate flow ( https://flow.microsoft.com ) , I got the following error in the action step, within the designer: "Test connection failed" To troubleshoot the Power Automate connection, I had to: go the Power Automate portal then "Data"->"Connections"  the sftp connection was there, I clicked on the ellipsis, and entered the connection info It turns out, that screen provides more details about the connection error. In my case, it was complaining that "SSH host key finger-print xxx format is not supported. It must be in 'MD5' format". I had provided the sha fingerprint that WinScp shows. Instead, I needed to use the MD5 version of the fingerprint. To get that, I had to run in command line (I was in a folder that had openssh in it): ssh -o FingerprintHash=md5 mysftpsite.com To get the fingerprint in MD5 format. I took the string (without the "MD5:" part of the string) and put
Post a Comment
Read more

Alert if file missing using Powershell

The following Powershell script can be used to send an email alert when a file is missing from a folder or it is the same file from a previous check: $path_mask = "yourfile_*.txt" $previous_file_store = "lastfileread.txt" $script_name = "File Check" ###### Functions ########## Function EMailLog($subject, $message) {    $emailTo = "juanito@yourserver.com"    $emailFrom = "alert@yourserver.com"    $smtpserver="smtp.yourserver.com"       $smtp=new-object Net.Mail.SmtpClient($smtpServer)    $smtp.Send($emailFrom, $emailTo, $subject, $message) } Try {    #get files that match the mask    $curr_file = dir $path_mask |  select name    if ($curr_file.count -gt 0)    {        #file found        #check if the file is different from the previous file read        $previous_file = Get-Content $previous_file_store        $curr_file_name = $curr_file.Item(0).Name        if ($
Post a Comment
Read more