Question

I currently have two dropdownlist boxes on a page. The first is visible when the user enters the page and is loaded with about 12 entries. The other dropdownlist is hidden using styling until a selection is made in the first one. Upon a selection being made, the change event on the first ddl fires off an ajax call to my Controller to get the data needed to populate the second ddl. The ajax call is getting the correct data, so all is good through here.

The trouble comes about when I try to populate the second ddl. Upon returning from Json, jQuery is unable to locate my second ddl. All I get is an “undefined” error that points to when I attempt to dataBind my returned data.

Below is the code.

View

<table width="100%">
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SpecificationAttribute):
        </td>
        <td class="adminData">
            @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute")
        </td>
    </tr>        
    <tr>
        <td class="adminTitle">
            <div class="SAOptions" style="display:none">
                @Html.NopLabelFor(model => model.SpecificationAttributeOption):
            </div>
        </td>
        <td class="adminData">
            <div class="SAOptions" style="display:none">
                @Html.DropDownListFor(model => model.SpecificationAttributeOptions, Enumerable.Empty<SelectListItem>())
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    $("#SpecificationAttribute").change(function () {
        var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val();
        //User selected one of the Specification Attributes
        if (specificationAttributeId != "") {
            //Show the Specification Attribute Options
            $(".SAOptions").show();

            //Load the now showing dropdownlist
            $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) {
                //**************************
                //This is not finding my ddl
                //**************************
                var ddl = $("#SpecificationAttributeOptions").data("tDropDownList");
                alert(ddl != null);
                if (data.length > 0) {
                    //Bind data and reload
                    //********************
                    //Breaks here
                    //********************
                    ddl.dataBind(data);
                    ddl.reload();
                }
            });
        }
        //User selected "Select a Specification Option" for some reason, so hide everything
        else {
            $(".SAOptions").hide();
            $("#divOptions").hide();
        }
});

Controller

public ActionResult ProductBySpecificationAttribute()
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports))
            return AccessDeniedView();

        var model = new SpecificationAttributeReportListModel();
        var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes();
        var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes);
        model.SpecificationAttributes = specificationAttributesModel;

        //Return Model data
        return View(model);
    }

    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId)
    {
        var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId);
        var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions);
        var returnData = new SelectList(specificationAttributeOptionsModel, "Id", "Name");
        return Json(returnData, JsonRequestBehavior.AllowGet);
    }

I have a feeling it’s something simple but I haven’t figured it out yet. I know if I implement a different ddl, it works. However, I want everything to flow together so I’m using this ddl (not by choice but just for sake of consistency across the board).

Any help would be much appreciated.

Kindest Regards,
Chad Johnson

Answer 1

So I came up with my own solution. I replaced the HTML.DropDownList for the secondary ddl with just a plain . This enabled me to build my dropdownlist differently. Here is what I did instead.

View

<table width="100%">
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SpecificationAttribute):
        </td>
        <td class="adminData">
            @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute")
        </td>
    </tr>        
    <tr>
        <td class="adminTitle">
            <div class="SAOptions" style="display:none">
                @Html.NopLabelFor(model => model.SpecificationAttributeOption):
            </div>
        </td>
        <td class="adminData">
            <div class="SAOptions" style="display:none">
                <select id="SpecificationAttributeOptions"></select>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
//Change event for SpecificationAttribute
    $("#SpecificationAttribute").change(function () {
        var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val();
        //User selected one of the Specification Attributes
        if (specificationAttributeId != "") {
            //Show the Specification Attribute Options
            $(".SAOptions").show();

            //Load the now showing dropdownlist
            $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) {
                var ddl = $("#SpecificationAttributeOptions");
                if (data.length > 0) {
                    //Clear data from dropdownlist
                    ddl.html('');

                    //Bind dropdownlist
                    var elements = "";
                    $.each(data, function (id, option) {
                        elements += '<option value="' + option.id + '">' + option.name + '</option>'
                    });
                    ddl.append(elements);
                }
            });
        }
        //User selected "Select a Specification Option" for some reason, so hide everything
        else {
            $(".SAOptions").hide();
        }
    });
</script>

Controller

public ActionResult ProductBySpecificationAttribute()
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports))
            return AccessDeniedView();

        var model = new SpecificationAttributeReportListModel();
        var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes();
        var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes);
        model.SpecificationAttributes = specificationAttributesModel;

        //Return Model data
        return View(model);
    }

/// <summary>
    /// Used to load dropdownlist for SpecificationAttributeOptions
    /// </summary>
    /// <param name="specificationAttributeId">SpecificationAttribute Identifier</param>
    /// <returns>Json data to build dropdownlist</returns>
    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId)
    {
        //Get the SpecificationAttributeOptions for this SpecificationAttributeId
        var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId);
        //Load data into SpecificationAttributeOptionModel
        var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions);
        //Pluck Id and Name from data
        var returnData = (from sao in specificationAttributeOptionsModel select new { id = sao.Id, name = sao.Name }).ToList();
        //Return specific data
        return Json(returnData, JsonRequestBehavior.AllowGet);
    }

Thanks all for the answers and trying to help. I appreciated it. Hopefully this helps someone else that may come across the same issue.