How to Re-render UI Page in a catalog item

[Michael M1]

One of the variables/questions on my catalog item is a UI Page.

This UI Page performs a var gr query to get the url of an image and displays it on the page.

It works fine on loading.

When I change a choice in another field - which is a drop down list - I want to call the UI Page again to get the new image for display.

How do I get the UI Page to update? If I use an onChange client script I can't seem to figure out the code that works here.

[kristenankeny]

To do what you want in combination with what Chris provided, you need to move your gliderecord query into your client script. This was my test scenario using a custom table that has a Name and URL field on it:

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">
    <hr/>
    <img id="icon1" src="" height="42"> <span>Type</span></img>

</j:jelly>

Client script:

function onChange(control, oldValue, newValue, isLoading) {
	if (isLoading) {
		return;
	}
	var sample = document.getElementById('icon1');
	if(newValue == ''){
		//sample.className = '';
		sample.src = '';
		return;
	}
	else{
		var gr = new GlideRecord('u_my_images');
		gr.addQuery('u_name',newValue);
		gr.query();
		if(gr.next()){
			sample.src = gr.u_link;
		}
	}
}

[ChrisBurks]

Hi micheal_nj,

You don't want to use the name of the UI page. You want to access the elements within the html markup you created in the UI page.

You don't necessarily have to move your logic into the UI page either. However, you need to realize that jelly runs before the page gets rendered. So, for a better user experience you may want to use a GlideAjax script if you need to reach back to the back end to get table data based on the dropdown selection.