How to resolve the "JavaScript runtime error : '$' is undefined" with the Syncfusion controls?
Problem
JavaScript runtime error: ‘$’ is undefined
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>