ASP.NET JQuery - jQuery.Deferred exception: $ is not a function

Question

I am not that experienced with JQuery, so maybe this is a stupid mistake. However, this has been bugging me for a while and nothing seems to work.

No third party JQuery scripts seem to work in my website (ASP.NET Webforms). Specifically, I am trying to make Owl Carousel work.

So this is how I load scripts and css in Head (In MasterPage):

<link href="../Content/style.css" rel="stylesheet" />
<link href="../Content/social.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveClientUrl("~/Content/js/owl.carousel.min.js") %>"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveClientUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveClientUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />


<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>

<link href="../img/icons/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />

I made sure to load Jquery first and then any other plugins. This is my HTML (in Content page):

<div class="owl-carousel">
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        console.log("in");
        $(".owl-carousel").owlCarousel();
    });
</script>

Whatever I do, I get this error:

I googled a lot for it, still with no luck. I tried many plugins and always end with the same error.

Check a) the rendered html, not the source .aspx b) the browser network tab for any errors (most likely when it's trying to load the owl.carousel.min.js). You are loading jquery ok, but getting it from external site, not your local content. — freedomn-m, Jul 06 '18 at 08:04
@SudhirOjha I already tried what was suggested there. According to the dev tools, the script is loading fine (200 OK) — JackMini36, Jul 06 '18 at 08:06
@freedomn-m I am checking the network tab and the console tab. According to the network tab, the script is loading fine. In the console, I get the warning I posted in my question — JackMini36, Jul 06 '18 at 08:07
Well there's some shenanigans, because your error is `jquery-3.0.0` but your include is `3.3.1` - so the error and the include files do not match. Could your page be loading a different version of jquery after the master page's one and thus deleting the owl include? — freedomn-m, Jul 06 '18 at 08:36
@freedomn-m You are right! Jquery seems to be loaded twice. I found it in my NuGet packages and it was 3.0.0. However, I cannot find where it is loaded from. Could it be Bootstrap loading it somewhere? I used the ASP.NET sample website, which I edited to create my website if that makes a difference — JackMini36, Jul 06 '18 at 08:44
Just need to view the rendered html (open in browser, view source). If it's not there, then it will be in one of your bundles. — freedomn-m, Jul 06 '18 at 10:13

score 1 · Answer 1 · answered Jul 06 '18 at 08:15

I think you are pointing the wrong path to owlCarousel

You should reconsider:

ResolveUrl creates the relative URL to the root.

ResolveClientUrl creates the relative URL to the current page.

I think you should use ResolveUrl instead of ResolveClientUrl to get the correct path.

The code will look like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveUrl("~/Content/js/owl.carousel.min.js") %>"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />

Still the same warning appears, and the plugin is not working — JackMini36, Jul 06 '18 at 08:18
You can open chrome developer tools on the chrome browser, then on the elements tab you can see the generated html code, where you will see the path to the owlCarousel js file. Make sure it's the correct path. — Tran Audi, Jul 06 '18 at 08:23
Have you tried following this link yet? https://stackoverflow.com/questions/21661292/typeerror-owlcarousel-is-not-a-function — Tran Audi, Jul 06 '18 at 08:32

score 1 · Accepted Answer · answered Jul 06 '18 at 10:52

In case people with the same problem come across this:

So the problem, as stated by freedomn-m, was that JQuery was loaded twice. ASP.NET sample website had a scriptmanager that referenced JQuery (Loaded from NuGet by default) without me knowing.

<asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <%--<asp:ScriptReference Name="jquery" />--%>
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
</asp:ScriptManager>

I just commented the JQuery reference, and everything worked as expected.

ASP.NET JQuery - jQuery.Deferred exception: $ is not a function

2 Answers2