CODEWITHSUNDEEP
jqueryruby-on-railserb
Dan Rubio
Dan Rubio

Reputation: 4907

How to add jQuery to an erb file using Foundation?

Thanks to some research and a little help from stack overflow I am very close to getting a desired effect in my rails app. I have an annoying bug and I don't understand what is causing this. Below I have a .each method that renders a task from my _task.html.erb file created by my rails app. I'm trying to get the different tasks to be color coded depending on their set priority levels but I just can't get to the last step. Thanks to craig.kaminsky, he saved me a lot of heartache from trying to use AJAX to initially do this. However, the jQuery isn't working but it should.

As shown below I have the script tags in place with the correct reference to text/javascript. Because of the asset pipeline, this jQuery should work and yet it doesn't. I don't know what gives.

<% @tasks.each do |task| %>
  <% if task.importance == "Low" %>
    <script type="text/javascript">
      $("td").addClass("green");
    </script>
  <% elsif task.importance == "Medium" %>
    <script type="text/javascript">
      $("td").addClass("orange");
    </script>
  <% elsif task.importance == "High" %>
    <script type="text/javascript">
      $("td").addClass("red");
    </script>
  <% end %>
  <tr>
    <td><%= task.name %></td>
    <td><%= task.description %></td>
    <td><%= task.start %></td>
    <td><%= task.finish %></td>
    <td><%=  task.importance  %></td>
    <td><%= link_to 'Edit', edit_task_path(task) %></td>
    <td><%= link_to 'Remove', task_path(task), method: :delete, data: { confirm: 'Are  
          you sure you would like to Delete? Did you complete the task?' } %></td>
 </tr>
<% end %>

Is their a dumb typo that I'm missing? Lastly, the error I am receiving is:

Uncaught ReferenceError: $ is not defined

-----------------EDIT---------------------

This is my application.js file

   // This is a manifest file that'll be compiled into application.js, which will 
       include all the files listed below.

   // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, 
      vendor/assets/javascripts,
   // or vendor/assets/javascripts of plugins, if any, can be referenced here using a 
      relative path.
   // It's not advisable to add code directly here, but if you do, it'll appear at the 
      bottom of the compiled file.
   // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets- 
      directives) for details
  // about supported directives.

  //= require jquery
  //= require jquery_ujs
  //= require foundation
  //= require_tree .



  $(function(){ $(document).foundation(); });

Upvotes: 0

Views: 674

Answers (1)

Subtletree
Subtletree

Reputation: 3329

You could use a rails helper method to insert the class server side instead of jquery.

E.g

tasks_helper.rb

  def get_importance_class(importance)
    case importance
      when 'low'
        "green"
      when 'medium'
        "orange"
      when 'high'
        "red"
      else
        ""
    end
  end

Then in your view you could do:

<% @tasks.each do |task| %>
  <% importance_class = get_importance_class(task.importance) %>

  <tr>
    <td class="<%= importance_class %>"><%= task.name %></td>
    <td class="<%= importance_class %>"><%= task.description %></td>
    <td class="<%= importance_class %>"><%= task.start %></td>
    <td class="<%= importance_class %>"><%= task.finish %></td>
    <td class="<%= importance_class %>"><%=  task.importance  %></td>
    <td class="<%= importance_class %>"><%= link_to 'Edit', edit_task_path(task) %></td>
    <td class="<%= importance_class %>"><%= link_to 'Remove', task_path(task), method: :delete, data: { confirm: 'Are  
          you sure you would like to Delete? Did you complete the task?' } %></td>
 </tr>
<% end %>

If you are adding that class to each cell( td ) then you might want to apply it to the row instead

Upvotes: 1

Related Questions