versioning of dojo.

DorothyMortenson · ‎12-10-2013

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

SteveCole · ‎12-10-2013

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

DorothyMortenson · ‎12-10-2013

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<()

SteveCole · ‎12-10-2013

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.

DorothyMortenson · ‎12-10-2013

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();
 });
});

SteveCole · ‎12-10-2013

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>

DorothyMortenson · ‎12-10-2013

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.

JohnathanBarclay · ‎12-10-2013

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.

DorothyMortenson · ‎12-11-2013

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"
      });
});

DorothyMortenson · ‎12-12-2013

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>