Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript change label forcolor based on condition

Posted on 2014-07-11
5
Medium Priority
?
237 Views
Last Modified: 2014-07-11
Hello, given my code below. How can I find the lblmyDate inside of the rptItems repeater and change the forecolor of the label to red If the date is 30 days older than today???


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="rptItems" runat="server">
            <ItemTemplate>
                <table>
                    <tr>
                        <td>
                             <asp:Label id="lblMyDate" runat="server" Text='<%#Eval("myDate")%>'></asp:Label>
                        </td>
                    </tr>
                </table>
           </ItemTemplate>
            <AlternatingItemTemplate>
                <table>
                    <tr>
                        <td>
                             <asp:Label id="lblMyDate" runat="server" Text='<%#Eval("myDate")%>'></asp:Label>
                        </td>
                    </tr>
                </table> 
            </AlternatingItemTemplate>
        </asp:Repeater>
       </div>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:Scott Baldridge
  • 2
  • 2
5 Comments
 
LVL 21

Expert Comment

by:Randy Poole
ID: 40191244
You would do this on the code behind on each item row
0
 

Author Comment

by:Scott Baldridge
ID: 40191266
I have done it on the itemdatabaound of the repeater. I'm trying to see how to do it in javascript.

Performance wise is it best to do this type of work in javascript or code behind?
0
 
LVL 21

Accepted Solution

by:
Randy Poole earned 2000 total points
ID: 40191301
Since you are not editing the data on the repeater (I assume) , then there would be no benefit to using javascript to perform this action.  Now if you allowed them to edit rows of data and wanted to resubmit it all at once and do something of this sort, then javascript would be a good choice.  I do have to tell you, it is a pain in the butt though since you have to build an array of client ID's which match the various data on the page.
0
 

Author Closing Comment

by:Scott Baldridge
ID: 40191331
I agree and will stick to the code behind. Thanks for your time.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40191345
It is best to do this type of thing in js/jquery.  This is a great job for momentjs  http://momentjs.com/

http://jsbin.com/dedet/1/edit
<!DOCTYPE html>
<html>
<head>
  <style>
    .red{color:red;}
    .black{color:black;}
    </style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://jsbin.com/wabico/1.js"></script>
<script>
  $(function () {
    $('.checkdate').each(function () {
        var dateText = $(this).text();
        var convertDate = moment(dateText, "M/D/YYYY");
        var today = moment();
        var days = convertDate.diff(today, 'days');
        if (days < -30) {
            $(this).removeClass('black').addClass('red');
        } else {
            $(this).removeClass('red').addClass('black');
        }

    });

});
  </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
 <table>
                    <tr>
                        <td class="checkdate">
                          4/1/2014
                        </td>
                    </tr>
                </table> 
   <table>
                    <tr>
                        <td class="checkdate">
                          7/1/2014
                        </td>
                    </tr>
                </table> 
</body>
</html>

Open in new window

Just a reminder that you can't repeat ID's.  They need to be unique.  You can repeat classes.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question