How to resolve the "JavaScript runtime error : '$' is undefined" with the Syncfusion controls?

1 min read

Problem

JavaScript runtime error: ‘$’ is undefined

Runtime error

Figure 1: JavaScript runtime error: ‘$’ is undefined

Reason

The error arises when jQuery script file is not referred in the corresponding web application.

Solution

To resolve the error on undefined ‘$’, add jQuery script to the application and refer to the script files in the required page. In order to render the Syncfusion ASP.NET controls, refer to the dependent jQuery scripts and the Syncfusion specific script files.

Refer to the base jQuery script before the Syncfusion scripts, as “ej.web.all.min.js” and other EJ scripts depend on jQuery script file. Ensure the order of adding script references to avoid errors with dependent script files.

Now, the references for required files in Site.Master page is added. Refer to the following code example.

Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ProjectName.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <%--Required CSS references for Syncfusion control rendering--%>
    <link href="Content/ej.widgets.core.min.css" rel="stylesheet" />
    <link href="Content/flat-lime/ej.theme.min.css" rel="stylesheet" />
    <%--Required script references for ASP.NET controls--%>
<%--Refer the base jquery script before referring all other script files--%>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script src="Scripts/jquery.easing-1.3.min.js"></script>
        <script src="Scripts/jquery.globalize.min.js"></script>
        <script src="Scripts/ej/ej.web.all.min.js"></script>
        <script src="Scripts/ej/ej.webform.min.js"></script>    
</head>
<body>
    <%--Your body content here--%>
</body>
</html>

Did you find this information helpful?

Yes

Comments (0)

Please sign in to leave a comment