Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    171
    Thanks
    13
    Thanked 1 Time in 1 Post

    Color cell red if overdue

    I am trying to make the followupdate turn red if it is before today. Nothing is turning red.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang="eng">
    <head>   
    <script src="../jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var now = new Date();
    var month=now.getMonth()+1;
    var day=now.getDate();
    var year=now.getFullYear();
    var present=month+"/"+day+"/"+year;
    $('td.actdate').each(function() {
    if(this.html <= present){
    	$(this).css('color','red');}
    });
    });
    </script>
    </head>
    <body>
    <h1>Donor Followup Schedule</h1>
    <?php
    include("conn.php");
    $sql="SELECT `donor_info`.`firstname`,`donor_info`.`lastname`,`donor_info`.`spouse`,`donor_info`.`d_id`,`donor_calls`.`d_id`,`donor_calls`.`calldate`,`donor_calls`.`followupdate`,`donor_calls`.`instructions` FROM donor_info, donor_calls WHERE `donor_info`.`d_id`=`donor_calls`.`d_id` ORDER BY  `donor_info`.`lastname`,`donor_info`.`d_id`,`donor_calls`.`followupdate`";
    if(!$sql){die("No Query" . mysql_error);}
    echo "<table width='760' summary='donor followup' cellpadding='1' cellspacing='1' border='1'><thead><tr><th class='name'>Donor</th><th class='program'>Program</th><th class='actdate'>Action Date</th><th class='itemdate'>Item Date</th><th class='instruct'>Instruction</th></tr></thead><tbody>";
    $rs=mysql_query($sql);
    WHILE ($row=mysql_fetch_array($rs)){
    $firstname=$row['firstname'];
    $lastname=$row['lastname'];
    $spouse=$row['spouse'];
    $d_id=$row['d_id'];
    $calldate=date("n/j/Y",strtotime($row['calldate']));
    $followupdate=date("n/j/Y",strtotime($row['followupdate']));
    $instructions=$row['instructions'];
    if($calldate){$program="Donor Call Reports";}
    echo "<tr><td class='name'>" . $firstname . " " . $spouse . " " . $lastname . "</td><td class='program'>" . $program . "</td><td class='actdate'>" . $followupdate . "</td><td class='itemdate'>" . $calldate . "</td><td class='instruct'>" . $instructions . "</td></tr>";
    }?>
    </tbody>
    </table>
    </html>
    table donor_info:
    Code:
    CREATE TABLE IF NOT EXISTS `donor_info` (
      `d_id` int(10) NOT NULL auto_increment,
        `lastname` varchar(50) NOT NULL default '',
      `firstname` varchar(50) NOT NULL default '',
       `spouse` varchar(30) default NULL,
      
      PRIMARY KEY  (`d_id`),
      KEY `active` (`active`,`lastname`,`ziph`,`employerp`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=261 ;
    table donor_calls:
    Code:
    CREATE TABLE IF NOT EXISTS `donor_calls` (
      `call_id` int(10) NOT NULL auto_increment,
      `d_id` int(10) NOT NULL default '0',
       `calldate` date default NULL,
      `followupdate` date default NULL,
       `instructions` text,
      PRIMARY KEY  (`call_id`),
      KEY `d_id` (`d_id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=82 ;
    The php and sql print great, but I have the jquery messed up.
    html output from source:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang="eng">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="author" content="Andy Wheeler">
        <meta name="rating" content="private">
        <meta name="robots" content="No index">
        <meta name="updated" content="4/Feb/2010 10:13">    
        <title>Donor Followup Schedule</title> 
       <style type="text/css">
    body
    	{background: transparent url(blueback.jpg) repeat-x;padding:10px;
    }
    #container{
    width:700px; 
    margin:0 auto;
    color:#000;
    background:transparent;
    font: normal 15px "lucida bright", georgia,serif;
    line-height:1.5em;
    padding:20px;
    }
    p.main{
    font-size:18px;
    font-weight:500;
    font-variant:small-caps;
    text-align:center;
    }
    h1{
    font-size:20px;
    font-variant:small-caps;
    font-weight:700;
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000;
    padding:.5em;
    text-align:center;
    }
    .script{
    font-family:cursive;font-style:italic;font-size:26px;
    }
    h2{font-size:20px;font-variant:small-caps;
    font-weight:500;
    }
    h3,dt{font-size:16px;
    font-variant:small-caps;
    font-weight:500;
    padding:.5em;
    }
    dt{padding:0;}
    p a{color:#000;background:#ccc;width:15em;text-decoration:none;font-variant:small-caps;
    font-weight:700;padding:5px;border: 3px ridge #333;text-align:left;}
    .text{text-align:right;padding-left:2em;}
    .name{width:120px;}
    .program{width:120px;}
    .actdate,.itemdate{width:85px;}
    .instruct{width:350px;}
    .red{color:#ff0000;}
    
    </style>
    <script src="../jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var now = new Date();
    var month=now.getMonth()+1;
    var day=now.getDate();
    var year=now.getFullYear();
    var present=month+"/"+day+"/"+year;
    //var godate=$('td.actdate').css('color','red');
    $('td.actdate').each(function() {
    if(this.html <= present){
    	$(this).css('color','red');}
    });
    });
    </script>
    </head>
    <body>
    <div id="container">
    <p class="main">Mental Health Association of Northwestern  PA</p>
    <h1>Donor Followup Schedule</h1>
    
    <table width='760' summary='donor followup' cellpadding='1' cellspacing='1' border='1'><thead><tr><th class='name'>Donor</th><th class='program'>Program</th><th class='actdate'>Action Date</th><th class='itemdate'>Item Date</th><th class='instruct'>Instruction</th></tr></thead><tbody><tr><td class='name'>LuAnn  Gossett</td><td class='program'>Donor Call Reports</td><td class='actdate'>2/10/2010</td><td class='itemdate'>1/31/2010</td><td class='instruct'>Identify specific programs</td></tr><tr><td class='name'>LuAnn  Gossett</td><td class='program'>Donor Call Reports</td><td class='actdate'>2/25/2010</td><td class='itemdate'>2/12/2010</td><td class='instruct'>Set timetable for implementation.</td></tr><tr><td class='name'>Ann  Wassman</td><td class='program'>Donor Call Reports</td><td class='actdate'>2/12/2010</td><td class='itemdate'>2/12/2010</td><td class='instruct'></td></tr><tr><td class='name'>Rita Andy Wheeler</td><td class='program'>Donor Call Reports</td><td class='actdate'>12/31/2009</td><td class='itemdate'>12/12/2009</td><td class='instruct'>Be Persistant, this will pay off.</td></tr><tr><td class='name'>Rita Andy Wheeler</td><td class='program'>Donor Call Reports</td><td class='actdate'>1/16/2010</td><td class='itemdate'>1/15/2010</td><td class='instruct'>Confirm comittment to future campaigns</td></tr><tr><td class='name'>Rita Andy Wheeler</td><td class='program'>Donor Call Reports</td><td class='actdate'>1/26/2010</td><td class='itemdate'>1/25/2010</td><td class='instruct'>Demo new products.</td></tr><tr><td class='name'>Rita Andy Wheeler</td><td class='program'>Donor Call Reports</td><td class='actdate'>1/27/2010</td><td class='itemdate'>1/27/2010</td><td class='instruct'>Return Form Due 4/4/10</td></tr><tr><td class='name'>Rita Andy Wheeler</td><td class='program'>Donor Call Reports</td><td class='actdate'>4/4/2010</td><td class='itemdate'>1/28/2010</td><td class='instruct'></td></tr><tr><td class='name'>Rita Andy Wheeler</td><td class='program'>Donor Call Reports</td><td class='actdate'>4/5/2010</td><td class='itemdate'>1/29/2010</td><td class='instruct'></td></tr></tbody>
    
    </table>
    </div><!-- end div container -->
    </body>
    </html>
    Thanks for the look,


    Andy
    Last edited by 1andyw; 02-24-2010 at 04:11 PM. Reason: ADD SOURCE CODE

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Since this is a client-side scripting issue, could you post the HTML output of your PHP code? As in: view-source, copy, paste.

    Regarding your problem, I suspect that its main cause is here:

    Code:
    if(this.html <= present){
    First, what you probably want instead of this.html is the jQuery method:

    $(this).html()

    Second, that will return a HTML string; it won't return anything that is comparable to a date. It's like saying "if fish is less than or equal to tree". You'll need to convert the html string into a date that javascript can understand in order to compare it to another date.

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    171
    Thanks
    13
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Spudhead View Post

    Second, that will return a HTML string; it won't return anything that is comparable to a date. It's like saying "if fish is less than or equal to tree". You'll need to convert the html string into a date that javascript can understand in order to compare it to another date.
    I added the html output to the original post. This validates html, css and standards compliant. Couldn't find a javascript method to convert string into date.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by 1andyw View Post
    Couldn't find a javascript method to convert string into date.

    You need a Javascript reference.

    Code:
    var d = new Date('1/26/2010');


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •