Search code examples
jqueryhtmlcssspotfire

Use jQuery to change background color of text area Spotfire

I have two calculated values in a text area in spotfire. I would like to use jQuery to change the color of the text area background based on if one value is higher than the other. I have it set up but it is not working. It appears as if it is not even executing. Here is the HTML.

 <body id = wrapper>
 <SPAN id = thisyear><SpotfireControl id="2f97a6afc3e64512977dd042a7e32351"     /></SPAN>

 <SPAN id = lastyear ><SpotfireControl id="f98415c74eb34cedbab057f763788bc6" /></SPAN>
 </body>

The top calculated value has (in id thisyear) the value 77750 and the bottom calculated value has (in id lastyear) 44086

The idea is that when the filters change the values I want the background color to change. Here is the jQuery that is currently not working:

$( "#thisyear" ).change(function() {
   var thisyearval = ParseInt($("#thisyear").val());
   var lastyearval = ParseInt($("#lastyear").val());
   if (thisyearval > lastyearval){
       $("#wrapper").css("background-color", "#009900")
       } else{$("#wrapper").css("background-color", "#FF0000")}
});

I am new to jQuery so any help is greatly appreciated!

Solution

  • I ended up figuring this one out. Here is the html:

    <body >
<div id = wrapper>
<div id = thisyear><SpotfireControl id="d644de4c97c440fbb78c561f190e5a47" />   </div>

<div id = lastyear ><SpotfireControl id="f98415c74eb34cedbab057f763788bc6" /></div>
</div>
</body>

    And the jQuery that gets this done:

    setInterval(function() {
   var thisyearval = parseInt($("#thisyear").text(),10)
   var lastyearval = parseInt($("#lastyear").text(),10)


   if (thisyearval > lastyearval){
      $("#wrapper").css("background-color", "#009900")
   } else{$("#wrapper").css("background-color", "#FF0000")}
}, 500);

    It turns out that spotfire doesnt support the change function in jQuery, so I used setInterval() to essentially call the function over and over.

    Hopefully this will help someone else out too.