I'd like to hookup jQuery in my application to use along side with Dojo just to be able to use animations and a few other styling type of things on my map layout, but am unsure of what the best practice is. I am wondering if someone could give me a quick guide on how to hook up jQuery, via CDN?
Following along with the documentation here, this is what I have so far. I'm just unsure it'll work. I'm also not sure if I should encapsulate my entire javascript code in the jQuery() function or if I should only encapsulate those things that actually use jQuery. The example makes it seem like you should put everything in there, so that way you know that the page isn't doing anything before jQuery is ready. Is that sound logic?
I have tried the below code, and while I don't get any errors in the browser console, the basemap loads really weird. It loads all the labels, but none of the imagery until I zoom in a level, then it rights itself and the imagery shows up: enter image description here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
//more styles
</style>
<script>
require([
"esri/map",
"dojo/parser",
"dojo/domReady!"
],
function(
Map,
parser
) {
parser.parse();
var map = new Map("map", {
basemap: "hybrid",
center: [-90.603281, 36.241294],
zoom: 5
});
on(map, "load", function(){
$(document).ready(jQuery);
});
function jQuery(){
//rest of my application goes here
});
});
2 Answers 2
I think the main issue is that with the particular versions of dojo, jQuery, and jQuery-UI you're using, there's a loading issue where you need to load jQuery-UI first. Here is a sample of your code working.
@GavinR is correct as is @Corina on the StackOverflow answer @GavinR referenced. jQuery and jQuery UI should be loaded prior to the JavaScript API and Dojo. One way is to load jQuery and jQuery UI in the head and the JavaScript API at the bottom of the HTML page. Another approach would be to create JavaScript modules, which use dependencies to maintain load order.
I've created a working example that does exactly as @Corina describes to fix the issue: JS Fiddle Example
Here's the all code inline in a single file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<div id="map">
</div>
<script src="https://js.arcgis.com/3.23/"></script>
<script type="text/javascript">
require([
"esri/map",
"dojo/domReady!"
],
function(
Map
) {
var map = new Map("map", {
basemap: "hybrid",
center: [-90.603281, 36.241294],
zoom: 5
});
map.on("load", function() {
mapReady();
});
function mapReady() {
};
});
</script>
</body>
</html>
-
I actually discovered my issue was completely unrelated to the load order and instead was about not having an HTML element written for something I had JS written for, but I'm marking your answer correct as I can see how it would fit the question I asked! I have since switched the load order and everything is working well.MKF– MKF2018年05月03日 15:41:11 +00:00Commented May 3, 2018 at 15:41
-
Glad you've worked out the issue. Cheers!iCode– iCode2018年05月03日 16:49:47 +00:00Commented May 3, 2018 at 16:49
-
I sure would love to know why this was downvoted. This answer, including a jsFiddle example, works!iCode– iCode2018年09月07日 16:26:30 +00:00Commented Sep 7, 2018 at 16:26