.net asp mvc Jquery sahayamu

[bevarse]

Requirement: 

oka table lo id, date and countdown columns vuntayi. Using Jquery I should calculate the time left and display it as a timer in the countdown column. 

so far nenu checina code ikkada paste chesa, you can add it to any new view in mvc project. 

 

Problem: 

anni rows lo countdown value set avvadam ledu

first row lo avutundi but wrong value set avutundi

 

nenu yekkada tappu chestunna bhayya ?

 

 

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#tblOne').find("td.timer").each(function () {

            var myData = $(this).text();
            // Set the date we're counting down to
            var countDownDate = new Date(myData).getTime();
            // Update the count down every 1 second
            var x = setInterval(function () {

                // Get todays date and time
                var now = new Date().getTime();

                // Find the distance between now an the count down date
                var distance = countDownDate - now;

                if (distance < 0) {
                    $('#lblTimer').text("EXPIRED");
                }
                else {
                    // Time calculations for days, hours, minutes and seconds
                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                    // Display the result in the element with id="status"

                    $('#status').text( days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
                }
            }, 1000);
        });
    });
</script>
<div class="form-group"></div>
<div>
    <table class="table table-bordered table-striped" id="tblOne">
        <tr>
            <th>ID</th>
            <th>DOB</th>
            <th>Countdown</th>
        </tr>
        <tr>
            <td>1</td>
            <td class="timer">@DateTime.Now.AddHours(1)</td>
            <td id="status"></td>
        </tr>
        <tr>
            <th>ID</th>
            <th>DOB</th>
            <th>Countdown</th>
        </tr>
        <tr>
            <td>2</td>
            <td class="timer">@DateTime.Now.AddHours(2)</td>
            <td id="status"></td>
        </tr>
        <tr>
            <th>ID</th>
            <th>DOB</th>
            <th>Countdown</th>
        </tr>
        <tr>
            <td>3</td>
            <td class="timer">@DateTime.Now.AddHours(3)</td>
            <td id="status"></td>
        </tr>
        <tr>
            <th>ID</th>
            <th>DOB</th>
            <th>Countdown</th>
        </tr>
        <tr>
            <td>4</td>
            <td class="timer">@DateTime.Now.AddHours(4)</td>
            <td id="status"></td>
        </tr>
    </table>
</div>

[bevarse]

Timer code copied from https://www.w3schools.com/howto/howto_js_countdown.asp

[Suhaas]

First row lo wrong value set avuthundi annav kada, 

Can you post what value is being set?  Expected value and akkada vasthunna value rendu post cheyyu once for an instance. 

[Suhaas]

Can you JsFiddle your existing code?

[bevarse]

2 minutes ago, Suhaas said:

Can you JsFiddle your existing code?

Js fiddle lo yeppudu pettaledu bhayya will try now

[bevarse]

jsfiddle url: 

http://jsfiddle.net/hpxrt9tb/

Expected value for row 1 column Countdown: 0d 0h 59m 39s

Returned: 0d 3h 59m 39s

 

[Suhaas]

 

13 minutes ago, bevarse said:

jsfiddle url: 

http://jsfiddle.net/hpxrt9tb/

Expected value for row 1 column Countdown: 0d 0h 59m 39s

Returned: 0d 3h 59m 39s

 

Ok. Let me take a look. 

[Pori]

LTT

[Novak_Djokovic]

Vuu...vuu...

[Biskot]

i tried.

put a

 alert("test");

after for foreach

 

  $('#tblOne').find('tr').find('td.timer').each(function () {
            alert("test")
            var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime();

            var x = setInterval(function () {                
                var now = new Date().getTime();                
                var distance = countDownDate - now;                
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                
                $('#status').text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

            }, 1000);

        })
        });

 

its going through loop but. setinterval function is called only once. find it why it is. ?

[Biskot]

i tried your code in my view,  var Countdown returning NanN sometimes , check it.

put a debuuger in Source in developer tool (f12) and see

 

[Biskot]

everything looks fine

[bevarse]

6 minutes ago, Biskot said:

i tried your code in my view,  var Countdown returning NanN sometimes , check it.

put a debuuger in Source in developer tool (f12) and see

 

 

5 minutes ago, Biskot said:

everything looks fine

naaku yeppudu NanN raaledu bhayya 

breakpoints petti chusa, ee kinda line lo value set chesinappudu it is overriding the previous one 

also first row ye populate avutundi 

$('#status').text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

 

[Biskot]

Let me check 

[Suhaas]

19 minutes ago, bevarse said:

 

naaku yeppudu NanN raaledu bhayya 

breakpoints petti chusa, ee kinda line lo value set chesinappudu it is overriding the previous one 

also first row ye populate avutundi 

$('#status').text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

 

Yes. You are right. It is always populating the first row status.