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));
}
}
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));
}
}
you have to pass "data" or define a variable (eg, dataA) outside the function body.
$('#patients_cbx').empty();
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.
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));
}
}
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...
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('');
Copy link to clipboard
Copied
$('#patients_cbx').empty();
Copy link to clipboard
Copied
you have to pass "data" or define a variable (eg, dataA) outside the function body.