Question

Initially when the page loads, ajax populates a selectmenu. When I enter new patient information it is added to the database but the patient selectmenu does not get append to/refresh with that new patient being selected.

I was hoping someone could help me with what Im doing wrong.

Ajax call

$('#newpatient').click(function() {
    var patientadd = $('#patientaddform').serializeArray();
    $.ajax({
        url: 'patientadd.php',
        type: "POST",
        data: patientadd,
        dataType: 'json',
        success: 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);
        },
        complete: function() {
            $('#patientselect').selectmenu('refresh', true);
        }
    });
});​

patientadd.php

if (empty($_POST) === false) {
    $update_data = array('company_id' = > $_POST['company_id'], 'addpatient_firstname' = > $_POST['addpatient_firstname'], 'addpatient_lastname' = > $_POST['addpatient_lastname'], 'addpatient_dob' = > $_POST['addpatient_dob'], 'patient_added' = > $_POST['patient_added']);


    $required_fields = array('company_id', 'addpatient_firstname', 'addpatient_lastname', 'addpatient_dob', 'patient_added');
    foreach($update_data as $key = > $value) {
        if (empty($value) && in_array($key, $required_fields) === true) {
            $errors[] = 'Fields marked with an asterisk are required';
            break 1;
        }
    }
}

if (empty($_POST) === false && empty($errors) === true) {

    $company_id = $_POST['company_id'];
    $patient_id = $_POST['addpatient_id'];
    $first_name = $_POST['addpatient_firstname'];
    $last_name = $_POST['addpatient_lastname'];
    $dob = $_POST['addpatient_dob'];
    $updated = $_POST['patient_added'];


    $update = array();
    array_walk($update_data, 'array_sanitize');

    foreach($update_data as $field = > $data) {
        $update[] = '`'.$field.'` = \''.$data.'\'';
    }

    mysql_query("INSERT INTO `lab`.`patients` (`company_id`,  `patient_id`, `patient_firstname`, `patient_lastname`, `patient_dob`, `patient_added`) VALUES ('$company_id', NULL, '$first_name', '$last_name', '$dob', '$updated')");
    $patient_id = mysql_insert_id(); /*echo '<strong>' . $patient_id . ' ' . $first_name . ' ' . $last_name . '</strong> has been added!';*/
}

$data = array('patient_id' = > $patient_id, 'patient_firstname' = > $first_name, 'patient_lastname' = > $last_name);
echo json_encode($data);

Answer 1

Move you code from complete to the success function.

$('#newpatient').click(function() {
    var patientadd = $('#patientaddform').serializeArray();
    $.ajax({
        url: 'patientadd.php',
        type: "POST",
        data: patientadd,
        dataType: 'json',
        success: 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);
            $('#patientselect').selectmenu('refresh', true);
        },
        complete: function() {
            //$('#patientselect').selectmenu('refresh', true);
        }
    });
});​

Ajax executes is asynchronous. The success method only executes ones the request returns. However, ones success is triggered, so is complete. This means you end up in a race-condition in which complete executes before success is finished executing. Complete does not wait for success to finish. success and complete pretty much execute simultaneously.

To ensure your refresh call includes the new data execute refresh within the success following the append.