Javascript not working in Livecycle

Question

I have JavaScript that works in JSFiddle but not in LiveCycle Designer ES3. What I'm trying to do is have the field of a drop down list change background color when an option other than the default option is selected (on change).

function BackgroundChange(ddl) {

var value = ddl.srcElement.options[ddl.srcElement.selectedIndex].value;
var positionddlist = document.getElementById('positionddlist');

// 99 is the value assigned to the default option
if (value !== "99") {
alert('Changes from default values require comment.');
document.getElementById('positionddlist').style.backgroundColor = "orange";

} else {
document.getElementById('positionddlist').style.backgroundColor = "";
}
}

Suggestions?

How specifically does it not work? Error? Unexpected output? — CollinD, Feb 10 '16 at 16:19
It simply doesn't perform the action desired. I don't get an error or any other output. It's in the change event of the dropdown list of a fragment. I've tried calling it as a script object function but that didn't work either. — Mike H., Feb 10 '16 at 17:30

score 1 · Answer 1 · answered Feb 10 '16 at 23:24

I'm afraid I have some bad news for you. The DOM code available to you in LiveCycle Designer is not an HTML DOM, so it doesn't support the same methods and properties. In this case, there is no srcElement property, nor is there a getElementById method.

The list of properties and methods that are available are outlined in the [LiveCycle Designer Scripting Reference][1].

The easiest way to to set the border color is to pass in the object and then set the value using fillColor, as in:

DropDownList1.fillColor = "255,102,0";

Personally, I rely a lot on LiveCycle Designer's object assist to guide me through an object's properties.

In the script editor window you have the ability to allow for the name of the object you want to reference to be dropped in by pressing CTRL or CTRL and SHIFT on the keyboard and then clicking the object you wish to work with. — greendave11, Mar 28 '16 at 19:31

score 0 · Answer 2 · answered Mar 07 '16 at 13:09

You can write this script directly "on" the Drop Down object under the "Change" event. When writing script "on" an object, the keyword this becomes bound to the object. You could use the following:

if(this.rawValue!="99"){
    //this.fillColor should also work
    this.border.fill.color.value = "255,255,0";
}
else{
    this.border.fill.color.value = "0,0,0";
}

If you are writing a script object function, simply pass in the XFA object as an input parameter:

function changeDropDownFill(dropDown){
    if(this.rawValue!="99"){
        //this.fillColor should also work
        dropDown.border.fill.color.value = "255,255,0";
    }
    else{
        dropDown.border.fill.color.value = "0,0,0";
    }
}

And call it from the Change event like so: nameOfYourScriptObject.changeDropDownFill(this);

Javascript not working in Livecycle

2 Answers2