I created a very basic set up. I have two variables on a form. One is a select with the choices first and second. The second is a macro variable that points to a macro that only contains script. (I haven't been able to find a way to pass the variable from the script to any jelly variables). Then, there is a client script that runs on change of my select variable.
Select variable options:
On change client script running against the select variable:
Macro:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>
function myChoice(sentChoice){
if(sentChoice == 'first'){
document.getElementById("demo").innerHTML = "First!";
}
else if(sentChoice == 'second'){
document.getElementById("demo").innerHTML = "Second!";
}
var choice = sentChoice;
}
</script>
<p id="demo"></p>
</j:jelly>
Once the page is rendered you should interact with the UI page with normal javascript if you're trying to change a client side item such as an icon.
Here is an example:
UI page HTML/XML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<h3>UI Page Items Below</h3>
<hr/>
<span id="icon1" class="icon-clear" style="font-size: 24px"> <span>User</span></span>
</j:jelly>
Catalog Client Script:
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading) {
return;
}
var sample = document.getElementById('icon1');
if(newValue == ''){
sample.className = '';
sample.classList.add('icon-clear');
return;
}
sample.className = '';
sample.classList.add(newValue);
}
// Any of these techniques would work too:
// var sample = gel('icon1');
// var sample = $j('#icon1')[0];
// var sample = g_form.getElement('icon1');
// var sample = icon1;
