CODEWITHSUNDEEP
jqueryasp.net-mvccountdown
Kamil
Kamil

Reputation: 149

ASP.MVC 3 and HTML.Partial and multiple Jquery countdown

I have problem to put several countdowns on page. I use HTML.Partial:

<span><strong id="time_h"></strong>godz. <strong id="time_m"></strong> min. <strong id="time_s"></strong>s.</span>

And I also have there:

<script type="text/javascript">

    $(document).ready(startTime);
    var datefrom = new Date();
    var dateto = new Date(@Model.EndDate.Year, @Model.EndDate.Month-1, @Model.EndDate.Day, @Model.EndDate.Hour, @Model.EndDate.Minute, @Model.EndDate.Second);
    var diff  = dateto.getTime() - datefrom.getTime(); </script>

And my countdown function looks like:

function startTime(){
diff = diff - 500;

if (diff <= 0)
{
    $("#time_on").hide();
    $("#time_off").show();
} else {


    $("#time_h").html(h);
    $("#time_m").html(checkTime(m));
    $("#time_s").html(checkTime(s));
}

t = setTimeout('startTime()',500);}

  function checkTime(i){
if (i<10)
  {
  i="0" + i;
  }
return i;}

Then I put Partial in foreach loop. Everything goes fine if there is only one row in collection. If there is more than 1 there is only first countdown counting. When I use class instead of id in span (time_h and so on) it displays the same time on each item. Is it good approach? What should I change?

Thanks Kamil

Upvotes: 0

Views: 969

Answers (3)

Kamil
Kamil

Reputation: 149

Ok. I have it. It was because the long time of converting from int to date. I do now diff = diff - 1000 and it shows properly.

Upvotes: 0

Kamil
Kamil

Reputation: 149

I try to use this one: Jquery multi-countdown .each() function

My Partial View looks:

<div class="" id="2345423234">
   <span class="remain"></span>
</div>  
<div class="" id="345454234">
   <span class="remain"></span>
</div>

And my countdown function:

 $(document).ready(function(){  
      $('div[id]').each(function () {
         var $this = $(this);
         var diff =  parseInt($this.attr("id"));
         var curDate = (new Date()).getMilliseconds();
         countdown = setInterval(function(){
          diff--;
            var   h = Math.floor(diff / 3600000);
            var    m = Math.floor((diff - (h * 3600000)) / 60000);
             var   s = Math.floor((diff - (h * 3600000) - (m * 60000)) / 1000);
             var goodDate =   h + ":" + m + ":" + s;

             $('.remain', $this).html(goodDate);     

         }, 1000);
      });  
    });

But nothing happens... It displays good datetime but doesn't countdown. When I put 

 $('.remain', $this).html(diff);

Countdown works fine...

Upvotes: 0

user896048
user896048

Reputation: 40

You have to change your selectors from #id to.class.

when you render your partial control in foreach loop the same id is rendered for each control and when you are trying to take dom object by #id , the only last item is affected.

Hope this help.

Upvotes: 1

Related Questions