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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Resolving jQuery multiple references error

Platform: ASP.NET Web Forms |
Control: General |
Published Date: May 13, 2015 |
Last Revised Date: May 9, 2019

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.

 

Error screenshot

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:

Make sure that there are no other references for jQuery file and Syncfusion script files in any other pages. Use these dependent scripts on SiteMaster page.

 

In case the requirement is to refer on individual pages, make sure that there is no conflict of multiple references when the page loads. By default, when creating an application or website using Visual Studio the script reference for jQuery file will be added in the ScriptManager.

 

This solution is applicable for both ASP.NET WebForms and ASP.NET MVC.

 

 

 

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon