javascript: Change class if field = x

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

javascript: Change class if field = x

Post by benzoD » 2013-12-06 21:03

Hi,

There is a Status field in my database that can be New, Scheduled, In Progress and Complete. When the data in the status field is Complete, I would like the background color of the entire row to render as light red.

I found a good prototype tutorial exhibiting how I think it should be implemented here: a function that will add a css class to the row if the returned data for Status is "Complete".

Where should this code reside? I tried putting the function in common.js.php but it didn't seem to work though it was probably my neophyte javascripting skills. I don't want to put it inline but if that's be easier I guess it'll do. What event would be the the best to wait for, onload, onbody, etc?

I guess I should also ask if this is the best way to accomplish this?

Thanks!

selectsteel
Posts: 26
Joined: 2013-09-23 14:14

Re: javascript: Change class if field = x

Post by selectsteel » 2013-12-19 14:02

I have been trying to find a way to highlight rows if the date is within a certain range. I have tried Hooks and no luck. If anyone has ideas please let me know.

selectsteel
Posts: 26
Joined: 2013-09-23 14:14

Re: javascript: Change class if field = x

Post by selectsteel » 2013-12-30 16:35

I figured out a hacked way to do this that works. In your table_templateTV.html file you can use javascript to highlight the rows that are in a date range.
You would insert the javascript at the top to set your variables.
<script>
var today = new Date();
today.setDate(today.getDate() + 7); //this is todays date plus 7 days
var today2 = new Date();
today2.setDate(today2.getDate() + 14); //this is todays date pluse 14 days
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var d2 = today2.getDate();
var m2 = today2.getMonth()+1; //January is 0!
var yyy2 = today2.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = yyyy+'/'+mm+'/'+dd;
if(d2<10){d2='0'+d2} if(m2<10){m2='0'+m2} today2 = yyy2+'/'+m2+'/'+d2;
//document.write(today);
</script>

Then add the <script> tags between the <%%SELECT%%> and <%%ENDSELECT%%> tho add your javascript if statement.
My example tells appgini to highlight this coloumn in red if it is less than 1 week. It matches the <%%VALUE(DATE)%%>
with the variable today. You also need to make sure the date format above is the same as whats in your table, mine is yyyy/mm/dd as shown above.


<td id="yORDER_NUMs-PARTNUMBER-<%%VALUE(ORDER_NUM)%%>" valign="top" class="yORDER_NUMs-PARTNUMBER TableBody"><%%SELECT%%>
<script>if ('<%%VALUE(DATE)%%>' <= today){document.write('<div style="color: red;"><%%VALUE(PARTNUMBER)%%></div>');}
else if ('<%%VALUE(DATE)%%>' <= today2)
{document.write('<div style="color:blue;"><%%VALUE(PARTNUMBER)%%></div>');}
else {document.write('<div><%%VALUE(PARTNUMBER)%%></div>');}
</script><%%ENDSELECT%%></td>

You would have to add this to each column that you want to apply highlighting on.

HBmike
Posts: 18
Joined: 2013-08-30 18:02

Re: javascript: Change class if field = x

Post by HBmike » 2014-01-02 23:18

This does not work for me. There is an error somewhere in the javascript. I will see if I can find it, but my javascript is rusty.

When I try to get it to print 'today' it does nothing.

HBmike
Posts: 18
Joined: 2013-08-30 18:02

Re: javascript: Change class if field = x

Post by HBmike » 2014-01-03 16:13

I got it to work for me by simplifying it to:

Code: Select all


var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;
document.write(today);

It also allowed me to match our date format usage.

While this works for that cell. Where is the code for that row? I need the whole row to be highlighted. Will keep looking.

Thanks for pointing me in the direction I needed.

benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Re: javascript: Change class if field = x

Post by benzoD » 2014-01-29 21:38

Thanks for the suggestions so far. Like HBMike, I need it to extend across the entire record. After extensive digging, looks like the bootstrap css may be the most straightforward method for changing the color of an entire row. I'm using the compact bootstrap theme, which is in resources>initializr>css>bootstrap_compact.css. The code I'm working with is:

Code: Select all

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}
I've gotten the rows to change permanently (and the highlighting to continue working) by replacing that with the code below:

Code: Select all

.table-striped > tbody > tr > td,
.table-striped > tbody > tr > th {
  background-color: #FFE4E1;
}
Now I'm trying to find the correct area to put the php/jQuery that will evaluate the fields pulled from the database and change the class given to records with a status of Complete when in table view. See you in a month. :P

andrikaa
Posts: 1
Joined: 2014-02-13 05:02

Re: javascript: Change class if field = x

Post by andrikaa » 2014-02-27 05:33

Is javascript a capable language for writing program extensions for programs that run on microsoft's .Net Framework? Sorry if i confused you. Answer even if your not sure please. Just is Javascript capable at all with .Net if you don't understand the question's details

benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Re: javascript: Change class if field = x

Post by benzoD » 2014-02-27 14:17

andrikkaa, your question would be more suited to (and will most likely get an answer in) a javascript or .Net forum. This forum has nothing to do with .Net and just barely javascript, and most of the users are beginners in programming.

I would also suggest you start a new topic in the proper board instead of tacking your question onto a random question that is several months old, as you will be more likely to have your question seen and answered.

selectsteel
Posts: 26
Joined: 2013-09-23 14:14

Re: javascript: Change class if field = x

Post by selectsteel » 2014-08-12 11:53

I noticed the 2 responses to the code I introduced to apply highlighting based on date conditions and I wanted to reiterate the point I made in my post above that the javascript to apply highlighting needs to be added to each column in order to apply it to the whole row.

Post Reply