Suggestions for debugging a dojo parse error?

SteveCole · ‎09-26-2013

I'm revisiting an application I started putting together using the 2.8 API. I'm not quite ready for AMD dojo so I was updating the API version to 3.4 but now I get a dojo parse error pretty much as the page loads. The error points to the API but I realize that's not the true source of the issue. While reading some of the documentation about dojo.parser, I got the impression that it's focused on the HTML side of your development and not necessarily the javascript code that you write. Is this correct?

I don't have a ton of dojo items (borderContainer, ContentPane, BasemapMenu, DataGrid) so it shouldn't be this hard to figure it out but I'm having a hell of a time doing so.

Should I be focusing my attention on the HTML markup or my javascript code? I've tried setting a breakpoint on the first line of code in my init() function but the parse error already fires before the code execution hits the breakpoint.

Thanks!
Steve

JonathanUihlein · ‎09-26-2013

Hey Steve,

I did a quick search and found something under the archives.

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::parse() 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:7 http://trac.dojotoolkit.org/ticket/15768#comment:6

See if that helps at all.

If not, I'll take another look.

Also, if you haven't seen this, it may be worth a look: https://developers.arcgis.com/en/javascript/jshelp/migration_30.html

View solution in original post

KennethRichards · ‎09-26-2013

I'm having a similar problem right now. I do know that it is something in the html so I would focus there first.

JonathanUihlein · ‎09-26-2013

Hey Steve,

Could you post your code and/or the exact parser error you are receiving?

Like you said, many parser issues result from incorrectly formatted HTML but it could be as simple as you invoking the parser at the wrong time.

SteveCole · ‎09-26-2013

Apparently my HTML markup is over the 10k character limit for posts so I'm going to break it out over a couple posts in this thread. The initMap function I call within dojo.Ready is located in my mapFunctions.js file. That's also where all my dojo.require statements are. Here's that stuff:

//=============================================================================
// Global declarations and dependencies
//=============================================================================
dojo.require("esri.graphic");
dojo.require("esri.map");

dojo.require("esri.dijit.BasemapGallery"); 
dojo.require("esri.dijit.InfoWindow");
dojo.require("esri.dijit.Popup");
dojo.require("esri.dijit.Scalebar");

dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.layers.KMLLayer");
dojo.require("esri.tasks.query");

dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Menu");

dojo.require("dojo.date.locale");
dojo.require("dojo.parser");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");

  
var rdClosuresShown = 1;
var trafficCamShown = 0;
var streamGageShown = 0;
var snowRoutesShown = 0;
var iceRemovalShown = 0;
var wsdotAlertsShown = 0;

var rdClosureWdgt;
var trafficCamWdgt;
var snowRteWdgt;
var icingRteWdgt;
var gageWdgt;
var wsdotWdgt;
   
var map;
var mapLayers = [];
var popup, template;
var wsdotTemplate;
var theBasemap, theFeatureLayer, theCountiesLayer;
var basemapGallery;
var theSnowRemovalLayer, theWsdotCamLayer, theWsdotAlertLayer;
var initExtent;

//Update today's date on the webpage
var dToday = new Date().toLocaleDateString();
var SERVERPATH = "http://...";
  
//=============================================================================
// Main routine for initializing the Map
//=============================================================================
function initMap() {
.
.
.etc
}

SteveCole · ‎09-26-2013

Here's the HTML header and part of the HTML body:
[HTML]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="Snohomish County Road Maintenance" name="Author">
<meta id="MetaKeywords" content="snohomish county road map closure closures conditions puget sound information" name="Keywords">
<meta id="MetaDescription" content="Snohomish County Emergency Road Closures Map. View road closures in Snohomish County on a map." name="Description">
<meta content="County" name="govType">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Snohomish County Emergency Road Closures</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>









<link href="css/style.css" rel="stylesheet" type="text/css">


<link href="css/media-queries.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" media="screen" href="http://www.devslide.com/public/labs/browser-detection/browser-detection.css" />
<script type="text/javascript" src="js/browser-detection.js"></script>

<link href="http://www.co.snohomish.wa.us/PWApp/SWM/toolbar/swm_datatoolbar.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="css/Grid.css">

    <script type="text/javascript">
      var dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
<script type="text/javascript" src="js/moment_min.js"></script>
<script type="text/javascript" src="js/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="js/wsdotImportFunction.js"></script>
<script type="text/javascript" src="js/mapFunctions.js"></script>
    <script type="text/javascript">

animatedcollapse.addDiv('layerList', 'fade=1,hide=1');
animatedcollapse.addDiv('mapLegend', 'fade=1,hide=1');

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
};

animatedcollapse.init();
dojo.ready(initMap);
    </script>
</head>

<body class="claro">

<div id="pagewrap">

<header id="header">

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
     <td class="SWMDAT_page_frame" align="center" border="0">
    
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
      <td valign="top" colspan="2">
       <img src="http://www.co.snohomish.wa.us/PWApp/SWM/toolbar/banner_homepage_02.gif" width="100%" alt="black_wave.gif" />
      </td>
     </tr>
     <tr>
      <td valign="top" align="left">
       <img src="http://www.co.snohomish.wa.us/PWApp/SWM/toolbar/appl_banner_w_logline_SnoCoTitleOnly.gif" alt="Snohomish County Online Government Information & Services" />
      </td>
      <td valign="top" align="center" width="538">
       <span id="SWMDAT_snocolinks"> <a href="http://www1.co.snohomish.wa.us/">Snohomish County</a> >
         <a href="http://www1.co.snohomish.wa.us/Departments/Public_Works/">Public Works</a> >
        <a href="http://www1.co.snohomish.wa.us/Departments/Public_Works/Services/Roads/">Roads</a></span>
       <br />
       <div id="SWMDAT_title">Emergency Road Closure Information</div>
       Updated every 15 minutes
      </td>
     </tr>
    </table>
    
    
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
      <td class="SWMDAT_secondbar" align="left" style="width: 250px">
       <strong>Report Changes to: 425-388-7500</strong>
      </td>
      <td class="SWMDAT_secondbar" align="right">
       <a href="mailto:Contact.PWRM@snoco.org">Contact Road Maintenance</a>
      </td>
     </tr>
    </table>
    
   </td>
    </tr>
</table>
</header>
[/HTML]

SteveCole · ‎09-26-2013

Here's the rest:
[HTML] <div id="content">
<figure class="post-image">
    <div id="closureHeader" style="width=500px; height=400px">
     <h4 class="widgettitle">Emergency Road Closure Information as of <SPAN id="todaysDate">today</SPAN>:</h4>
     <p>Please be advised that all state routes and highways are maintained and reported on by the Washington State Department of Transportation (WSDOT) and are <SPAN style="font-weight:bold">NOT</SPAN> reflected in the list below. They are, however, available as an additional overlay that can be turned on at your convenience. Please call the WSDOT automated information line at 511 or visit their website at <a href="http://www.wsdot.wa.gov" target="_blank">www.wsdot.wa.gov</a> for information related to Washington State DOT maintained state routes and highways.</p>
    </div>
</figure>
<article class="post clearfix">
   <figure class="post-image">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height:400px; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="width:100%; height:400px;overflow:hidden;border:1px solid #000">
     <div style="position:absolute; right:5px; top:5px;z-index:99">
       <button id="dropdownButton" iconClass="bingIcon" label="Switch Basemap" dojoType="dijit.form.DropDownButton">
      <div dojoType="dijit.Menu" id="basemapMenu">
        
      </div>
       </button>
     </div>
      </div>
    </div>
   </figure>
   <p style="font-size:80%;text-align:right;font-style:italic;color:#666666">Map not big enough? <a href="http://dmc-arcgis/spwscc/rdClosures/rdClosuresFull.html" target="_blank">View a full screen version</a></p>
</article>
<figure class="post-image">
    <div id="closureList" style="width:100%">
     <h5>There are currently <SPAN id="numRdClosures">0</SPAN> road closures:</h5>
     <div dojotype="dijit.layout.ContentPane" id="dGridContentPane" region="center" style="width:100%;height:350px">
      <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid" selectionMode="none">
       <thead>
       <tr>
         <th field="OBJECTID" width="0%">OBJECTID</th>
         <th field="rdName" formatter="makeHtmlTable" width="100%">rdName</th>
         <th field="dateCl" width="0%">dateCL</th>
         <th field="dateOp" width="0%">dateOp</th>
       </tr>
        </thead>
      </table>
     </div>
     <hr>
     <div align="right">
     <label>Sort Road List by</label>
     <select id="dgridSortOrder" class="select" align="right" title="Sort Road List by" onchange="changeSortOrder()" />
       <option selected="true">Name
       <option>Closure Date (newest first)
       <option>Closure Date (newest last)
       <option>Re-Open Date (newest first)
       <option>Re-Open Date (newest last)
     </select></div>
    </div>
</figure>

</div>


<aside id="sidebar">

<section class="widget">
   <h4 class="widgettitle"><SPAN>Show Me..<a href="#" rel="toggle[layerList]" data-openimage="http://publicworks.snoco.org/RdClosures/images/chevron_up.png" data-closedimage="http://publicworks.snoco.org/RdClosures/images/chevron_down.png"><img id="layerImg" src="http://publicworks.snoco.org/RdClosures/images/chevron_down.png" align="right" style="margin-top:5px"/></a></SPAN></h4>
    <hr>
    <div id="layerList">
     <table style="font-size:95%;margin-left:15px;">
      <tbody>
       <tr>
        <td ALIGN="RIGHT"><b>Emergency Road Closures</b></td>
        <td><input id="closureBtn" type="checkbox" onclick="showRoadClosures()" name="roadClosures"></td>
       </tr>
       <tr>
        <td ALIGN="RIGHT"><b>Traffic Cameras</b></td>
        <td><input id="camBtn" type="checkbox" onclick="showWsdotWebcams()" name="trafficCams"></td>
       </tr>
       <tr>
        <td ALIGN="RIGHT"><b>Snow Removal Routes</b></td>
        <td><input id="removalBtn" type="checkbox" onclick="showSnowRemovalRoutes()" name="SnowRemoval"></td>
       </tr>
       <tr>
        <td ALIGN="RIGHT"><b>Anti-Icing Treatment Routes</b></td>
        <td><input id="icingBtn" type="checkbox" onclick="showAntiIcingRoutes()" name="AntiIcing"></td>
       </tr>
       <tr>
        <td ALIGN="RIGHT"><b>WSDOT Travel Alerts</b></td>
        <td><input id="wsdotBtn" type="checkbox" onclick="showWsdotAlerts()" name="wsdotAlerts"></td>
       </tr>
       <tr>
        <td ALIGN="RIGHT"><b>Stream Gages</b></td>
        <td><input id="gageBtn" type="checkbox" name="streamGages"></td>
       </tr>
      </tbody>
     </table>
    </div>
</section>


<section class="widget clearfix">
   <h4 class="widgettitle"><SPAN>Map Legend<a href="#" rel="toggle[mapLegend]" data-openimage="http://publicworks.snoco.org/RdClosures/images/chevron_up.png" data-closedimage="http://publicworks.snoco.org/RdClosures/images/chevron_down.png"><img id="legendImg" src="http://publicworks.snoco.org/RdClosures/images/chevron_down.png" align="right" style="margin-top:5px"/></a></SPAN></h4>
    <hr>
    <div id="mapLegend">
     <table style="font-size:80%;margin-left:15px;">
      <tbody>
       <tr>
        <td ALIGN="CENTER"><img src="http://publicworks.snoco.org/RdClosures/roadClosed.png" width="24" height="24" style="height:24px;width:24px"></td>
        <td ALIGN="LEFT"><b>Closed Road Section</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><img src="http://publicworks.snoco.org/RdClosures/roadOpen.png" width="24" height="24" style="height:24px;width:24px"></td>
        <td ALIGN="LEFT"><b>Open Road Section</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><img src="http://publicworks.snoco.org/RdClosures/RdAdvisory.png" width="24" height="24" style="height:24px;width:24px"></td>
        <td ALIGN="LEFT"><b>Road Advisory</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><img src="http://maps.google.com/mapfiles/kml/shapes/webcam.png" width="24" height="24" style="height:24px;width:24px"></td>
        <td ALIGN="LEFT"><b>Traffic Camera Location</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><img src="http://publicworks.snoco.org/SWM/riverGageIcon01.png" width="24" height="24" style="height:24px;width:24px"></td>
        <td ALIGN="LEFT"><b>County Stream Gage</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><img src="http://publicworks.snoco.org/SWM/riverGageIcon02.png" width="24" height="24" style="height:24px;width:24px"></td>
        <td ALIGN="LEFT"><b>USGS Stream Gage</b></td>
       </tr>
       <tr>
        <td ALIGN="LEFT" COLSPAN="2" style="font-weight:bold;font-size:115%">Snow Removal/Anti-Icing:</td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><hr style="width:20px;height:10px; color: #FF0000; background-color: #FF0000"></td>
        <td ALIGN="LEFT"><b>Priority Route</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><hr style="width:20px;height:10px;color: #FFFF00; background-color: #FFFF00"></td>
        <td ALIGN="LEFT"><b>Secondary Route</b></td>
       </tr>
       <tr>
        <td ALIGN="CENTER"><hr style="width:20px;height:10px;color: #33CCFF; background-color: #33CCFF"></td>
        <td ALIGN="LEFT"><b>Tertiary Route</b></td>
       </tr>
      </tbody>
     </table>
    </div>
</section>

</aside>


<footer id="footer">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
   <tr>
    <td class="SWMDAT_header1">Snohomish County Road Information</td></tr>
   <tr>
    <td align="left" valign="top"><div class="SWMDAT_text_pad">
     <ul>
      <li><a href="http://www1.co.snohomish.wa.us/Departments/Public_Works/Services/Roads/roadsupdate.htm">Road Construction Updates</a></li>
      <li><a href="http://www1.co.snohomish.wa.us/Departments/Public_Works/Divisions/Road_Maint/Road_Closures.htm">Long Term, Weight-Restricted, and Seasonal Road Closures</a></li>
      <li><a href="http://www.co.snohomish.wa.us/PWApp/SWM/floodwarn/index.html">Real-Time Flood Warning Information</a></li>
     </ul>
    </div></td></tr>
   <tr>
    <td align="left" valign="top"><div class="SWMDAT_text_pad">
     <b>DISCLAIMER:</b> This data is accurate at the time entered and does not necessarily represent current "up to the minute" conditions. Conditions can change rapidly during storms and flooding. Drivers are encouraged to exercise extreme caution and allow extra time. Road flooding or closures may occur between the time you view this data and you arrive at a particular road. Never drive through a road with standing water. Do not get out of your vehicle and approach downed trees or power lines.
    </div></td></tr>
</table>
</footer>


</div>


</body>
</html>[/HTML]

SteveCole · ‎09-26-2013

The header is a bit of a mess (this is one of my first webmap app efforts) because it tries to apply some responsive design to the page.

EDIT: Forgot the actual error:

dojo/parser:parse() error TypeError {} serverapi.arcgisonline.com/jsapi/arcgis/3.4/:34

JonathanUihlein · ‎09-26-2013

Hey Steve,

I did a quick search and found something under the archives.

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::parse() 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:7 http://trac.dojotoolkit.org/ticket/15768#comment:6

See if that helps at all.

If not, I'll take another look.

Also, if you haven't seen this, it may be worth a look: https://developers.arcgis.com/en/javascript/jshelp/migration_30.html

ChrisSergent · ‎07-31-2015

This is still an issue in 3.14.

SteveCole · ‎09-26-2013

ARGH!!

I totally forgot about that part of the migration to the 3.x APIs. I removed the reference and all is well.

THANK YOU!