Rails 4 / JS / HTML Unable to add a drop down menu so it creates a filter for a html table

Question

Trying to figure out how to add a dropdown menu so it creates a filter for my html table which features listings of products. Using my non existant Javascript skills & google i have come across this piece of interesting code

http://www.bclittleleague.bc.ca/Baseball/Javascript/TableFilter_EN/examples_EN.htm#tbl2 (table2)

<script language="javascript" type="text/javascript">
//<![CDATA[ 
    var table2_Props =  {                   
                    col_0: "select",
                    col_5: "none",
                    display_all_text: " [ Show all ] ",
                    sort_select: true
                };
    setFilterGrid( "table2",table2_Props );
//]]>
</script>

I have added this to my listing.js.coffee file

//<![CDATA[ 
    var table2_Props =  {                   
                    col_0: "select",
                    col_5: "none",
                    display_all_text: " [ Show all ] ",
                    sort_select: true
                };
    setFilterGrid( "table2",table2_Props );
//]]>

listings.html.erb

<h1>Listing listings</h1>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Price</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @listings.each do |listing| %>
      <tr>
        <td><%= listing.name %></td>
        <td><%= listing.description %></td>
        <td><%= listing.price %></td>
        <td><%= link_to 'Show', listing %></td>
        <td><%= link_to 'Edit', edit_listing_path(listing) %></td>
        <td><%= link_to 'Destroy', listing, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Listing', new_listing_path %>

but when i compile i get ExecJS::RuntimeError in Listings#index. SyntaxError: [stdin]:2:2: reserved word "var" in Desktop/Rails/fooddemo/app/assets/javascripts/listings.js.coffee)

Fooddemo <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <-error <%= csrf_meta_tags %>

listing.js.coffee should contain CoffeeScript, not JavaScript. listing.js OTOH would contain JavaScript. — mu is too short
ok thanks do you think this would be better if i used jQuery/datatables gem? — Neil

Richbits Richbits · Accepted Answer · 2014-07-23T09:24:04

mu is correct the issue is within the listing.js.coffee file. var causes this error after coffeescript.

There are two ways to resolve:

1) convert your code to coffeescript. There is a useful converter at http://js2coffee.org/ which gives the following:

table2_Props =
  col_0: "select"
  col_5: "none"
  display_all_text: " [ Show all ] "
  sort_select: true

setFilterGrid "table2", table2_Props

If you paste that in, you need to be careful that all spacing is maintained correctly.

2) change the file name to listing.js and it will treat the code as plain javascript.

Rails 4 / JS / HTML Unable to add a drop down menu so it creates a filter for a html table

1 Answers