Change container style based on value & update on click

I've got containers with an OnClick event which updates a boolean field in my DB. So if I click an element, I want to highlight it that it is selected. If I click again, it is unselected. I want to be able to change the styling of the container based on the field. So on preparation I need to be able to set the class based on the field value, then on click, update it. How do I change CSS styles for a specific container prigramatically? Does it need a JS function?

I've ironed out the DB end of things, so OnClick it sets the field to True/False.

I can upload a sample OML tomorrow morning if that's helpful?

Solution

Hi Steve,

You can apply conditional style on your container like this:

Here selected is my local boolean variable which will change on click and decides background color of the container.

In your onclick event you are already setting your field value to true/ false. Along with that you can also use ajax refresh widget and select your container in it. It will refresh your container and new style based on the field value will be applied.

Don't forget to give your container a name otherwise it will not be listed for selection in ajax refresh widget.

Solution

Yes, as Nikhil said you can change the CSS dinamicly using the HTML 'Extended Properties' and conditionals.

I would like to complement the answer by saying that you can use either a style tag like the example above, or you can also use the class attribute to make your css dynamic. 

Like this:

Regards,

James

Thanks both.


I had actually posted another question, but realised quickly how to solve it so deleted it. If you're generating your containers from a list, the "selected" variable can be assigned from a list in your preparation stage, so container style can change base don list properties (obviously on click you have to write the opposite back to your DB).