Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

Engaged ,
Apr 05, 2022 Apr 05, 2022

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));

}
}
412
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Apr 06, 2022 Apr 06, 2022

 

 

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));

}
}

 

 

Translate
Community Expert , Apr 07, 2022 Apr 07, 2022

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

Translate
Community Expert , Apr 07, 2022 Apr 07, 2022
$('#patients_cbx').empty();
Translate
LEGEND ,
Apr 06, 2022 Apr 06, 2022

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 06, 2022 Apr 06, 2022

 

 

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));

}
}

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 06, 2022 Apr 06, 2022

@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...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 06, 2022 Apr 06, 2022

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

 

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

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 07, 2022 Apr 07, 2022
LATEST
$('#patients_cbx').empty();
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 07, 2022 Apr 07, 2022

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines