Update select box dynamically.

[Estibarna]

Hello,

We are trying to update select box records dynamically using javascript.

As you can see in DESMER definition field:

DESMER definition.png (112.81 KiB) Viewed 869 times

we have one query with 4 parameters, the second parameter is which we want to change.

One button with this javascript code in onClick event do this:

Code: Select all

function botonMercanciasFavoritos() {
	var classes = getObj("merFav").classList;
	classes.toggle("pui-solid-button-no");
	classes.toggle("pui-solid-button-yes");

	if (get('codFav') == 'S') {
		pui.set("codFav", "N")
	} else {
		pui.set("codFav", "S")
	}
	applyProperty("DESMER", "choices parameter value 2", get('codFav'));
	applyProperty("DESMER", "field type", "select box");
}

When record format loads we can see in Developer tools a call to PUI0009103.PGM with this parameters:

P2=N.png (41.91 KiB) Viewed 869 times

When button is pushed another call to the same program with P2 updated

P2=S.png (48.49 KiB) Viewed 869 times

we can see 'Loading ...' in select box, but the records received are the same

Using SQL Query first one retrieve 288 records and second one 45:

[Scott Klement]

It is because you have the "choices parameter 2" property bound to the 'cFavorito' variable on the server.

When the SQL query is re-run, it will get the value of that parameter from the server-side program rather than from the JavaScript code in the display file.

To fix the problem:

1) Add a hidden output field to the display. Bind it's value to 'cFavorito'
2) Set the id property of the new output field to 'cFavorito'
3) In the Elements tab, make sure the new hidden output field comes before the select box. If necessary, highlight the field in the Elements tab, and click the 'up' arrow to move it before the select box.
4) Change 'choices parameter value 2' to not be bound, but instead set to the following: js: pui.get('cFavorito')

When the display loads, it will run JavaScript code to get the value of the hidden field you added and will insert it into the 'choices parameter value 2'. Since the server-side code no longer sees this value as bound, it will get it from the value you set in JavaScript. When you later do the applyProperty() to set the new value, it will use that new value since it's drawing the value from JavaScript rather than a bound field.

You can learn more about how database-driven widgets get their SQL parameters here:
https://docs.profoundlogic.com/x/oYDQ

[Estibarna]

Once again,

Thank you very much Scott,