Uncaught TypeError: Cannot read property 'val' of undefined

[Ali Ossaily]

Hello Syncfusion team,

I'm trying to initialize ejDropDownList after success ajax call , but I got

Uncaught TypeError: Cannot read property 'val' of undefined        ej.web.all.min.js:10

can I know what is the issue ?

Thank You.

const get_All_Data = () => {

   AjaxHelper(url, 'GET')

        .done(data => {

           $('#' + data .Id ).ejDropDownList({

                dataSource: data,

                fields: { text: "Name", value: "Id" },

                watermarkText: "Select",

                enableFilterSearch: true,

                width: "100%"

            });     

};

[Sharon Sanchez Selvaraj]

Hi Ali, 

 

Thanks for contacting Syncfusion support. 

 

We have checked with your reported query in DropDownList. We have created a sample with AJAX and rendered the DropDownList based on the data returned in the success event. Please check whether the proper input id is mapped to render DropDownList in your code.  

 

Refer to the code snippet: 

 

HTML 

<input type=text id="test" name="test"/> 

jQuery 

<script language="JavaScript"> 

        $( document ).ready(function() { 

            $.ajax({url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers', success: function(result){ 

                var data = result.value; 

                console.log(data); 

                $("#test").ejDropDownList({dataSource:data,fields: { text: "CustomerID", value: "CompanyName" }}); 

            }}); 

        }); 

    </script> 

 

Refer to the sample: 

 

https://jsplayground.syncfusion.com/tmfzkgkb 

 

If the issue persists, please modify the above sample to replicate your scenario else share your complete code block along with returned data so that we can assist you promptly. 

 

Regards, 

 

Sharon Sanchez S. 

[hlipperjohn]

In JavaScript almost everything is an object, null and undefined are exceptions. This error occurs when a property is read or a function is called on an undefined variable. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.

If you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. To avoid getting these types of errors, you need to make sure that the variables you are trying to read do have the correct value. This can be done in various ways. You can do if checks before dealing with objects whose values are bound to change:

if (myVar !== undefined) {

    ...

}

Or

if (typeof(myVar) !== 'undefined') {

    ...

}

[Keerthana Rajendran]

Hi HlipperJohn, 

 

Thanks for the suggestions. Yes, the undefined condition can be checked before execution to avoid these kinds of issues. Please let us know if you have any queries with Syncfusion components.  

 

Regards, 

Keerthana R.