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=".10.1/jquery.min.js" ></script>
<script type="text/javascript" src=".1/hosted/office.js"></script>
<!-- For more information on Office UI Fabric, visit . -->
<link rel="stylesheet" href=".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-wele ms-Fabric">
<header class="ms-wele__header ms-bgColor-neutralLighter">
<img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
<h1 class="ms-font-su">Wele to your Email Security Assistant</h1>
</header>
<section id="sideload-msg" class="ms-wele__main">
<h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
</section>
<main id="app-body" class="ms-wele__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>
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./ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://appsforoffice.microsoft./lib/1.1/hosted/office.js"></script>
<!-- For more information on Office UI Fabric, visit https://developer.microsoft./fabric. -->
<link rel="stylesheet" href="https://static2.sharepointonline./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-wele ms-Fabric">
<header class="ms-wele__header ms-bgColor-neutralLighter">
<img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
<h1 class="ms-font-su">Wele to your Email Security Assistant</h1>
</header>
<section id="sideload-msg" class="ms-wele__main">
<h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
</section>
<main id="app-body" class="ms-wele__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>
var $ = global.jQuery
– num8er
Commented
Jun 27, 2020 at 1:51
Check Handling code which relies on jQuery before jQuery is loaded . It will solve your problem. Because your jquery is loaded. So t is remended 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.