topic Re: versioning of dojo. in ArcGIS JavaScript Maps SDK Questions

versioning of dojo.

DorothyMortenson — Tue, 10 Dec 2013 17:19:47 GMT

I have made two applications that I want to combine.
The first was a test to develop the web map I want. I use the

<script src="http://js.arcgis.com/3.7/"></script>

The second is one that I developed with the dijit/layout/BorderContainer, ContentPane, TabContainer, TabController, AccordionContainer. In other words, the second has all of the panels laid out. Looks nice. It uses

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>

I have also tried it with

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

Both work.

When I try to put even a simple map into the second application, and have to add the

<script src="http://js.arcgis.com/3.7/"></script>

, the layout goes bad, like it doesn't know what to do with the containers.

Any suggestions?
Dorothy

Re: versioning of dojo.

SteveCole — Tue, 10 Dec 2013 17:46:08 GMT

If they both "work" then that would lead me to believe that ESRI's dojo CSS styling is overwriting what's found in the default CSS dojo styling that comes when using the googleapi.

I guess one way to verify this is examine the CSS properties of the same dojo pane in your googleapi dojo version and the ESRI hosted dojo version. In Firebug or Chrome's web developer tool, you should not only be able to see what CSS properties are being applied to the element, but also what styles would have applied to the element if they weren't being overridden. The CSS properties that are being overridden are usually shown with a strikethrough font style in the inspector.

Another possibility is that the Dojo found in the googleapi path is more current than the Dojo that's bundled with v3.7 of the API. I get the sense that v3.8 is due to be released "soon" so you may also try updating your reference to that once it gets released and see if that solves your problem.

Giood luck!
Steve

Re: versioning of dojo.

DorothyMortenson — Sun, 12 Dec 2021 07:06:07 GMT

Thanks for the response.

I think I found part of the issue.

I had originally used
<link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.8.5/dijit/themes/claro/claro.css">

Then I switched to:
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css" >

That seemed to help with the libraries.

Now I cannot add a map. Within the html, I added a simple map:

<script>
var map; 
 require([
      "esri/map", 
      "dojo/domReady!"
    ], function(
      Map
    )  {

      map = new Map("map", {
        center: [-70.6508, 43.1452],
        zoom: 16,
        basemap: "topo"
      });
      
});

</script> -->

Now I get an error of:

Error: scriptError
c()dojo.js (line 15)
q.injectUrl/g<()

Re: versioning of dojo.

SteveCole — Tue, 10 Dec 2013 18:57:13 GMT

Have you also added in the reference to ESRI.CSS?

[HTML]<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">[/HTML]

It's also required.

Re: versioning of dojo.

DorothyMortenson — Sun, 12 Dec 2021 07:06:10 GMT

Thank you. Yes. I do have it included. I apologize for my brevity.
Here's what I have included in the head:

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>WR Map Template</title>
  
<meta name="description" content="OWRD Water Rights Map Tool" />
<meta name="keywords" content="owrd, water rights, water" />
<meta name="author" content="D. Mortenson" />

<!-- VIEWPORT ====================================================================== -->
 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  
 <!-- SET THE STYLES ----------------------------------- -->
        <link rel="stylesheet" href="css/css_prod/normalize.css"> 
 <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css" >
        <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
 <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">
 <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/layout/resources/FloatingPane.css">

 <link rel="stylesheet" href="css/demo.css" >
 <link rel="stylesheet" href="css/style_simple.css" >


<!-- JQUERY ============================================================= -->

<script src="http://js.arcgis.com/3.7/"></script> 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js" defer></script>
 <script type="text/javascript">
        var dojoConfig = {
            parseOnLoad: true,
            isDebug: true,
            locale: 'en-us',
            extraLocale: ['ja-jp']
        };
</script> 
 
 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script> 

<script type="text/javascript" src="js/search_wr_trs_ll.js"></script>
<script type="text/javascript" src="js/grid_wr_pod_pou.js"></script>
<script type="text/javascript" src="js/my_scripts.js"></script> -


<script>
var map; 
 require([
      "esri/map", 
      "dojo/domReady!"
    ], function(
      Map
    )  {

      map = new Map("map", {
        center: [-70.6508, 43.1452],
        zoom: 16,
        basemap: "topo"
      });      
});
</script> 

</head>

Here's whats in my_script.js:

require(["dojo/parser", 
"dojo/ready", 
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/TabController"], 
function(parser, ready){
 ready(function(){
  parser.parse();
 });
});

Re: versioning of dojo.

SteveCole — Tue, 10 Dec 2013 19:42:02 GMT

In the code you just posted, you left out some key characters in a URL path:

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

Re: versioning of dojo.

DorothyMortenson — Sun, 12 Dec 2021 07:06:13 GMT

I'm afraid that didn't make a difference.

I changed the map script to be all inclusive with the containers and the map.

<script>
require(["esri/map", 
"dojo/parser", 
"dojo/_base/declare", 
"dojo/_base/config",
"dojo/dom", 
"dojo/on",
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/TabController",
"dojo/domReady!"], 
function(Map, 
 parser, 
    declare,
    config,
    dom,
    on
){

     var map = new Map("map", {
        center: [-118.8, 43.5],
        zoom: 7,
        basemap: "topo"
      });
});

</script>

The error I get is:
Error: defineAlreadyDefined
https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js
Line 15

Chrome says:

Error {src: "dojoLoader", info: 0} dojo.js.uncompressed.js:1
(anonymous function) dojo.js.uncompressed.js:1
(anonymous function) dojo.js.uncompressed.js:476
f dojo.js.uncompressed.js:209
q.signal dojo.js.uncompressed.js:473
async dojo.js.uncompressed.js:1
(anonymous function) dojo.js.uncompressed.js:1955
Resource interpreted as Script but transferred with MIME type text/plain: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=json&callback=dojo.io.script.jsonp_dojoIoScript1._jsonpCallback". init.js:1035
XMLHttpRequest cannot load http://services.arcgisonline.com/ArcGIS/rest/info?f=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access. container_template_seperate.html:1

It seems to matter which comes first:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script> 
 <script type="text/javascript" src="http://js.arcgis.com/3.7/"></script>

if the js.arcgis.com is listed second, I get errors saying it's not a "text/javascript". If I take that out, then I still get the same message.

If I reverse the order, then I get the errors I listed above.

Re: versioning of dojo.

JohnathanBarclay — Wed, 11 Dec 2013 06:28:11 GMT

Dojo 1.9.1 is included as part of JS API 3.7, so you only need to include:

<script src="http://js.arcgis.com/3.7/"></script>

and all should work fine.

Re: versioning of dojo.

DorothyMortenson — Sun, 12 Dec 2021 07:06:15 GMT

Right you are!

We're getting closer.

Now I think it has something to do with the parser and the dojo/ready. I must be missing something obvious.

What works (with no map):

require(["dojo/parser", 
"dojo/ready", 
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/TabController"], 
function(parser, ready){
 ready(function(){
  parser.parse();
 });
});

I've tried various options. Sounds like dojo/ready is good if you will be using widgets (and I will). dojo/domReady! is AMD, which I am trying to do as well. In either case, I can't seem to get it right. What I've tried with adding the map is:

var map;
require(["dojo/parser", 
"esri/map",
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/TabController",
"dojo/domReady!"], 
function(parser, Map){
map = new Map("map", {
        center: [-70.6508, 43.1452],
        zoom: 16,
        basemap: "topo"
      });
});

Re: versioning of dojo.

DorothyMortenson — Sun, 12 Dec 2021 07:06:18 GMT

I take that back. I still think there is some thing different between
<script type="text/javascript" src="http://js.arcgis.com/3.7/"></script>

and

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

Here is a bare bones borderContent. It works with the googleapis, but not with the arcgis verson.
This is with the googleapis. switch the commented out arcgis and it wont work.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <title>WR Map Template</title>
  
        <meta name="description" content="OWRD Water Rights Map Tool" />
        <meta name="keywords" content="owrd, water rights, water" />
        <meta name="author" content="D. Mortenson" />
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
 
 <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
 <!-- <script type="text/javascript" src="http://js.arcgis.com/3.7/"></script> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script> 

<style>
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow:hidden;
}
#borderContainer{
 width: 90%;
 height: 90%;
 border: solid;
 padding: 10px;
 background-color:#0000FF;
}

</style>

<script>
 require(["dojo/parser", 
"dojo/ready", 
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/TabController"], 
function(parser, ready){
 ready(function(){
  parser.parse();
 });
});
 
</script>


        
</head>
<body class="claro">


<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 100px;"> leading pane</div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">center pane</div>
</div>




</body>
</html>

Re: versioning of dojo.

KellyHutchins — Thu, 12 Dec 2013 16:57:43 GMT

Dorothy,

There is an issue with using lang="en" along with layout dijits. If you remove this from your test case the app loads correctly when using the JSAPI. You can find more details on the problem by viewing the post by Adrian Marsden in this thread:

http://forums.arcgis.com/threads/74483-ESRI-Javascript-API-3.3

Here's the relevant bit:

Using lang="en" can break apps that use when using layout dijits and data-dojo-config(or dojoConfig) locale or extraLocale is not set. The recommended fix is to set locale or extraLocale on data-dojo-config or remove the lang="en" attribute. The specific error seen when this is an issue is "dojo/parser:arse() error TypeError" in Chrome and "TypeError: _72f(...) is undefined" in Firefox. More information is available in the Dojo bug tracker:http://trac.dojotoolkit.org/ticket/15630#comment:7http://trac.dojotoolkit.org/ticket/15768#comment:6

Re: versioning of dojo.

DorothyMortenson — Thu, 12 Dec 2013 17:09:08 GMT

You gotta be kidding me. Stick a sharp stick in my eye.

Thank you so much! I NEVER would have found that.

You just made my day.