I am using a script with a dojo chart inside a tab: chart page.
If you open the chart page with Google Chrome the chart is visible. If you open it with Firefox or Explorer 11 the chart is NOT visible.
All my browsers are updated to their latest versions.
Can somebody tell me why am I getting this error?
This is my script:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/Chart2D",
"dojox/charting/action2d/MoveSlice" ,
"dojox/charting/action2d/Tooltip",
"dojo/ready"],
function(Chart, Chart2D, MoveSlice, Tooltip, ready){
ready(function(){
var chart1 = new Chart("He");
chart1.addPlot("default", {
type: "Pie",
labelOffset: 25,
font: "9pt Arial"
});
chart1.addSeries("He", [
{y: 1, text: 1},
{y: 1, text: 2},
{y: 1, text: 3}
]);
new Tooltip(chart1, "default");
new MoveSlice(chart1, "default");
chart1.render();
});
});
</script>
</head>
<body class="calcite">
<div>
<div id="He" style="width: 140px; height: 140px; "></div>
</div>
</body>
</html>
I have recreated your issue on https://jsfiddle.net/1k6w8otn
Indeed on Chrome it works fine while on IE11 it show blank page. IE11 console however reports Permission denied and debugger sniffing all exception stops at some point at getComputedStyle definition. Quick look on dojo forum here shows that there was blocking issue 18973 opened for Dojo 1.12.1.
Switch to dojo 1.12.2 or newer and IE11 and FF renders pie chart correctly again. See modified jsfiddle: https://jsfiddle.net/1k6w8otn/2
Related
I'm trying to use TestCafe to test a chatbot which uses a contenteditable div as the user-input. Have actually succeeded with Chrome and Firefox to press enter and pass the tests, but have not been able to get Safari to press enter. I realize that contenteditable does not support pressKey("enter") but I'm wondering why it works for both Chrome and Firefox and not Safari, and whether I can get it to work for Safari?
test("Able to send a message on enter keypress", async t => {
await t
.typeText(chatbot.userReply, "hi")
.pressKey("enter")
.expect(chatbot.transcriptMessages.find("li").withText("hi").count).eql(1)
})
It's difficult to say why this does not work in Safari without researching a working sample showing the problem. As far as I understand from your description, your contenteditable element has the keypress event handler, which sends a message on the enter press. I've prepared a sample project to demonstrate this approach, and it all operates correctly both Safari and Chrome:
Test page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="editor" contenteditable="true" style="width: 300px; height: 300px; border: 1px solid black;">test</div>
<script>
document.getElementById('editor').addEventListener('keypress', function() { alert('test') })
</script>
</body>
</html>
Test code:
fixture `test`
.page `../pages/index.html`;
test(`test`, async t => {
await t.click('#editor');
await t.pressKey('enter');
});
In a comment on this page you mentioned that this is in an iframe so you will need to do:
await t.switchToIframe(iframeSelector);
When switching back you can do:
await t.switchToMainWindow();
Let's consider this code from the reference (https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open):
view.on("click", function(evt){
view.popup.open({
location: evt.mapPoint, // location of the click on the view
title: "Some title",
});
This works. But how to open a popup at the point, specified by predefined lng,lat coords?
First try:
var point = new Point({latitude:lat,longitude:lng});
view.popup.open({
location: point,
title: "Some title"
});
This does not work. The reason is that created point currently disconnected from map view. Is there a way to receive screen coords (x,y) of the current view by specified (lng,lat)? In google maps api there're methods like latLngToDivPixel, latLngToDivPoint, so what argis offers for this task?
Looks like you're having a SpatialReference issue. Since you're creating the point via lat/lng, it's not in WebMercator, so when you add it to the map it's going to the wrong place. Here's a fixed code for you:
// this works, but needs to be in webmercator:
// var point = new Point({x:-9035831.315416021, y:3095345.196351918});
// as an alternative you can translate to webmercator on the fly:
var point = webMercatorUtils.geographicToWebMercator(new Point({latitude:28.526622,longitude:-81.914063}));
view.popup.open({
location: point,
title: "Some title"
});
Here is the above code in an example.
The answer/issue above was correct for version 4.0 and 4.1.
However, for the newly released version 4.2, this has been simplified. Popup.location now automatically converts WGS84 (latitude, longitude) points to web mercator when map is in web mercator projection.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Define custom Popup actions - 4.2]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the popup-actions sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/popup-actions/index.html
-->
<title>Define custom Popup actions - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"dojo/domReady!"
], function(
Map,
MapView,
Point
) {
// Create the Map
var map = new Map({
basemap: "topo"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117, 34],
zoom: 9
});
view.then(function() {
var peak = new Point({
latitude: 34.09916,
longitude: -116.82485
});
view.popup.open({
location: peak,
title: "San Gorgonio Mountain",
content: "Tallest peak in Southern California"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
https://jsbin.com/heqotom/edit?html,output
I am working on a php application where I used 'arcgis' API for loading a map. please find the URL below:
http://js.arcgis.com/3.11/
In order to load an arcgis map in my application, I must use
dojo.require("esri.map");
So In my single page PHP application I added this require statement as below:
<script type="text/javascript">
dojo.require("esri.map");
</script>
And in a js file I gave the map is loaded as shown below:
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
But when I run this application, I am getting an error stated "Uncaught TypeError: undefined is not a function" at the line "this.map = new esri.Map("mapDiv", myOptions);"
If I open developer tools run the same code by keeping breakpoints at require and esri.Map statements, I could see the map is getting loaded. But If I run it without opening developer tools then I am facing this issue.
Why dojo.require statement is not working as expected?
Whats wrong am I doing??
Kindly reply
You are trying to load map module with legacy module require. Try require Map using AMD syntax as shown in docs:
require(["esri/map"], function(Map) { /* code goes here */ });
You need to wrap your JavaScript code in a call to dojo.ready.
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>JavaScript in Separate File</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#mapDiv{padding:0;}
</style>
<script>var dojoConfig = {parseOnLoad: true};</script>
<script src="//js.arcgis.com/3.11/"></script>
<script src="code.js"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.agstiled");
</script>
</head>
<body class="claro" >
<div id="mapDiv"></div>
</body>
</html>
code.js file:
dojo.ready(function() {
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
var layer = new esri.layers.ArcGISTiledMapServiceLayer(
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
this.map.addLayer(layer);
});
I am using video.js (in CDN-Mode) and everything seems to work fine (with Firefox 26.0). The video is embedded and works fine. But when I want to access the video-Object, I'm getting the console-error:
ReferenceError: videojs is not defined on the code-line where I want to access the object:
var myPlayer = videojs('example_video_1');
Googling arround could not solve my problem. I saw implementations where users used: V as constructor instead of videojs but this did not solve my problem).
This is my script, where I want to access the object:
<script type="text/javascript">
$("#button1").on("click", function(){
console.log( "You clicked a paragraph!" );
var myPlayer = videojs('example_video_1');
});
</script>
This is my header
<link href="http://vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.5/video.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
And this is my video-declaration
<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="1270" height="720" poster="videos/search.png"
data-setup="{}">
<source src="videos/search.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
I would be happy for any kind of support.
A year and a half later and this issue occurred for me as well. I just installed it via npm install --save video.js and moved the file from the dist folder into my public scripts folder and it worked.
You must install or use from #videojs/http-streaming. I had same problem and solved by it.
I just made sure that the video.js file was the last attached script tag in the HTML. It worked for me.
import videojs from 'video.js';
try:
<script type="text/javascript">
$("#button1").on("click", function(){
console.log( "You clicked a paragraph!" );
var myPlayer = window.videojs('example_video_1');
});
</script>
add the event listener 'DOMContentLoaded' before calling the videojs object:
window.addEventListener('DOMContentLoaded', (event) => {
videojs('element-id', {
controls: true,
autoplay: false,
preload: 'auto'
});
});
I was wondering if somebody could help me with this problem. Everytime I show an Ext.Window with its modal config set to true, in FF and IE, it works fine, i mean everything behind the popup window is masked, whereas in Safari and Chrome, it doesn't. When i try to scroll down the page, I can see the mask is limited, which is not what i wanted to happen because one can easily do some stuff on the parent page even when the window is not yet closed. Can somebody help me? Thanx in advance. :D
I thought maybe this would happen if you were not running in a Viewport, so I put together a simple example. It turns out that the modal mask works just fine in Safari in this example. Give it a try and see where your code differs.
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var p = new Ext.Panel({
renderTo: 'panel',
html: 'this is the panel',
tbar: [{
text: 'Show a Modal Window',
handler: function() {
new Ext.Window({
title: 'Title',
html: 'Try scrolling - the entire page should be modal',
modal: true
}).show();
}
}]
});
});
</script>
</head>
<body>
<h1 style="height:100px;background-color:green;">html page</h1>
<div id="panel"></div>
<h1 style="height:1200px;background-color:green;">html page</h1>
</body>
</html>
It should work fine in Safari and Chrome out of the box. I just verified this page in Safari 4.0.4 Mac and it works fine with scrolling and/or resizing the browser. There's a chance maybe there's a bug in Ext for your particular browser/platform, but this is such a basic functionality that I doubt that. Does that page work for you?
This helped set the z-index for Ext.Msg.show() alerts to be infront of the window they were opened from for me.
Ext.WindowMgr.zseed = 10000;