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

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

Engaged ,
Apr 05, 2022 Apr 05, 2022

Copy link to clipboard

Copied

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

}
}

Views

318

Translate

Translate

Report

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

}
}

 

 

Votes

Translate

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

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

Votes

Translate

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

Votes

Translate

Translate
LEGEND ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

 

 

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

}
}

 

 

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

 

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

 

 

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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