Resolving jQuery multiple references error in ASP.NET Web Forms.
The error Uncaught TypeError: $(...).ej< component > is not a function arises when referring to the JQuery scripts multiple times in the corresponding web application or when jQuery script files are referred to after the Syncfusion script files, ej.web.all.min.js and ej.webform.js.min. The following screenshot shows the error occurs in the dialog component.
Figure 1: Uncaught TypeError: $(...).ejDialog is not a function error
To overcome this error, refer to the jQuery scripts in the application only once or refer to the Syncfusion specific script files after the jQuery file reference. The following are the solutions:
Solution 1
Create a web application in Visual Studio and the jQuery scripts configure automatically in the ScriptManager section. In case of using the script, references generated from the VS project creation under ScriptManager, add the manual references to other dependent scripts for rendering control after the jQuery base reference.
Syncfusion has added references to the required files in the Site.Master page under the ScriptManager. Refer to the following code:
Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs"
Inherits="ProjectName.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/ej/flat-lime/ej.web.all.min.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<%--Other script references generated on project creation --%>
<asp:ScriptReference Path="~/Scripts/jquery.easing.1.3.min.js" />
<asp:ScriptReference Path="~/Scripts/jquery.globalize.min.js" />
<asp:ScriptReference Path="~/Scripts/ej/ej.web.all.min.js" />
<asp:ScriptReference Path="~/Scripts/ej/ej.webform.min.js" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
</form>
</body>
</html>
Solution 2
Add the Syncfusion scripts and jQuery scripts in bundle configuration in the App_Start folder and refer to the bundles in the Site.Master page. Refer to the following code for bundleconfig and references.
BundleConfig.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.UI;
namespace ProjectName
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// Bundles available on VS project creation.
// Adds bundles for jQuery scripts
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/jquery.easing-1.3.min.js",
"~/Scripts/jquery.globalize.min.js"));
// Bundles for Syncfusion scripts.
bundles.Add(new ScriptBundle("~/bundles/SyncScripts").Include(
"~/Scripts/ej/ej.web.all.min.js",
"~/Scripts/ej/ej.webform.min.js"));
}
}
}
SiteMaster
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ProjectName.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%-- Referred bundles for jQuery and Syncfusion scripts --%>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/SyncScripts") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/ej/flat-lime/ej.widgets.all.min.css" rel="stylesheet" />
</head>
<body>
<%-- Form and Body content for the web page --%>
</body>
</html>
Note:
A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.
The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.
You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
