1

In Index view I have table where I'd like to populate ID dynamically. So far I tried this:

id="table_<%= @controller_name %>"

Method in controller:

def get_controller_name
  @controller_name = self.class.name.split("::").last
end

Then I want to access particular Table in my Coffeescript. I've done it like this:

$ ->
  myvar = '<%= raw @controller_name.to_json %>'
  myvarAsObj = JSON.parse(myvar)
  $('#' + 'table_' + myvarAsObj).DataTable

however it doesn't seem to be working. I see in Page Source I got Table ID like this: id="table_MyController"

How do I access my table ID in Coffeescript correctly, please? Thank you!

Update

Table in Index:

<table data-controller-name="<%= @controller_name %>" cellpadding="0" cellspacing="0" 
border="0" class="table table-striped table-bordered table-hover" width="100%" 
data-source="<%= campaign_campaigns_index_path(format: :json) %>">

Coffeescript:

$ ->
  $('table[data-controller-name]').each ->
    $(this).DataTable
    ajax: $('table[data-controller-name]').each ->
      $(this).data('source')

Page Source:

<table data-controller-name="CampaignsController" cellpadding="0" cellspacing="0" border="0"
  class="table table-striped table-bordered table-hover" width="100%"
  data-source="/en/campaigns.json">

1 Answer 1

4

It looks like the <%= raw ...%> in your coffeescript is interpreted literally. I've always had more success passing any data from Rails to Coffeescript through HTML data attributes, rather than trying to interpolate it. Using data-attributes also reduces coupling between the rails and javascript code.

You could do something like this:

ApplicationController.rb

def get_controller_name
  @controller_name = self.class.name.split("::").last
end

CampaignsController.rb

def index
  # Render your data as JSON. Example data from the DataTables site:
  render json: {
      data: [
        [
          "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"
        ],
        [
          "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300"
        ]
      ]
    }
end

home.coffee

$ ->
  $('table[data-controller-name]').each ->
    el = $(this)

    el.DataTable {
      ajax: el.data('source')
    }

index.html.erb

<table data-controller-name="<%= controller.get_controller_name %>"
       data-source="<%= campaign_campaigns_index_path(format: 'json') %>">
   <thead>
     <tr>
         <th>Column 1</th>
         <th>Column 2</th>
     </tr>
   </thead>
   <tbody>
       <tr>
           <td>Row 1 Data 1</td>
           <td>Row 1 Data 2</td>
       </tr>
       <tr>
           <td>Row 2 Data 1</td>
           <td>Row 2 Data 2</td>
       </tr>
   </tbody>
</table>

The coffeescript will act on any tables that have a data-controller-name attribute.


Update For completeness, you can parse ERB tags by appending .erb to the Coffeescript filename, e.g:

home.coffee.erb

$ ->
  $('#table_<%= @controller_name %>').DataTable {
    ajax: el.data('source')
  }

However, I still suggest the HTML data-attributes approach above for its flexibility and decoupling Coffee/Javascript from the Rails code.

6
  • Thank you! I'm trying your suggestion, however I get this error: NoMethodError ... private method get_controller_name called for Is it because my controller method is private?
    – matiss
    May 7, 2017 at 7:46
  • Could you, please, check my Update above? I added more code to have full picture of what I have at the moment after your suggestion. It still does not work properly, however maybe you notice some error I'm making.
    – matiss
    May 7, 2017 at 7:52
  • @matiss Are you getting any error messages logged in the Javascript console (View->Developer->Javascript Console on Chrome)? The get_controller_name method will need to be public (or pop it into ApplicationHelper) Also, you might need to escape the <%= campaign_campaigns_index_path(format: :json) %> Do you a couple of lines of example data you could post? May 7, 2017 at 8:26
  • @matiss Took another look and have updated my answer accordingly. The coffeescript just needed a bit of tweaking. I've used sample data from the DataTables documentation. Let me know if this works for you. May 7, 2017 at 10:35
  • Thank you! I just found out I probably don't need dynamic table ID in my view. I'm trying to implement Datatables StateSave server side from this tutorial I have created table where in "name" column I would save table name. I found out I can just pass Controller name there and then search back "state" value reading Controller name. Basically I should be doing all that in controller side, not in my View.
    – matiss
    May 7, 2017 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.