conditionally format php output with javascript

Question

I would like to conditionally apply (based on date and time) with Javascript different CSS styles on a <div> element that contains data output with Php from a Mysql database. The php generates a list of events into various <div>s, where a <div> would receive different coloring depending on the date/time it holds relative to the actual day. (So if the event date/time is in the future, the color would be blue, if in the past, grey.) I understand a PHP solution would use the server's date/time, while javascript would use the browser's date/time, so I selected javascript for the conditional formatting based on date/time. I also understand that javascript needs to wait until the whole page loads, including the result of the php query. (I also understand that I know very little about javascript and php.)

Below is the html and php code I have. This php queries the first 10 events and presents them in a list ordered by date in a bootstrap table. The div #timecode is which I would like to conditionally format (this sample php code does not contain the pagination php code, and returns the first 10 records from the database):

<div class="row">
<div class="venuelista">
<div class="col-sm-9 col-md-9 col-lg-9">
<table class="table">

<tbody>

<?php 
    while ($row = mysql_fetch_assoc($rs_result)) {
    ?>
<tr>
    <td class="col-md-7">
        <div id="timecode" padding="right:5px"><?php echo $row['esemeny_disp_mm_dd']; ?></div>
        <div class="eventListTitle"><?php echo $row['esemeny_cim']; ?><br><?php echo $row['esemeny_jelleg']; ?></div>
    </td>
    <td class="col-md-5">
        <div class="eventListTitle"><?php echo $row['esemeny_helyszin']; ?>
        </div>
    </td>
</tr>
    <?php 
    };
    ?>
</tbody>
</table>

    </div>
</div>

In the Mysql database I have and 'event date' field and a separate 'event time' field.

And this is the javascript I found on the net, maybe on this site, to format the div #timecode on the basis of its date/time (this is just testing if it works against a fix date - it does):

<script>
$(document).ready(function() {
var curtime = new Date(),
curday = curtime.getDate(),
curmonth = curtime.getMonth()+1;
if(curmonth == 7 && curday == 20)
$('#timecode').addClass('circle-disappear-blue');
else
$('#timecode').addClass('circle-disappear-grey');
});
</script>

Problem: javascript only formats the very first php result of the list. I thought the $(document).ready(function() would allow it to format all 10 list items. Again I am sorry for malformatting my question - I am not on mutual understanding with the code sample function.

Any insight into this is appreciated.

EDIT: The javascript now looks like this

<script>
$(document).ready(function() {
$('#mytableid tr td:first-child').addClass('circle-disappear-blue');
var curtime = new Date(),
curday = curtime.getDate(),
curmonth = curtime.getMonth()+1;
if(curmonth == 7 && curday == 19)
$('#blue-condtional').addClass('circle-disappear-blue');
else
$('#blue-condtional').addClass('circle-disappear-grey');
});
</script>

ID's have to be unique, maybe you want to use class attributes? — NMunro
– NMunro, Commented Jul 20, 2015 at 15:26
why should it do anything else? You've got duplicate IDs, and since IDs are supposed to be unique, getElementById will only ever return ONE matching element, usually the first one encountered. — Marc B
– Marc B, Commented Jul 20, 2015 at 15:26

Robert · Accepted Answer · 2015-07-20 15:26:36Z

1

add id to your table for example

<table class="table" id="mytableid">

then use proper selector

$('#mytableid tr td:first-child').addClass('circle-disappear-blue');

the other option is to add class to types that you want change color let's say "blue-condtional"

if(curmonth == 7 && curday == 20) {
    $('.blue-condtional').addClass('circle-disappear-blue');
} else {
    $('.blue-condtional').addClass('circle-disappear-grey');
}

and change

<div id="timecode" padding="right:5px">

to

<div class="blue-condtional">

btw using inline styles is not good habbit.

answered Jul 20, 2015 at 15:26

Robert

20.3k6 gold badges58 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simon Over a year ago

Thanks, Robert. So the solution is to use the child element? Please, see my edit : still applies to the first item of the table.

Robert Over a year ago

There are several ways to achieve it one is to use :first-child but class example is good as well

Collectives™ on Stack Overflow

conditionally format php output with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related