Selecting a value on a dynamically populated dropdown list after the list has been populated

Question

So I have a problem where my code tries to select a value on the dropdown list before the list is populated. Basically it calls a javascript function that does an AJAX post to get the dropdown values from php. Then its supposed to select a value on the list, however it does this before the list is populated, so it doesn't find the value. Any idea on how to fix this?

Heres my code

This is where I get the values for the dropdown list

function getProjects(id, proj_select_class)
{
    custID = id.options[id.selectedIndex].value;

    $.ajax({
        type: "POST",
        url: "index.php/home/projectlist",
        data: {custID : custID},
        dataType: "json",

        success:function (result){                
            var ddl = $(proj_select_class);

            ddl.children('option:not(:first)').remove();              
            for (var key in result) {
                if (result.hasOwnProperty(key)) {
                    ddl.append('<option value=' + key + '>' +  result[key] + '</option>');                              
                }
            }                         
        }

    }); 
}

And heres where I set the values. AddNew() adds a new row to my table. This is also inside an ajax call.

for (var row in result) {
    AddNew();                                                                   

    client_field = document.getElementById('clients'+id);
    project_field = document.getElementById('projects'+id); 

    client_value = $.trim(result[row].client_id);
    project_value = $.trim(result[row].project_id);     

    //set client                        
    client_field.value = client_value;                      

    getProjects(client_field, project_field, client_value);
    project_field.value = project_value;        
}

Answer 1

Maybe try using a custom event binding to know when your code should fetch the value from the list. To bind to a custom event, you would do something like:

$(document).bind("listpopulated", function(){ /*find value, call AddNew() */ });

and in your ajax success function trigger the "listpopulated" event like so:

$(document).trigger("listpopulated");

References:

http://api.jquery.com/bind/

http://api.jquery.com/trigger/

Answer 2

Fixed it by waiting til the ajax finished running by doing this

$(document).ajaxComplete(function(){ set_values(result); });

set_values is another function that I just loops through all my results and sets all the dropdown values