CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3
JohnGalt
JohnGalt

Reputation: 2881

Rails communicating with jquery through erb

I'm querying Rails for whether a record exists through a has many through relationship in erb:

<% if @hack.serials %>

Ultimately if a 'serial' does not exist within the '@hack' I want to add 'display: none' to a div's class through jquery.

Is there a pattern for communicating between rails and jquery through erb in this way?

Edit

The idea here is that if there's no data, than the I don't want the tabs and its content to show up. And until the 'hack' is edited and the page is reloaded the div "chart-table" will not have data, so will not need to become visible.

<div class = "chart-table" 
  <% if @hack.serials %>
    <%= raw 'style="display:block"' %>
  <% end %>>
<!-- TABS -->
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Chart</a></li>
    <li><a href="#tabs-2">Last 5 Table</a></li>
  </ul>
<!-- CHART -->
<div id="tabs-1">
  <div id="container" style="height: 500px; min-width: 500px"></div>
</div>
<!-- TABLE -->
<div id="tabs-2">
  <table class = "table-condensed">
    <%= @hack.id %>
    <% @hack.serials.each do |s| %>  
    <tr>
       <th>Series Title</th>
        <th>Series Name</th>
        <th>Series Id</th>
      <% s.observations.sort{|a,b| a.id <=> b.id}.last(5).each do |o| %>
        <th><%= o.date %></th>
      <% end %>
    </tr>    
    <tr>
      <td><%= link_to s.title, [@hack, s] %></td>
      <td><%= s.series_name %></td>
      <td><%= s.id %></td>
    <% s.observations.sort{|a,b| a.id <=> b.id}.last(5).each do |o| %>
      <% if s.units_short == 'Mil. of $' %>
        <td><%= number_to_currency(convertMtoBHack(o.value), :precision => 0) %></td>
        <% else %>
          <td><%= number_to_currency(o.value, :precision => 0) %></td>
        <% end %>
      <% end %>
    </tr>
    <tr>
      <td><%= s.frequency_short %></td>
      <td><%= s.units_short %></td>
    </tr>
    <% end %>
  </table>
</div>

Upvotes: 0

Views: 115

Answers (4)

JohnGalt
JohnGalt

Reputation: 2881

The good folks over at Rails Hotline helped me to the answer.

<% if @hack.serials.present? %>
  <div class = "chart-table">
    <!-- TABS -->
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Chart</a></li>
        <li><a href="#tabs-2">Last 5 Table</a></li>
      </ul>
    </div>
  </div>
<% end %>

If "empty" @hack.serials returns an empty array but returns true. Using @hack.serials.present? returns false if it's an empty array which is the behavior I was looking for.

Upvotes: 0

tagCincy
tagCincy

Reputation: 1599

Will this div be displayed later after some ajax class (prior the DOM reloading)? If not, I would question whether you should even write it.

I would be wary of Mark Hollands answer because, although it works, it could present problems if you have any future UI changes on that element. If you need to write the element, I would stick to a straight conditional with and put the "static" code in a partial: 

<% if @hack.serials %>
  <div>
    <%= render 'something' %>
  </div>
<% else %>
  <div style='display:none'>
    <%= render 'something' %>
  </div>
<% end %>

Upvotes: 0

Mark Holland
Mark Holland

Reputation: 846

I'm not sure why you feel the need to do this via jQuery.

Why not write the div's style attribute directly?

<div <%= @hack.serials ? 'style="display:none"' : '' %>>

Upvotes: 2

Raindal
Raindal

Reputation: 3237

Something like:

<script>
    <% unless @hack.serials.map(&:name).include? "My Serial" %>
        $('#my_serial_id').css('display', 'none');
    <% end %>
</script>

If you are looking for the serial which name is "My Serial" and do not find it, then stop displaying the corresponding div.

Rails code is executed on the server side and then rendered to the client which executes the javascript. So you can pass anything you want from Rails to javascript.

FIY passing javascript to Rails would require other tricks and magic stuff (like ajax for instance).

Upvotes: 1

Related Questions