Rails loop failing in javascript

Question

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

My model def end_date self.start_date + self.funding_period.days end — Faiq Adam
– Faiq Adam, Commented Mar 28, 2014 at 2:57

Buzinas · Accepted Answer · 2014-03-28 02:59:25Z

1

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!

edited Mar 28, 2014 at 2:59

answered Mar 28, 2014 at 2:48

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Buzinas Over a year ago

btw, as you need a different value for each element in your iteration, you need to use a counter or something like that.

usha · Accepted Answer · 2014-03-28 02:55:07Z

1

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

edited Mar 28, 2014 at 2:55

answered Mar 28, 2014 at 2:49

usha

29.4k5 gold badges75 silver badges94 bronze badges

3 Comments

sevenseacat Over a year ago

however, this isn't going to set the right countdown date for each project - it's going to set all of them to the date for the last project.

usha Over a year ago

@FaiqAdam: Modified my answer. Move the javascript block out of the loop

Faiq Adam Over a year ago

i added class="countdown-<%= proj.id %> thank @Vimsha

Collectives™ on Stack Overflow

Rails loop failing in javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related