CODEWITHSUNDEEP
javascriptphpmysql
Simon
Simon

Reputation: 15

conditionally format php output with javascript

  1. 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.)

  2. 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.

  1. 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>

  2. 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>

Upvotes: 1

Views: 100

Answers (1)

Robert
Robert

Reputation: 20286

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.

Upvotes: 1

Related Questions