Multiple conditions inside td's class attribute

Question

I have an object that has a String attribute which may be of four possible values, for each value i want to put a different css class to the cell . I am wondering if there is a way to write composite conditions in here:

<ui:repeat value="#{row.info}" var="wui" >
            <td class="#{wui.status eq 'In execution'? 'inexec' : '' }"> 
            <!--<td id="wuitd" onLoad="classfunction()" >--> 
                <h:outputText value="#{wui.status}" />
                <h:outputText value="#{wui.remainingEffort} effort units" />
           </td>
</ui:repeat>

I tried writing a javascript function but i am not sure if it is correct, also i think the function invocation is wrong:

<td id="wuitd" onLoad="classfunction()" >
        <h:outputText value="#{wui.status}" />
</td>

<script>
    function classfunction(){

        char status = document.getElementById("wuistatus").value;
        switch(status) {
            case 'In execution':
                document.getElementById("wuitd").style.parentRule('inexec');
                break;
            case 'Ready for execution':
                document.getElementById("wuitd").style.parentRule('ready');
                break;
            case 'Finished':
                document.getElementById("wuitd").style.parentRule('finished');
                break;
            case 'Not ready':
                document.getElementById("wuitd").style.parentRule('notExec');
                break;
            default:
                code block
        }
    }

</script>

I think you can't trigger `onload` from `td` element, ref: https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element — Yu-Lin Chen, Dec 18 '17 at 01:14
Yes you're right onload is not an event of the td. but i want to trigger the js funcion automatically. not by a user event — Lujain, Dec 18 '17 at 12:43

Will Crawford · Answer 1 · 2017-12-19T01:27:05.423

1

You can find most or all of what you need to know about the JS part of your problem here ... I have no idea what the "wui" part is about.

Further references (you can probably find better using Google and adding a few extra keywords to match your environment):

My first thought in such situations is almost use "Hey, I know, I can use jQuery!" ... and I know, "Now I have two problems" but it does work :o)

I'm assuming you have some sort of JS framework loaded here, anyway. If so, and it's not jQuery, find out what its mechanism for "page loaded" is. Unless you're absolutely certain what browsers are going to be used with your application, you don't want to be working out how to do it "by hand".

edited Dec 19 '17 at 01:27

answered Dec 18 '17 at 02:58

Will Crawford

264
4
13

Thanks for the link I will see how to change the class. But in the link you provided, they invoke the js function by onclick event. I have ui:repreat that repeats all objects. and I want to invoke the js function everytime the ui:repreat is loading a new object to the table. – Lujain Dec 18 '17 at 12:41
I had a little hunt around, to see what would be considered best practice (I'd use jQuery for this, it's just "easier"). I'll add some references to my answer (comments get a little crowded). – Will Crawford Dec 18 '17 at 23:27
Sorry for the delay, been furniture shopping! – Will Crawford Dec 19 '17 at 01:27

score 0 · Answer 2 · answered Dec 20 '17 at 06:58

It looks like you are using JSP/JSF (or at least something that utilises EL expressions). In a future question it would be best to specify exactly what you are using (usually via tags). According to the docs for EL, you can use a hash lookup. So if you can define the following somewhere that you can then access in your template:

statusToClass = {
  "In execution": "inexec",
  ... // define your other value -> class translations
}

You should be able to:

<td class="#{statusToClass[wui.status]}"> 
  <h:outputText value="#{wui.status}" />
</td>

I confess I don't know EL, so where or how you might define the statusToClass is not clear. However this method works well to avoid multiple-conditions for other languages that support object/hashes. As long as you can rely on the wui.status always having a predictable value. This is because you have no programmatic control at time of look-up, nor the chance to fallback to a default. In JavaScript you can add a fallback easily, but not so sure this would be supported by EL.

statusToClass[wui.status]||'default'

It does look like you can define methods (as part of a Bean) that can be accessed by EL3 — https://docs.oracle.com/javaee/7/tutorial/jsf-el003.htm — so perhaps this is another route you could look into (rather than the JavaScript method, which looks like it might be prone to a few issues i.e. onLoad and .value — unless the Java context you are working in supports these by extension). By the sounds of it, the more you integrate with the way EL expects to work, the easier things will be — especially when using other conventions like ui:repeat.

Multiple conditions inside td's class attribute

2 Answers2