Question

I am trying to populate a selected menu when the page is created but there are no options that show.

$(document).ready(function() {
$.ajax('patientlist.php', function(data){
    var html = '';
    var len = data.length;
    for (var i = 0; i< len; i++) {
        html += '<option value="' + data[i].patient_id + '">' + data[i].patient_firstname + data[i].patient_lastname + '</option>';}
    $('#patientselect').append(html);
});

});

my patientlist.php

$result = mysql_query("SELECT `patient_id`, `patient_firstname`, `patient_lastname` FROM `patients` WHERE `company_id` = " . $user_data['company_id'] . " ORDER BY `patient_firstname`");

while($row = mysql_fetch_assoc($result)) {

$data[] = $row;

echo json_encode( $data );

}
My result from the php page

[{“patient_id”:”9″,”patient_firstname”:”Adam”,”patient_lastname”:”Steve”}] etc…

Really appreciate any help, been stuck on this for a week!

Answer 1

So, posting again.

First of all, you should put the echo json_encode( $data ); out of your while loop

while($row = mysql_fetch_assoc($result)) {
  $data[] = $row;
}
echo json_encode( $data );

Second, your $ajax syntax isn’t correct, change this to $.post and tell the $.post request you are expecting a 'json' response from patientlist.php

$(document).ready(function() {
  $.post('patientlist.php', {}, function(data){
    /* code */
  }, 'json'); // <= set data type json here
});

When retrieving a valid json string, you can iterate over data by using the $.each method

$.each(data, function(index, patient) {
  console.log(patient.patient_id); // or use patient['patient_id']
});

At least you will now receive a valid request.

Noticing your HTML, do not use .append if it is not a DOM element, you are just building html elements as a string, so use instead

$('#patientselect').html(html);