CODEWITHSUNDEEP
jqueryruby-on-railsrubyruby-on-rails-3for-loop
Faiq Adam
Faiq Adam

Reputation: 107

Rails loop failing in javascript

I create Simple deal site. When in index.html.erb loop working only first loop. But it work on show.html.erb

<h1>Listing Deal</h1><% @projs.each do |proj| %>

<%= proj.title %><br />

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div id="countdown" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

<script type="text/javascript">
  $(document).ready(function(){
    $('#countdown').countdown({
      "until" : new Date(<%= date_for_jquery_countdown(proj.end_date) %>)
    });

  })
</script><% end %>


Projs_helper.rb**

    def date_for_jquery_countdown(date)
    year = date.strftime('%Y')
    month = date.strftime('%-m')
    day = date.strftime('%d')

    "#{year}, #{month}-1, #{day}"

end

application.js

//= require jquery.plugin
//= require jquery.countdown

My browser display index.html.erb only showing first is working, but others not display countdown

enter image description here

Upvotes: 0

Views: 797

Answers (2)

Buzinas
Buzinas

Reputation: 11725

You cannot have the same id for more than one element in HTML.

You're creating lots of elements with the same id, and only the first one will work.

Use a CSS class instead:

 <div class="countdown"

...

 $('.countdown').countdown(

EDIT:

However, you need to set one different value for each iteration, so I would use an ID, but with a counter, for example:

<!-- declare a counter here -->
<h1>Listing Deal</h1><% @projs.each do |proj| %>

<%= proj.title %><br />

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div id="countdown_<$= counter %>" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

<script type="text/javascript">
  $(document).ready(function(){
    $('#countdown_<$= counter %>').countdown({
      "until" : new Date(<%= date_for_jquery_countdown(proj.end_date) %>)
    });

  })
</script>
<!-- assign your counter = counter + 1 here -->
<% end %>

Sorry, but I don't know ruby, so I did the comments you would need to change!

Upvotes: 1

usha
usha

Reputation: 29349

Its not a good practice to have more than one element in a page with the same html id. In your case, all your countdown elements have the same id(#countdown) Change it to a class(And probably move the width:40% to the css file under countdown)

<% if Time.now < proj.end_date %>
  <h3>Days Left:</h3> <div class="countdown" style="width:40%"> <%= distance_of_time_in_words(Time.now, proj.end_date)  %> </div>
<% else %>
  <h3> The Project period has passed! </h3>
<% end  %>

And in your Javascript, use the class

<script type="text/javascript">
  $(document).ready(function(){
    $('.countdown').countdown({
      "until" : new Date($(this).text())
    });

  })
</script>

Also move the javascript block out of the loop

Upvotes: 1

Related Questions