Calling a function on JQUERY success

Question

I have a custom function that I have defined and then I subsequently call when the the page loads. I need the function to run when the page loads because it is populating a group selectlists:

<!---Populate Custom Service Description select lists --->           
<script type="text/javascript">
function PopulateSelectLists(){
    // Important: Must append the parameter "&returnformat=json"
    $.ajax({
       url: 'cfcs/get_descriptions.cfc?method=getDescriptions&returnformat=json'
       , dataType: 'json'
       , success: function(response){
           $.each(response.DATA, function(I, row){
            // get value in first column ie "description"
            var description = row[0];

            // append new option to list
            $("#descriptionDD1").append($('<option/>', { 
                    value: description,
                    text : description 
            }));
            $("#descriptionDD2").append($('<option/>', { 
                    value: description,
                    text : description 
            }));
            $("#descriptionDD3").append($('<option/>', { 
                    value: description,
                    text : description 
            }));
            $("#descriptionDD4").append($('<option/>', { 
                    value: description,
                    text : description 
            }));
        });
       },
       error: function(msg){
           console.log(msg);
       }
    })
}
$(document).ready(PopulateSelectLists); 
</script>

I am trying to call my custom function PopulateSelectLists() when another AJAX call successfully completes so I can refresh my selectlists but it never seems to call my function:

<!---Script to add new description to DB --->
<script>
$(function(){
//Add a new note to a link
$("#addDescriptionForm").submit(function(){
   // prevent native form submission here
        $.ajax({
            type: "POST",
            data: $('#addDescriptionForm').serialize(),
            url: "actionpages/add_descriptions_modal.cfm",
            success: function() {
              PopulateSelectLists(); //Call Function to refresh selectlist  
              $("#addDescriptionResponse").append( "Successfully added description." );

              }    
        });
        return false;           
    });
});
</script>

Where am I going wrong here?

Answer 1

In the problematic case, does the request actually return successfully? Inspect the response with Firebug or Fiddler or whatever dev toolbar you are using. It may be that there is a server error, a connection error, or any other reason that can drop the request, so it is not successful.

You can also look into using the complete handler: http://api.jquery.com/jquery.ajax/ .