We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Uncaught ReferenceError: $ is not defined

I'm using Dropdownlist for sidebar. [uncaught reference error: $isnotdefined] error occurs while utilizing the 'change' attribute of Dropdownlist. 

I would appreciate it if you could provide examples or solutions.


To solve the problem, we copied and used "ej2.min.js" from another normally working project, used "jquery.min.js" in a different version, and changed the location of the code. However, not all methods were a solution.


-------------------------------------------------------------------------------------------

_Layout.cshtml / <head>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TestCAP_1014</title>
    <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" rel='nofollow' href="~/css/site.css" />
    <link rel="stylesheet" rel='nofollow' href="~/css/ej2/bootstrap5.css" />
    <script src="~/js/ej2/ej2.min.js"></script>
</head>
-------------------------------------------------------------------------------------------

_Layout.cshtml / <ejs-dropdownlist> </ejs-dropdownlist>

<div style="padding:0 5px 8px 5px;">
<div class="title" style="margin-left:10px;">JOB NAME</div>
<center>
<ejs-dropdownlist id="DropdownProject" placeholder="Select a Job" index="0" dataSource="@ViewBag.Project" width="250" change="SelectJob">
<e-dropdownlist-fields text="Name" value="Job"></e-dropdownlist-fields>
</ejs-dropdownlist>
</center>
</div>

-------------------------------------------------------------------------------------------

_Layout.cshtml / <script> </script> in <body> 

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<ejs-scripts></ejs-scripts>

-------------------------------------------------------------------------------------------

_Layout.cshtml / <scrip></script>

<script type="text/javascript">
    function SelectJob(job) {
        //localStorage.setItem('selectedJob', job.value);
    }
</script>

-------------------------------------------------------------------------------------------

chrome Debugging
브라우저 디버깅.PNG

Erorr message

에러메세지.PNG


3 Replies

DR Deepak Ramakrishnan Syncfusion Team November 18, 2021 02:52 PM UTC

Hi TaeWook, 
Greetings from Syncfusion support. 
 
We have prepared sample for your reference with dropdownlist for sample for your reference and attached below. Also we request you refer the below documentations for more details. 
 
 
 
Sample Link:  
 
 
Thanks, 
Deepak R. 
 
 
 



MA markaldo February 28, 2022 10:16 AM UTC

There is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or scope. Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.

To solve this error:

Load the jQuery CDN library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .





PO Prince Oliver Syncfusion Team March 1, 2022 06:08 AM UTC

Hi Markaldo, 

Thanks for the information. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon