Getting Uncaught ReferenceError: $ is not defined for jquery

Question

I am trying to call a local api I am testing. I am getting a Uncaught ReferenceError: $ is not defined on the call. Here is the JS and html. Is there something I am missing with defining the query within the .js file? It was working before I did some refactoring I am not sure if I deleted something I need and didnt even notice it.

taskpane.js

function domainWhois(domain){
   var apiurl = 'http://localhost:5000/linkcheck';
   console.log("entering domainWHois");
   var request = {"link": domain};
   $.ajax({
    url: apiurl,
    method: 'POST',
    type: 'json',
    data: JSON.stringify(request),
    contentType: 'application/json',
    crossDomain: true
  }).done(
    function(data){
    console.log("successfully called API");
    console.log(JSON.stringify(data));
  }).fail(function(error){
     console.log("api call failed");
     console.log(JSON.stringify(error));
  });
}

Here is the HTML set up

!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>
        <!-- Office JavaScript API -->
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

    <!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
    <!-- AJAX-->
    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
    <script src="taskpane.js" type="text/javascript"></script>
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
        <h1 class="ms-font-su">Welcome to your Email Security Assistant</h1>
    </header>
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
    </section>
    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <div>
            <h2>Secuirty Checks</h2>
                <h3>Attachments</h3>
                    <p><label id="attachment-count"></label></p>            
                    <p><label id="attachment-msg"></label></p>
                <h3>Embedded Links</h3>
                    <p id="linkCheck"></p>
                <h3>Header Checks</h3>
                <p><label id="reply-match"></label></p>
                <p><label id="dkimspfchk"></label></p>
                <p><label id="domainMatch"></label></p>
        </div>
    </main>
</body>
</html>

add in taskpane.js at very first line: `var $ = global.jQuery` — num8er, Jun 27 '20 at 01:51
also I suspect that jquery.min.js is not loaded, so try to open it: https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js and save as local file and attach in html. — num8er, Jun 27 '20 at 01:54
I think that your script before your jQuery is loaded, read the anwers on this question : https://stackoverflow.com/questions/8298430/handling-code-which-relies-on-jquery-before-jquery-is-loaded — Mehdi Fracso, Jun 27 '20 at 01:56
Also it is recommended to put external scripts imports before the closing body tag, it allows asynchronous loading while the loading in the head tag is a blocking synchronous loading. — Mehdi Fracso, Jun 27 '20 at 01:57

score 2 · Accepted Answer · answered Jun 27 '20 at 03:39

Check Handling code which relies on jQuery before jQuery is loaded . It will solve your problem. Because your jquery is loaded. So t is recommended to put external scripts imports before the closing body tag, it allows asynchronous loading while the loading in the head tag is a blocking synchronous loading.

Getting Uncaught ReferenceError: $ is not defined for jquery

1 Answers1