Skip to main content
Inspiring
April 2, 2022
Answered

HTML5 Canvas - Populate ComboBox from MySQL/JSON

  • April 2, 2022
  • 1 reply
  • 1010 views

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;
    })
    This topic has been closed for replies.
    Correct answer FlatChat

    @kglad   

     

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

     


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

    1 reply

    kglad
    Community Expert
    April 2, 2022

    did you load the jquery library?

    FlatChatAuthor
    Inspiring
    April 2, 2022

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

    kglad
    Community Expert
    April 3, 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));
    }

    }