locked
Uncaught TypeError: Cannot read property 'length' of undefined RRS feed

  • Question

  • User-797751191 posted

    Hi

      I am getting below error

    Uncaught TypeError: Cannot read property 'length' of undefined
        at xb (jquery.dataTables.min.js:39)
        at jquery.dataTables.min.js:37
        at i (jquery.dataTables.min.js:35)
        at Object.success (jquery.dataTables.min.js:35)
        at fire (jquery-1.10.2.js:3062)
        at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
        at done (jquery-1.10.2.js:8249)
        at XMLHttpRequest.callback (jquery-1.10.2.js:8792)
    
    
    $(document).ready(function () {
        $("#tblUser").DataTable({
            "lengthMenu": [3, 5, 10],
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            
            "ajax": {
                //"url": "@Url.Content("~/Users/GetAllUsers")",
                "url": "/Home/List",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Password", "name": "Password", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true }
            ]
        });
    });

    public class HomeController : Controller
    {
    UserDb usrDB = new UserDb();
    public ActionResult Index()
    {
    return View();
    }
    public JsonResult List()
    {
    //ViewBag.CurrentPage = 1;
    //ViewBag.LastPage = Math.Ceiling(Convert.ToDouble(db.Manufacturers.ToList().Count) / 5);
    //return View(db.Manufacturers.Take(5));
    return Json(usrDB.GetAllUser(), JsonRequestBehavior.AllowGet);
    }
    public JsonResult AddUser(User Usr)
    {
    return Json(usrDB.AddUser(Usr), JsonRequestBehavior.AllowGet);
    }
    public JsonResult GetbyName(string UsrName)
    {
    var UserName = usrDB.GetAllUser().Find(x => x.UserName.Equals(UsrName));
    return Json(UserName, JsonRequestBehavior.AllowGet);
    }
    public JsonResult UpdateUser(User Usr)
    {
    return Json(usrDB.UpdateUser(Usr), JsonRequestBehavior.AllowGet);
    }
    public JsonResult DeleteUser(string UsrName)
    {
    return Json(usrDB.DeleteUser(UsrName), JsonRequestBehavior.AllowGet);
    }
    }

    Thanks

    Friday, November 1, 2019 5:08 AM

All replies

  • User-719153870 posted

    Hi jsshivalik,

    I think we have discussed this problem at Uncaught TypeError, it should have been solved, have you tried the solution i provided? Or are you meeting other error after you tried the solution?

    You can check below demo built based on your code using the solution i provided in the last thread which solved the problem:

    cshtml:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>DatatableLengthDemo</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
        <script>
            $(document).ready(function () {
        $("#tblUser").DataTable({
            "lengthMenu": [3, 5, 10],
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
    
            "ajax": {
                "url": "/Demo/List",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Password", "name": "Password", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true }
            ]
        });
    });
        </script>
    </head>
    <body>
        <div>
            <table id="tblUser"></table>
        </div>
    </body>
    </html>

    controller:

    public ActionResult DatatableLengthDemo()
    {
    return View();
    }

    public JsonResult List() { List<user> list = new List<user>(); list.Add(new user() { UserName = "aa", Password = "123",FirstName="a",LastName="a" }); list.Add(new user() { UserName = "bb", Password = "123", FirstName = "b", LastName = "b" }); list.Add(new user() { UserName = "cc", Password = "123", FirstName = "c", LastName = "c" }); return Json(new { data = list }, JsonRequestBehavior.AllowGet); } public class user { public string UserName { get; set; } public string Password { get; set; } public string FirstName { get; set; } public string LastName { get; set; } }

    All you need to do is to change the return Json(usrDB.GetAllUser(), JsonRequestBehavior.AllowGet); in your code to return Json(new { data = usrDB.GetAllUser()}, JsonRequestBehavior.AllowGet);.

    Best Regard,

    Yang Shen

    Friday, November 1, 2019 7:15 AM
  • User-797751191 posted

    Hi

       I have below code. What changes should i made now

    public List<User> GetAllUser()
    {
    connection();
    List<User> UserList = new List<User>();

    SqlCommand com = new SqlCommand("Users", con);
    com.CommandType = CommandType.StoredProcedure;
    com.Parameters.AddWithValue("@Action", "Select");
    SqlDataAdapter da = new SqlDataAdapter(com);
    DataTable dt = new DataTable();

    con.Open();
    da.Fill(dt);
    con.Close();

    foreach (DataRow dr in dt.Rows)
    {
    UserList.Add(
    new User
    {
    UserName = Convert.ToString(dr["UserName"]),
    Password = Convert.ToString(dr["Password"]),
    FirstName = Convert.ToString(dr["FirstName"]),
    LastName = Convert.ToString(dr["LastName"]),
    }
    );
    }
    return UserList;
    }

    Thanks

    Friday, November 1, 2019 7:23 AM
  • User-719153870 posted

    Hi jsshivalik,

    I think in this situation, a better practice would be using SqlDataReader instead of SqlDataAdapter.

    You can refer to below demo and i will highlight the place i updated than the demo in my ealier post:

    cshtml:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>DatatableLengthDemo</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
        <script>
            $(document).ready(function () {
        $("#tblUser").DataTable({
            "lengthMenu": [3, 5, 10],
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
    
            "ajax": {
                "url": "/Demo/List",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Password", "name": "Password", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true }
            ]
        });
    });
        </script>
    </head>
    <body>
        <div>
            <table id="tblUser"></table>
        </div>
    </body>
    </html>

    controller:

    public ActionResult DatatableLengthDemo()
            {
                return View();
            }
    
    public JsonResult List()
            {
                return Json(new { data = GetAllUser() }, JsonRequestBehavior.AllowGet);
            }
    
            public List<Users> GetAllUser()
            {
                List<Users> UserList = new List<Users>();
                using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True"))
                {
                    conn.Open();
                    SqlCommand com = new SqlCommand("UsersSP", conn);
                    com.CommandType = CommandType.StoredProcedure;
                    com.Parameters.AddWithValue("@Action", "Select");
                    SqlDataReader sdr = com.ExecuteReader();
                    if (sdr.HasRows)
                    {
                        while (sdr.Read())
                        {
                            UserList.Add(new Users() { UserName = sdr["UserName"].ToString(), Password = sdr["Password"].ToString(), FirstName = sdr["FirstName"].ToString(), LastName = sdr["LastName"].ToString() });
                        }
                    }
                }
                return UserList;
            }
    
            public class Users
            {
                public string UserName { get; set; }
                public string Password { get; set; }
                public string FirstName { get; set; }
                public string LastName { get; set; }
            }

    sql:

    create table User4Test
    (
    UserName varchar(50),
    Password varchar(50),
    FirstName varchar(50),
    LastName varchar(50),
    )
    
    insert into User4Test values('aa','123','a','a')
    insert into User4Test values('bb','123','b','b')
    insert into User4Test values('cc','123','c','c')
    insert into User4Test values('dd','123','d','d')
    insert into User4Test values('ee','123','e','e')
    
    create proc UsersSP
    @Action varchar(50)
    as
    if @Action='Select'
    begin
    select * from User4Test
    end

    And below is the result:

    Hope this could help.

    Best Regard,

    Yang Shen

    Friday, November 1, 2019 7:55 AM
  • User-797751191 posted

    Hi Yang

       3 is selected in Dropdown but it is showing 5. Secondly Showing o of 0 of 0 entries is also wrong

    Thanks

    Saturday, November 2, 2019 8:30 AM
  • User-719153870 posted

    Hi jsshivalik,

    I'm so sorry haven't seen this problem in time.

    Please remove the "serverSide": true, in your DataTable settings which you can refer to Showing 0 to 0 of 0 entries (filtered from NaN total entries).

    <script>
            $(document).ready(function () {
                $("#tblUser").DataTable({
                    "lengthMenu": [3, 5, 10],
                    "processing": true, // for show progress bar
                    //"serverSide": true, // for process server side
                    "filter": false, // this is for disable filter (search box)
                    "orderMulti": false, // for disable multiple column at once
    
                    "ajax": {
                        "url": "/Demo/List",
                        "type": "POST",
                        "datatype": "json"
                    },
                    "columns": [
                        { "data": "UserName", "name": "UserName", "autoWidth": true },
                        { "data": "Password", "name": "Password", "autoWidth": true },
                        { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                        { "data": "LastName", "name": "LastName", "autoWidth": true }
                    ]
                });
            });
        </script>

    Below is the result of current demo:

    Best Regard,

    Yang Shen

    Monday, November 4, 2019 1:25 AM
  • User-797751191 posted

    Hi Yang

      Still getting same error

    $(document).ready(function () {
        $("#tblUser").DataTable({
            "lengthMenu": [3, 5, 10],
            "processing": true, // for show progress bar
            //"serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                //"url": "@Url.Content("~/Users/GetAllUsers")",
                "url": "/Home/List",
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Password", "name": "Password", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true }
            ]
        });
    
    
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    
    <script src="~/Scripts/jquery-1.10.2.js"></script>  
    <script src="~/Scripts/bootstrap.js"></script>  
    <script src="~/scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/User.js"></script> 
    <script src="~/scripts/jquery-ui-1.10.0.min.js"></script>
    <div class="container">  
    
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New User</button><br /><br />  
        <table id="tblUser" class="table table-striped table-bordered dt-responsive nowrap" width:"100%" cellspacing="0" >  
            <thead>  
                <tr>  
                    <th>  
                        UserName 
                    </th>  
                    <th>  
                        Password  
                    </th>  
                    <th>  
                        FirstName  
                    </th>  
                    <th>  
                        LastName  
                    </th>  
                    <th>
                        Action
                    </th>
                </tr>  
            </thead>  
            <tbody class="tbody">  
      
            </tbody>  
        </table>  
    </div>  
    
    public class HomeController : Controller
        {
            UserDb usrDB = new UserDb();
            public ActionResult Index()
            {
                return View();
            }
            public JsonResult List()
            { 
                //ViewBag.CurrentPage = 1;
                //ViewBag.LastPage = Math.Ceiling(Convert.ToDouble(db.Manufacturers.ToList().Count) / 5);
                //return View(db.Manufacturers.Take(5));
                return Json(usrDB.GetAllUser(), JsonRequestBehavior.AllowGet);
            }
            public JsonResult AddUser(User Usr)
            {
                return Json(usrDB.AddUser(Usr), JsonRequestBehavior.AllowGet);
            }
            public JsonResult GetbyName(string UsrName)
            {   
                var UserName = usrDB.GetAllUser().Find(x => x.UserName.Equals(UsrName));
                return Json(UserName, JsonRequestBehavior.AllowGet);
            }
            public JsonResult UpdateUser(User Usr)
            {
                return Json(usrDB.UpdateUser(Usr), JsonRequestBehavior.AllowGet);
            }
            public JsonResult DeleteUser(string UsrName)
            {
                return Json(usrDB.DeleteUser(UsrName), JsonRequestBehavior.AllowGet);
            }
        }  

    public List<User> GetAllUser()
    {
    connection();
    List<User> UserList = new List<User>();

    SqlCommand com = new SqlCommand("Users", con);
    com.CommandType = CommandType.StoredProcedure;
    com.Parameters.AddWithValue("@Action", "Select");
    SqlDataAdapter da = new SqlDataAdapter(com);
    DataTable dt = new DataTable();

    con.Open();
    da.Fill(dt);
    con.Close();

    foreach (DataRow dr in dt.Rows)
    {
    UserList.Add(
    new User
    {
    UserName = Convert.ToString(dr["UserName"]),
    Password = Convert.ToString(dr["Password"]),
    FirstName = Convert.ToString(dr["FirstName"]),
    LastName = Convert.ToString(dr["LastName"]),
    }
    );
    }
    return UserList;
    }

    Thanks

    Monday, November 4, 2019 8:31 AM
  • User-719153870 posted

    Hi jsshivalik,

    As i mentioned at the beginning, you have to return the correct format of value:

    public JsonResult List()
            { 
                //ViewBag.CurrentPage = 1;
                //ViewBag.LastPage = Math.Ceiling(Convert.ToDouble(db.Manufacturers.ToList().Count) / 5);
                //return View(db.Manufacturers.Take(5));
                return Json(usrDB.GetAllUser(), JsonRequestBehavior.AllowGet);
            }

    This part should be modified like below:

    public JsonResult List()
            {
                return Json(new { data = usrDB.GetAllUser() }, JsonRequestBehavior.AllowGet);
            }

    Please try again now, it should be fixed.

    Best Regard,

    Yang Shen

    Monday, November 4, 2019 8:51 AM
  • User-797751191 posted

    Hi Yang

      Thanks . What is the purpose of new word. secondly i want to know if i comment //"serverSide": true, // for process server side

    then it works fine why so

    $(document).ready(function () {
        $("#tblUser").DataTable({
            "lengthMenu": [3, 5, 10],
            "processing": true, // for show progress bar
            //"serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                //"url": "@Url.Content("~/Users/GetAllUsers")",
                "url": "/Home/List",
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Password", "name": "Password", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true }
            ]
        });
    
    });

    Thanks

    Monday, November 4, 2019 9:55 AM
  • User-719153870 posted

    Hi jsshivalik,

    What is the purpose of new word.

    The ajax has to return a new data object so that the datatable can discriminate the value as the format in its "columns" to show. Just remember it as a fixed format.

    You can debug the program and see the Jsonresult it returns:

    secondly i want to know if i comment //"serverSide": true, // for process server side

    then it works fine why so

    The serverSide:true, means the filtering, paging and sorting calculations are all performed by a server. It will conflict with your current code.

    For more information about this property, please refer to serverSide and Server-side processing.

    Hope the explanation is clear and if so you can mark it as answer.

    For more problems, you are willing to open new threads.

    Best Regard,

    Yang Shen

    Tuesday, November 5, 2019 1:55 AM