troubleshooting Question

Populate HTML Select with JSON using JQuery

Avatar of P1ST0LPETE
P1ST0LPETEFlag for United States of America asked on
JavaScriptASP.NET.NET Programming
13 Comments1 Solution1914 ViewsLast Modified:

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


Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros