Avatar of P1ST0LPETE
P1ST0LPETE
Flag for United States of America

asked on 

Populate HTML Select with JSON using JQuery

Experts,

I'm using ASP.NET MVC 3 (Razor), and JQuery.  I'm trying to dynamically populate a drop down list (html select) using jquery ajax that fetches json from the server.  However, the error function in the jquery ajax is displaying the following message:

Status: 200
Text: parsererror
Error: jQuery15105500066302597657_1305650239563 was not called

I know my web method on the server is being hit and returning data, I'm just not sure if it's in the proper format.  Using Firebug I can see that the data coming back from the server looks like this:

[
    {"value":353,"text":"15: Building Construction General Contractors And Operative Builders"},
    {"value":354,"text":"16: Heavy Construction Other Than Building Construction Contractors"},
    {"value":355,"text":"17: Construction Special Trade Contractors"}
]

Below is my code.  Can you tell me where I'm going wrong?  Thanks.

MVC Method:
 
public ActionResult GetSubClassifications(long parentID)
{
    AssetManager assetManager = new AssetManager();
    var list = assetManager.GetCodeValues(Domain.Enum.CodeValueType.ClientIndustrySubClassification, parentID);

    ArrayList array = new ArrayList();

    foreach (CodeValue item in list)
    {
        array.Add(new { value = item.CodeValueID, text = item.Description });
    }

    return Json(array);
}

Open in new window



JQuery AJAX Call:
 
$('select[name="Client.IndustryClassificationCode"]').change(function ()
{
    $.ajax
    ({
        type: 'POST',
        url: '@Url.Action("GetSubClassifications", "Client")' + '?parentID=' + this.value,
        contentType: 'application/json, charset=utf-8',
        dataType: 'json',
        success: function (responseData)
        {
            //alert(responseData);
            var select = $('select[name="Client.IndustrySubClassificationCode"]');
            var options = select.attr('options');

            //clear all current options from subclass select:
            $('option', select).remove();

            //populate subclass select with new options:
            $.each(responseData, function (index, item)
            {
                options[options.length] = new Option(item.text, item.value);
            });
        },
        error: function (xhr, textStatus, errorThrown)
        {
            alert('Status: ' + xhr.status + '\nText: ' + textStatus + '\nError: ' + errorThrown);
        }
    });
});

Open in new window

JavaScriptASP.NET.NET Programming

Avatar of undefined
Last Comment
P1ST0LPETE

8/22/2022 - Mon