• 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 - Populate ComboBox from MySQL/JSON

Engaged ,
Apr 02, 2022 Apr 02, 2022

Copy link to clipboard

Copied

How do you populate a Combox from MySQL/JSON?

 

Example JSON is :

[{"data":"1","label":"Joe Walsh"},{"data":"2","label":"Don Henley"}]

 

This doesn't work:

 

    $.ajax({
        url: "scripts/get_patients.php"
    }).then(function(data) {
        root.patients_cbx = data;
    })

Views

538

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 2 Correct answers

Community Expert , Apr 03, 2022 Apr 03, 2022

if patients_cb is your combobox and data = 

[{"data":"1","label":"Joe Walsh"},{"data":"2","label":"Don Henley"}]

 use:

 

 

$.ajax({
        url: "scripts/get_patients.php"
    }).then(function(data) {
       assignDataF(data);
    })

 

 

function assignDataF(data){

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

}

Votes

Translate

Translate
Engaged , Apr 04, 2022 Apr 04, 2022

@kglad 

 

Needed to specify the data type in the AJAX...

 

This now works:

 

$.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));
	}
}

Votes

Translate

Translate
Community Expert ,
Apr 02, 2022 Apr 02, 2022

Copy link to clipboard

Copied

did you load the jquery library?

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 02, 2022 Apr 02, 2022

Copy link to clipboard

Copied

@kglad  Yes, I know as I tested by echoing those records into a dynamic text field in Animate.  Also I didn't use JSON for the text fields.

 

Apart from that, all I changed was directing that data to the combobox, instead of the textfield.  

 

I believe the problem is how the JSON is being added to the combobox.

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 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

if patients_cb is your combobox and data = 

[{"data":"1","label":"Joe Walsh"},{"data":"2","label":"Don Henley"}]

 use:

 

 

$.ajax({
        url: "scripts/get_patients.php"
    }).then(function(data) {
       assignDataF(data);
    })

 

 

function assignDataF(data){

for(var i=0;i<data.length;i++){
$('#patients_cb').
append($("<option/>").
attr("value",i).
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 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

@kglad   Thanks.  However I can't get that to work.  The combobox now contain 70 empty options.

 

I can populate a dynamic text field with the same JSON from the same source (get_patients.php).  But not the combobox.

 

$.ajax({
	url: "scripts/get_patients.php"
}).then(function (data) {
	root.test_db.text = data;
})



$.ajax({
	url: "scripts/get_patients.php"
}).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));
	}
}

 

2022-04-04_11-50-49.jpg

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 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

The 70 empty options in the combobox appears to almost equal the JSON length in characters...

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 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

then one of those if's isn't true. what's data?

 

$.ajax({
        url: "scripts/get_patients.php"
    }).then(function(data) {
console.log("**"+data+"**");
       assignDataF(data);
    })

 

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 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

@kglad   

 

2022-04-05_8-18-43.jpg

The code:

 

$.ajax({
        url: "scripts/get_patients.php"
    }).then(function(data) {
console.log("**"+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));
	}
}

 

Combobox patients_cbx is now showing 105 empty select options after I added Glenn Frey to the table...

 

2022-04-05_8-22-00.jpg

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 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

@kglad 

 

Needed to specify the data type in the AJAX...

 

This now works:

 

$.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));
	}
}

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 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

@kglad How do I get the actual data number from the combobox when that item is select in the on change event?

 

The following just gives me the value i=of the selected option in the ComboBox.  Eg if 'Don Henley' is selected, I want to get that record's data number in the JSON.  Or isn't in the Combobox?  Otherwise, how do I get the label?

 

$("#dom_overlay_container").on("change", "#patients_cbx", showPatientDetails.bind(this));

function showPatientDetails(evt) {
alert(evt.target.value);
}

 

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 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Otherwise how should the append part of the code be changed so that the values in the Combobox match the data numbers in the JSON?

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 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

LATEST

Ah, worked it out:

 

function assignDataF(data) {
	for (var i = 0; i < data.length; i++) {
		$('#patients_cbx').append($("<option/>").attr("value", data[i].data).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