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

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

How to create online multiplayer HTML5 games in Contruct2

  Construct2 can use websockets to send and receive messages between games. By using socket-io , we can use a Node.js script as the server and my modification to the socket-io plugin for Construct2 to allow the games to synchronize data between them in real-time. There are two parts to this design: the Node.js server and the Construct2 clients (the games playing). The main part of building an online multiplayer HTML5 game is to plan: how the clients will communicate how often and what to communicate how much of the logic will go into the server and how much to the client. In my sample game, I chose to have each client own a player and have the server just relay messages: Use string messages in the form TypeOfMessage, Parameter1, Paremeter2, Parater3, etc to communicate. Have the clients send their player position about 16 times a second. Whenever their player shoots, the client needs to send a message immediately. Almost all of the game logic will...
9 comments
Read more

How to use Windows SSO with OpenXava

One of the nice things about the .NET web environment is the dead easy way to implement Single Sign On in your web apps through Active Directory authentication. In the Java world there are multiple alternatives to use Windows’ Single Sign On with Java based web apps. One of those alternatives is Waffle . Waffle allows your Java web app to authenticate against Active Directory groups (and users). The only caveat is that your web server needs to be running in Windows, which kind of makes sense. In this article, you will learn the steps required to have your OpenXava web application use Waffle to authenticate your Windows users. The first step is to download Waffle from their site and then copy the JAR files outlined in https://github.com/dblock/waffle/blob/master/Docs/tomcat/TomcatSingleSignOnValve.md to the OpenXava’s tomcat server. In your OpenXava project, create servlets.xml in the Web-inf, containing the following: <!-- the role name (the domain gorup) must be e...
Post a Comment
Read more