How to Display javascript var Value in Gridview Label

Question

In my application i am Calculating Time Between Two values(ex: 9 am to 3 pm),For that I am using Javascript function, it's working fine but, here I want to display the time in gridview, in gridview I am creating label for display time in gridview row, here the bellow code what I tried:

aspx.cs:

 DateTime now = DateTime.Now;
        DateTime fourOClock = DateTime.Today.AddHours(21.50);
        msUntilFour = (int)((fourOClock - now).TotalSeconds); 

here i am sending msUntilFour value to Javascript(Following Code)

<script>
     var JavascriptBlah = '<%=msUntilFour%>'
    var upgradeTime = JavascriptBlah;
    var seconds = upgradeTime;
    function timer() {
        var days = Math.floor(seconds / 24 / 60 / 60);
        var hoursLeft = Math.floor((seconds) - (days * 86400));
        var hours = Math.floor(hoursLeft / 3600);
        if (hours < 10) {
            hours = "0" + hours;
        }
        var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
        var minutes = Math.floor(minutesLeft / 60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer()', 1000);
</script> 

then i display the time in span (following Code)

<h3><span id="countdown" class="timer" ></span></h3>

Up to Here it's working fine, but I want to display output time in gridview like below

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                 <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="CreateTs" HeaderText="Created Time" />
                      <asp:BoundField DataField="Time Left" HeaderText="Time Remaining" />
                     <asp:TemplateField HeaderText="Speciality" Visible="true">
                                    <ItemTemplate>
                                     <h3><span id="countdown" class="timer" runat="server" ></span></h3>
                                    </ItemTemplate>
                                </asp:TemplateField>

                 </Columns>

                </asp:GridView>

here I want to display the time in Gridview template label . How can I do this ? Thanks In Advance...@

Answer 1

I assume the GridView has multiple rows. If that is the case the ID of the span elements would be duplicated. In my example the id is appended with the row number to make it unique. Second the runat="server" is not needed in a regular html element. In my example the ID is not needed, but you may need it later and having duplicate ID's is not good practice.

When the page is done loading the script will loop all elements on the page with the timer class and put the time from your original snippet in the span . Note the use of $(this).html instead of $(this).val because the value is html content for inside an element, not a value of a TextBox.

        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField HeaderText="" Visible="true">
                    <ItemTemplate>
                        <h3><span id="countdown_<%# Container.DataItemIndex %>" class="timer"></span></h3>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

        <script type="text/javascript">
            $(document).ready(function () {
                $(".timer").each(function () {
                    var JavascriptBlah = '<%=msUntilFour%>'
                    var upgradeTime = JavascriptBlah;
                    var seconds = upgradeTime;

                    var days = Math.floor(seconds / 24 / 60 / 60);
                    var hoursLeft = Math.floor((seconds) - (days * 86400));
                    var hours = Math.floor(hoursLeft / 3600);
                    if (hours < 10) {
                        hours = "0" + hours;
                    }
                    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
                    var minutes = Math.floor(minutesLeft / 60);
                    var remainingSeconds = seconds % 60;
                    if (remainingSeconds < 10) {
                        remainingSeconds = "0" + remainingSeconds;
                    }
                    $(this).html(hours + ":" + minutes + ":" + remainingSeconds);
                    if (seconds == 0) {
                        clearInterval(countdownTimer);
                        $(this).html("Completed");
                    } else {
                        seconds--;
                    }
                });
            });
        </script>

Answer 2

Try calling the timer function each time the span is loaded in a certain row, and pass to the function the HTML element by adding timer(this) to the span tag:

 <ItemTemplate>
  <h3><span id="countdown" class="timer" runat="server" onload="timer(this)"></span></h3>
 </ItemTemplate>

Once the function is called you can access the html element passed to it using jquery $(Element).html('urData') or $(Element).val('urData') or $(Element).text('urData') :

  function timer(Element) {
    var days = Math.floor(seconds / 24 / 60 / 60);
    var hoursLeft = Math.floor((seconds) - (days * 86400));
    var hours = Math.floor(hoursLeft / 3600);
    if (hours < 10) {
        hours = "0" + hours;
    }
    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
    var minutes = Math.floor(minutesLeft / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
    $(Element).val(hours + ":" + minutes + ":" + remainingSeconds);
    if (seconds == 0) {
        clearInterval(countdownTimer);
        $(Element).val("Completed");
    } else {
        seconds--;
    }
}

Hope this works for you