Avatar of P1ST0LPETE
Flag for United States of America

asked on 

Populate HTML Select with JSON using JQuery


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 ()
        type: 'POST',
        url: '@Url.Action("GetSubClassifications", "Client")' + '?parentID=' + this.value,
        contentType: 'application/json, charset=utf-8',
        dataType: 'json',
        success: function (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

8/22/2022 - Mon