Error on binding Select DropDown using JSON Result from Data Base

Question

<select id="DdlModule" class="form-control input-sm "> </select>

Jquery Code to BInd Ddl Module

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Job/GetModules",
    data: "{}",
    dataType: "json",
    success: function (Result) {
            $("#DdlModule").append("<option value='0'>---Select---</option>");
            $.each(Result.d, function (key, value) {
                $("#ddlmodule").append($("<option></option>").val(value.modId).html(value.modName));
            });
    },
    error: function (Result) {
        alert("Error");
    }
});

Here is my Controller Action

public JsonResult GetModules()
{
    var Query = "EXEC [dbo].[Usp_ComboBind] @TableName='Module'";
    List<Usp_ComboBind_Module> objModule = objDbContext.Database.SqlQuery<Usp_ComboBind_Module>(Query).ToList();
    return Json(objModule, JsonRequestBehavior.AllowGet);
}

Error

Error:jquery-1.10.2.min.js:21 Uncaught TypeError: Cannot read property 'length' of undefined

Not related, but delete the pointless contentType and data attributes, and there is no need for JsonRequestBehavior.AllowGet if your making a POST — user3559349
– user3559349, Commented Aug 16, 2018 at 7:58
Use $.each(Result, function (key, value) { (not Result.d) — user3559349
– user3559349, Commented Aug 16, 2018 at 8:11
thank you code works after changed to Result Instead of Result.d — Fazil Basheer
– Fazil Basheer, Commented Aug 16, 2018 at 11:03

Tetsuya Yamamoto · Accepted Answer · 2018-08-16 08:17:12Z

Since you're using type: "POST" in AJAX callback, make sure that HttpPostAttribute attribute included in controller action method like this:

[HttpPost]
public JsonResult GetModules()
{
    var Query = "EXEC [dbo].[Usp_ComboBind] @TableName='Module'";
    List<Usp_ComboBind_Module> objModule = objDbContext.Database.SqlQuery<Usp_ComboBind_Module>(Query).ToList();
    return Json(objModule);
}

And then put a check against undefined inside success result before iterating Result function parameter:

success: function (Result) {
    if (typeof Result !== 'undefined' && Result != undefined) {
        $("#DdlModule").append("<option value='0'>---Select---</option>");
        $.each(Result, function (key, value) {
            $("#ddlmodule").append($("<option></option>").val(value.modId).html(value.modName));
        });
    }
},

Note: Cannot read property 'length' of undefined occurs because you're trying to iterate an object which has undefined value, since $.each expects an array or collection object.

Collectives™ on Stack Overflow

Error on binding Select DropDown using JSON Result from Data Base

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related