Trouble with dynamically updating Jelly textbox

[Dane Wrye]

Hey All,

I am a new to Jenkins/Jelly and trying to pick it up as I add functionality to a new codebase. With that said, I am looking at dynamically updating a textbox on my form when the selected option of a select element changes. I think I am 90% of the way there, but need a little bit of help to push me to 100%. To do this, I am currently

a.) Calling a javascript function, updateTextbox(stringToUpdateWith), that overwrites the textbox in question's current value with stringToUpdateWith. It is called onChange from the select element.

b.) Calling a backend java function, getStringToUpdateWith(selectedOption), which takes in the current option from the HTML select element as a parameter and returns the string I want to update my textbox with

c.) Getting the currently selected option in my HTML select element, with the following code: this.options[this.selectedIndex].text

Now, it gets a little messy: all this code is squished together in the select element's onChange, as I want to update the textbox whenever the select element is changed.

All together, the line of code looks like this:

<f:select default="Select your project" style="width:100%; padding-right:5px; margin-right:5px" inline="true" clazz="projectSelect" onChange="updateTextbox('${instance.getStringToUpdateWith(this.options[this.selectedIndex].text)}')"/>

The onChange function, which is what I am currently having trouble with, looks like this: 

onChange="updateTextbox('${instance.getStringToUpdateWith(this.options[this.selectedIndex].text)}')"

Debugging, it seems that the "this.options[this.selectedIndex].text" shows up in the getStringToUpdateWith function as an empty string. If I could get the selected option into this function as a parameter, I will have solved my problem. Any idea why it could be an empty string instead? I would appreciate any and all leads! 

Thanks for your time,

Dane

[Daniel Beck]

You're mixing JS (code evaluated by the browser) and Jelly/JEXL (code evaluated by the server) in a way that doesn't work.

JEXL variables in Jelly get evaluated as the page is rendered the first time (sent from server to browser). They don't update afterwards. I expect you'll notice in a debugger you'll call your instance method once per page load (assuming `instance` is bound to the correct value, another potential source of problems), if at all, with an unexpected parameter, because Jelly/JEXL cannot access JS/DOM variables.

Look into JavaScriptProxy to call Java methods from JS, e.g. https://weekly.ci.jenkins.io/design-library/JavaScriptProxy/ ; or use fetch from JS to call web methods (usually named doWhatever), passing the current value as argument that is received as @QueryParameter annotated parameter of the method.

[Dane Wrye]

You were right on the money - I have gotten my code to work after looking into the JavaScriptProxy!!!

Thank you very much for taking the time out of your day to help me out. I really appreciate it!