The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Chris Holmes (3) [Avatar] Offline
#1
Hello,

Not sure if there's something different I need to do to run the sample code for the legend/toc example but when I load the index.html file I just get a white screen with a green horizontal bar across the top of the screen. I had no problems running the chapter 2 samples, just wondering if there's something different I need to do with chapter 3?

thanks
Rene Rubalcava (12) [Avatar] Offline
#2
That's odd. I just ran it locally and it seemed to work. Can you look in the console for your developer tools and see if there are any errors?
Links on how to use browser dev tools.
Chrome - recommended
Firefox
Internet Explorer

I would also make sure you have the latest source code.

And just to be safe, the source code is also on github.

Thanks.
Chris Holmes (3) [Avatar] Offline
#3
Thanks Rene, I will check those out. BTW, enjoying your book. Finding it to be very readable compared to others out there. Also difficult to find stuff out there that's current with the JS API.
342084 (2) [Avatar] Offline
#4
Chris Holmes wrote:Hello,

Not sure if there's something different I need to do to run the sample code for the legend/toc example but when I load the index.html file I just get a white screen with a green horizontal bar across the top of the screen. I had no problems running the chapter 2 samples, just wondering if there's something different I need to do with chapter 3?

thanks


I am having the same issue running Windows 7 with Internet Explorer 11. Also, on Windows 7 running Firefox.
342084 (2) [Avatar] Offline
#5
I managed to resolve my 2 issues.
The first issue was that the legend was not appearing at all.
Here is what I did to resolve this first issue;

My files structure was:
index.html
js folder -> main.js

So, the main.js is in a js subfolder 1 level below the index.html
I modified main.js (here is an excerpt from the original code)

/*global define:true require:true console:true esri:true location:true*/
(function() {
    'use strict';

    var pathRX = new RegExp(/\/[^\/]+$/), locationPath = location.pathname.replace(pathRX, '');

    require({
        async: true,
        aliases: [['text', 'dojo/text']],
        packages: [{
            name: 'widgets',
            location: locationPath + 'js/widgets'
        }
        ]
    });


I changed the
location: locationPath + 'js/widgets'
to
location: locationPath + '/js/widgets'
(added / before js)

Here is the updated snippet;

/*global define:true require:true console:true esri:true location:true*/
(function() {
    'use strict';

    var pathRX = new RegExp(/\/[^\/]+$/), locationPath = location.pathname.replace(pathRX, '');

    require({
        async: true,
        aliases: [['text', 'dojo/text']],
        packages: [{
            name: 'widgets',
            location: locationPath + '/js/widgets'
        }
        ]
    });


I still had an issue with the legend not displaying the submenus.
I resolved this by including the following meta tag content in the index.html

<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">


The middle tag forces the page to render as IE edge (IE 11).

This is what has allowed me to get the example working on Windows 7 / IE 11.
Chris Holmes (3) [Avatar] Offline
#6
342084 wrote:I managed to resolve my 2 issues.
The first issue was that the legend was not appearing at all.
Here is what I did to resolve this first issue;

My files structure was:
index.html
js folder -> main.js

So, the main.js is in a js subfolder 1 level below the index.html
I modified main.js (here is an excerpt from the original code)

/*global define:true require:true console:true esri:true location:true*/
(function() {
    'use strict';

    var pathRX = new RegExp(/\/[^\/]+$/), locationPath = location.pathname.replace(pathRX, '');

    require({
        async: true,
        aliases: [['text', 'dojo/text']],
        packages: [{
            name: 'widgets',
            location: locationPath + 'js/widgets'
        }
        ]
    });


I changed the
location: locationPath + 'js/widgets'
to
location: locationPath + '/js/widgets'
(added / before js)

Here is the updated snippet;

/*global define:true require:true console:true esri:true location:true*/
(function() {
    'use strict';

    var pathRX = new RegExp(/\/[^\/]+$/), locationPath = location.pathname.replace(pathRX, '');

    require({
        async: true,
        aliases: [['text', 'dojo/text']],
        packages: [{
            name: 'widgets',
            location: locationPath + '/js/widgets'
        }
        ]
    });


I still had an issue with the legend not displaying the submenus.
I resolved this by including the following meta tag content in the index.html

<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">


The middle tag forces the page to render as IE edge (IE 11).

This is what has allowed me to get the example working on Windows 7 / IE 11.


Thanks for your help.

I implemented your changes in 2 steps:

1. I made the javascript change and then tested, results:
- Chrome: The data did load, but only the first level (Census) and I am able to toggle the layer on and off.
The following error displays in the console:
XMLHttpRequest cannot load http://sampleserver1.arcgisonline.com/ArcGIS/rest/info?f=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
- IE 9: After making the js change all I see in IE is white screen with green bar along top.

2. I made the change to index.html:
- Chrome: works same as before
- IE 9: works as it should, all functionality is there.

I have no idea what the issue is that I have with Chrome. Perhaps there is some setting on my server that I have wrong? I get the same results testing from both localhost and my dev server.

Thanks,

Chris