HTML5 Canvas - Populated Combobox with JSON via AJAX - add a Selected option

Forum|Forum|3 years ago
April 6, 2022
2 replies
519 views

I have populated a combobox with JSON via Query AJAX. I now want to prepend a selected option, like 'Select an option...'. How should I do this?

$.ajax({

url: "scripts/get_patients.php",

dataType: 'json'

}).then(function (data) {

assignDataF(data);

})


function assignDataF(data) {

for (var i = 0; i < data.length; i++) {

$('#patients_cbx').append($("<option/>").attr("value", i).text(data[i].label));

}
}

This topic has been closed for replies.

Correct answer kglad

Also, how would I clear all options from a combobox as I have tried with the following but no success:

$('#patients_cbx').val('');

$('#patients_cbx').empty();

kglad

Community Expert

function assignDataF(data) {
$('#patients_cbx').append($("<option/>").attr("value", 0).text("Select an option.."));
for (var i = 0; i < data.length; i++) {

$('#patients_cbx').append($("<option/>").attr("value", i+1).text(data[i].label));

}
}

F

FlatChatAuthor

Inspiring

@kglad Thanks!

Question: Why does adding the append for the selected option work here inside the JQuery AJAX:

function getPatients(evt) {

	level = evt.target.value;

	root.choose_patient_txt.visible = true;
	root.patients_cbx.visible = true;
	
	if(level == 1){
		levelLabel = 'simple';
	} else if(level == 2){
		levelLabel = 'intermediate';
	} else if(level == 3){
		levelLabel = 'advanced';
	} 

	$.ajax({
		type: "POST",
		url: 'scripts/get_patients.php',
		dataType: 'json',
		data: {
			level: level
		},
		success: function (data) {
			$('#patients_cbx').val('');

			$('#patients_cbx').append($("<option/>").attr("value", 0).text("Select " + levelLabel + " patient..."));
			for (var i = 0; i < data.length; i++) {
				$('#patients_cbx').append($("<option/>").attr("value", data[i].data).text(data[i].label));
			}
		}
	});
}

And not outside of the JQuery AJAX call?

$('#patients_cbx').append($("<option/>").attr("value", 0).text("Select " + levelLabel + " patient..."));


function getPatients(evt) {

	level = evt.target.value;

	root.choose_patient_txt.visible = true;
	root.patients_cbx.visible = true;
	
	if(level == 1){
		levelLabel = 'simple';
	} else if(level == 2){
		levelLabel = 'intermediate';
	} else if(level == 3){
		levelLabel = 'advanced';
	} 

	$.ajax({
		type: "POST",
		url: 'scripts/get_patients.php',
		dataType: 'json',
		data: {
			level: level
		},
		success: function (data) {
			$('#patients_cbx').val('');

			
			for (var i = 0; i < data.length; i++) {
				$('#patients_cbx').append($("<option/>").attr("value", data[i].data).text(data[i].label));
			}
		}
	});
}

As the components are in the DOM, I assume JQuery could be used on any component anywhere in the code if I have JQuery added.

So if I wanted to do similar for a combobox that already has defined options (through the IDE) I could just add this line anywhere:

$('#level_cbx').append($("<option/>").attr("value", 0).text("Select a level..."));

But it's not working...

kglad

Community Expert

you have to pass "data" or define a variable (eg, dataA) outside the function body.

Colin Holgate

Inspiring

The Components panel has Radio Button. Putting down severl of those will make them work as a group.

I don't know the messages that will be triggered, or how you could have two sets of buttons visible at the same time, but hopefully that will get you started.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded