Display CountDown Timer inside ListView using jQuery in ASP.Net

Last Reply one month ago By arunkurmi

Posted one month ago

hello

it works well but if i have another div inside the listview it stops working

pls advice

how to label value in forloop instead of tag name DIV 

<script type="text/javascript">
    function CalculateCountDownTimer(date, elementId) {
        var countDownDate = new Date(date).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);
            document.getElementById(elementId).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            if (distance < 0) {
                clearInterval(x);
                document.getElementById(elementId).innerHTML = "EXPIRED";
            }
        }, 1000);
    }
    window.onload = function () {
        var div = document.getElementById("dvTimer");
        for (var i = 0; i < div.getElementsByTagName('DIV').length; i++) {
            var endDate = div.getElementsByTagName('DIV')[i].getElementsByTagName('SPAN')[0].innerHTML;
            var label = div.getElementsByTagName('DIV')[i].getElementsByTagName('SPAN')[1];
            CalculateCountDownTimer(endDate, label.id);
        }
    }
</script>
<div id="dvTimer">
    <asp:ListView ID="ListView1" runat="server">
        <ItemTemplate>
            <div>
                <asp:Label ID="lblEndDate" runat="server" Text='<%#Eval("EndDate") %>' Style="display: none;"></asp:Label>
                <asp:Label ID="lblTimer" runat="server" />
                <hr />
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>
You are viewing reply posted by: arunkurmi one month ago.
Posted one month ago

Hi nauna,

Check this sample. Now take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=dvTimer]').each(function () {
            var endDate = $(this).find("[id*=lblEndDate]").html();
            var lblTimer = $(this).find("[id*=lblTimer]");
            var countDownDate = new Date(endDate).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);
                $(lblTimer).html(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
                if (distance < 0) {
                    clearInterval(x);
                    $(lblTimer).html("EXPIRED");
                }
            }, 1000);
        });
    });        
</script>
<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <div id="dvTimer">
            <asp:Label ID="lblEndDate" runat="server" Text='<%#Eval("EndDate") %>' Style="display: none;"></asp:Label>
            <asp:Label ID="lblTimer" runat="server" />
            <hr />
        </div>
    </ItemTemplate>
</asp:ListView>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add(new System.Data.DataColumn("EndDate", typeof(DateTime)));
        dt.Rows.Add("2020/01/10");
        dt.Rows.Add("2020/01/31");
        ListView1.DataSource = dt;
        ListView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.Add(New System.Data.DataColumn("EndDate", GetType(DateTime)))
        dt.Rows.Add("2020/01/10")
        dt.Rows.Add("2020/01/31")
        ListView1.DataSource = dt
        ListView1.DataBind()
    End If
End Sub

Screenshot