JavaScript in ASPX page triggers "$ is undefined"

Question

I've added some JavaScript code to my ASPX page, and when I navigate to the page I get the following error:

The first part of my ASPX page with JavaScript ... the line starting with $(document).ready ...:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MyProcess.aspx.vb" Inherits="DC.Web.MyProcess" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<link rel="stylesheet" runat="server" media="screen" href="DCStyles.css" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Move-In</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
            document.getElementsByTagName('head')[0].appendChild(script);
        }
    </script>

    <script src="https://myurl/myjavascriptstuff.js" type="text/javascript"></script>
    <script type="text/javascript">

            $(document).ready(function () {
            var fspParameters = {
            authenticationKey: '89234-979AF-kj23987-jkljjh-1123',
            opType: 'Token',
            entryContext: 'WebConsumerInitiated',
            formId: 'token-form',
            nameOnAccountField: 'NameOnAccount',
            zipField: 'Zip'
            };
            fspSetup(fspParameters);
            });

    </script>

</head>
<body>

    <form id="SomeForm" runat="server">

I'm unable to resolve this Webpage Error (unless of course I remove the JavaScript reference). How can I fix this?

What browser/version are you using? That dialog box looks like something out of a fairly old version of IE, and you're referencing jQuery 3.3.1, which I'm pretty sure doesn't have a lot of backward's compatibility. You might need to use jQuery 1.x if you need to support older browsers... — David784, Feb 28 '19 at 22:50
Sounds like a jQuery issue. Check that jQuery is only loaded once. Your ` if (typeof jQuery == 'undefined') {` block is a little unusual as that would normally be used load a local version of jQuery if the CDN is unavailiable, so using the same resource here is a little weird. What happens if you remove the `https://myurl/myjavascriptstuff.js reference and put a simple `console.log("Test")` as the only code in `$(document).ready()` ? If that works there could be something in `https://myurl/myjavascriptstuff.js` that is causing a problem. — Jon P, Feb 28 '19 at 22:58
The Webpage error dialog comes from IE11. I've tried lower JQuery version references but got the same error. Also removed the first two script references (leaving just the 3rd reference that triggers the error) and got the same error. — Rob Ainscough, Feb 28 '19 at 23:10
Per Jon P's suggestion, modified the JS to the following: ... and got the same error ... hmmmm, thoughts? — Rob Ainscough, Feb 28 '19 at 23:16
Possible duplicate of [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — Dale K, Mar 01 '19 at 00:53
Did you remove `https://myurl/myjavascriptstuff.js` first? we are trying to determine if there is something in that file that causes a problem. — Jon P, Mar 01 '19 at 01:14
Seems as if jQurynis not loading. as you are using jquery CDN, have you checkjed your internet connection. Also look at the browser console. are you getting a 404 there for jquery?? — Gagan Deep, Mar 01 '19 at 06:04
The code ought to be moved out of the code snippet. Some starting points are [this meta post](https://meta.stackoverflow.com/questions/271647/stack-snippets-being-misused), [this meta post](https://meta.stackoverflow.com/questions/348648/guideline-on-edits-that-only-add-remove-stack-snippet/348677#348677), [this meta post](https://meta.stackoverflow.com/questions/400895/), and [this meta post](https://meta.stackoverflow.com/questions/410942/can-we-disable-stack-snippets-for-new-users) (I couldn't find the canonical meta question, but it must be somewhere). — Peter Mortensen, Sep 20 '22 at 11:40

score 0 · Answer 1 · edited Sep 20 '22 at 11:29

0

I was able to find a solution. There were a couple of items at play,

Telerik ASP.NET with AJAX controls used an embedded jQuery version which was conflicting. I would need to disable Telerik embedded and specify a jQuery version or ...
Move my JavaScript code down below the Telerik definition ... still in the body section, but after the form section.

edited Sep 20 '22 at 11:29

Peter Mortensen

30,738
21
105
131

answered Mar 04 '19 at 18:10

Rob Ainscough

576
5
14

JavaScript in ASPX page triggers "$ is undefined"

1 Answers1