I have set up a very simple functions.html which launches a likewise simple dialog that only registers Office.initialize with a console log. If left open too long I get a large error in the console and the dialog becomes unclosable except by refresh.
Is this a known issue or is there something i need to be doing differently?
dialog.html
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<title>React App</title>
<script>
Office.initialize = x => {
console.log('initialized')
}
</script>
</head>
<body style="height: 100%">
yo stuff
</body>
</html>
my js looks like this
export const showSmsModal = () => {
officeCtx().ui.displayDialogAsync(`${window.location.origin}/test.html`, {displayInIframe: true, height: 40, width: 40}, ({ value: dialog }) => {
console.log(dialog)
return dialog
})
}
and part of the error i get is the following:
Uncaught Exception in t(t){var o=e.call(this,t)||this;return
o._warnDeprecations({onLayerMounted:"onLayerDidMount"}),o.props.hostId&&(u[o.props.hostId]||(u[o.props.hostId]=[]),u[o.props.hostId].push.componentWillUnmount():
TypeError: Cannot read property 'extension' of null
at Object.o [as default] (https://r4.res.office365.com/owa/prem/16.2478.1.2588899/scripts/owa.clientnext.extensibility.js:2:16883)
at e.refCallback (https://r4.res.office365.com/owa/prem/16.2478.1.2588899/scripts/owa.clientnext.extensibility.js:7:15203)
at r (https://r4.res.office365.com/owa/prem/16.2478.1.2588899/scripts/owa.clientnext.application.js:94:3330)
at Object.a.detachRefs (https://r4.res.office365.com/owa/prem/16.2478.1.2588899/scripts/owa.clientnext.application.js:94:3783)
It appears that the hidden iframe which is used to call the showDialog function goes away and the dialog iframe is unable to communicate with it and interval console logs i set up seem to stop from it.
I would expect it to close both iframes.
Related
While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},
I am trying to get a hang of Test Cafe but currently I am stuck.
I have a webapp I want to test starting at the login and ending with a logout.
When I login with wrong credentials I display a DOM Element with the id = errorMsg.
With Test Cafe I want to check if the DOM Element is present or not.
This is my test script, the basic-page-model.js is a collection of all DOM elements ids used in the test.
import Page from './basic-page-model';
import { Selector } from 'testcafe';
fixture `Full Test Run of Main Features Role User`
.page `https://localhost:8443/login.jsp`;
const page = new Page();
const errorMessage= Selector('#errorMsg');
test('login test', async t => {
await t
.typeText(page.nameInput, 'user')
.typeText(page.passInput, 'user') //correct password -> password
.click(page.login)
.expect(errorMessage.exists).notOk();
});
It doesn't matter if the login will fail or not it always returns test passed.
Can somebody please point me in the right direction?
According to your test code, you have no #errorMsg DOM element in both cases: with correct and incorrect credentials. I created a simple example and it works well:
index.html (Error Message exists)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Error Message</title>
</head>
<body>
<div id="errorMsg">
<p>Error Message</p>
</div>
</body>
</html>
no-message.html (no Error Message)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>No Error Message</title>
</head>
<body>
</body>
</html>
test.js
import { Selector } from 'testcafe';
fixture `Error message`;
const errorMessage = Selector('#errorMsg').addCustomDOMProperties({
outerHtml: el => el.outerHtml
});
test
.page('localhost:8080/no-message')
('message should not exist', async t => {
await t
.expect(errorMessage.exists).notOk();
});
test
.page('localhost:8080')
('message should exist', async t => {
await t
.expect(errorMessage.exists).ok();
});
Result:
>testcafe chrome test.js
Running tests in:
- Chrome 83.0.4103.116 / Windows 10
Error message
√ message should not exist
√ message should exist
2 passed (0s)
You may have a wrong error message id in your test.
If the example above doesn't help, I suggest you update your question with a simple project.
I am trying to get notification area in summer note to work but It doens't showup.
In the example below I expect the area to show at the bottom once the button is pressed.
What am I missing ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<button onclick="test()">hello</button>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
$('#summernote').summernote({
maxHeight: 300,
dialogsInBody: true,
dialogsFade: true // Add fade effect on dialogs
});
});
function test(){
$('.note-status-output').html('<div class="alert alert-danger">' +
'This is an error using a Bootstrap alert that has been restyled to fit here.' +
'</div>'
);
}
</script>
</body>
</html>
I am trying to fetch and display a map from the arcgis server using Aptana IDE. It says l is undefined.
GET https://gistest2.xxx.xxx/arcgis/rest/info?f=json
200 OK 27ms TypeError: l is undefined
...x)<=p.dx)&&q._addFrameInfo(h,p);this.setExclusionAreas(this.exclusionAreas);this...
Here is the entire code except the URL I am trying to hit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>BGSU Memorial Trees Location</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/">
</script>
<script>
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
function (Map, ArcGISTiledMapServiceLayer ) {
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"https://XXX/");
map.addLayer(customBasemap);
});
</script>
</head>
<body class="claro">
<div align="center"><strong>BGSU Memorial Trees Listing </strong><hr>
<i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i>
</div>
<br>
<div id="map" >
</div>
</body>
</html>
Any help is highly appreciated.
Thanks in Advance!
In the constructor of ArcGISTiledMapServiceLayer you have to specify the URL of an ArcGIS tiled map service. Example of URL:
http://myserver/arcgis/rest/services/map_service_name/MapServer
The address you specified (arcgis/rest/info?f=json) is the address of the REST service of ArcGIS Server but doesn't point to a Map service.
When I start my application, the dojo start loading but are not yet fully parsed and thus screen looks ugly!!!
Is there a way to hide this ugly screen until it is fully loaded a parsed?
Thanks
Dominique
EDIT ADD SNIPPET
I heard that WL Studio would hide automatically the body and thus no need to create an overlay.
Here my html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Test.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script type="text/javascript"
data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false"
src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="main" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top"'>Main Screen</div>
<button id="refreshBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Refresh</button>
<button id="settingsBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Setting</button>
</div>
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
and my js
function wlCommonInit(){
require([ "dojo/core-web-layer", "dojo/mobile-ui-layer",
"dojo/mobile-compat-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo", "dojo/parser", "dojox/mobile", "dojox/mobile/compat",
"dojox/mobile/deviceTheme", "dojox/mobile/Heading", "dojox/mobile/Button" ],
function(dojo) {
dojo.ready(function() {
});
});
}
I tried also to add hidden="hidden" in the but it doesn't change anything.
Any idea?
Yes there is,
you need to build a loading overlay. Check out this tutorial:
http://dojotoolkit.org/documentation/tutorials/1.6/recipes/loading_overlay/
What I normally did with this is:
<div id="main" style="visibility: hidden;"></div>
After the parsing is complete:
set the main visibility to visible again.
Might not fully solve the problem (depends on how fast the browser able to resolve the layout), but you won't be getting plain html displayed until it is:converted into widget.
Further reference:
dojo/Ready = to detect when the page is parsed.