How do I dyamically update the dialog displayed by displayDialogAsync?
up vote
1
down vote
favorite
1
My code contains the following markup
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
<div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
</div>
</div>I'm using Office.context.ui.displayDialogAsync to display the HTML page.
What I would like to do is set the text with jQuery.
$('#firstName').text("a-name")I already know how to retrieve my data from our database using a Web Service.
The question is, can the dialog box displayed by displayDialogAsync be updated dynamically? If so, where would the code go? (e.g. before or after the call to displayDialogAsync, or perhaps inside of an initialize function (document, or Office)
jquery office-js office-ui-fabric
edited Nov 13 at 10:38
Durga
9,46021030
asked Nov 13 at 9:42
ezG
305
add a comment |
up vote
1
down vote
favorite
1
My code contains the following markup
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
<div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
</div>
</div>I'm using Office.context.ui.displayDialogAsync to display the HTML page.
What I would like to do is set the text with jQuery.
$('#firstName').text("a-name")I already know how to retrieve my data from our database using a Web Service.
The question is, can the dialog box displayed by displayDialogAsync be updated dynamically? If so, where would the code go? (e.g. before or after the call to displayDialogAsync, or perhaps inside of an initialize function (document, or Office)
jquery office-js office-ui-fabric
edited Nov 13 at 10:38
Durga
9,46021030
asked Nov 13 at 9:42
ezG
305
1
The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a<script>tag on the page.
– Rick Kirkham
Nov 13 at 19:06
1
@RickKirkham: I tried that. I placed the code in <head> section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post.
– ezG
Nov 13 at 19:39
1
@RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub Office UI Dialog Sample
– ezG
Nov 14 at 14:51
add a comment |
up vote
1
down vote
favorite
1
up vote
1
down vote
favorite
1
1
My code contains the following markup
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
<div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
</div>
</div>I'm using Office.context.ui.displayDialogAsync to display the HTML page.
What I would like to do is set the text with jQuery.
$('#firstName').text("a-name")I already know how to retrieve my data from our database using a Web Service.
The question is, can the dialog box displayed by displayDialogAsync be updated dynamically? If so, where would the code go? (e.g. before or after the call to displayDialogAsync, or perhaps inside of an initialize function (document, or Office)
jquery office-js office-ui-fabric
edited Nov 13 at 10:38
Durga
9,46021030
asked Nov 13 at 9:42
ezG
305
My code contains the following markup
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
<div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
</div>
</div>I'm using Office.context.ui.displayDialogAsync to display the HTML page.
What I would like to do is set the text with jQuery.
$('#firstName').text("a-name")I already know how to retrieve my data from our database using a Web Service.
The question is, can the dialog box displayed by displayDialogAsync be updated dynamically? If so, where would the code go? (e.g. before or after the call to displayDialogAsync, or perhaps inside of an initialize function (document, or Office)
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
<div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
</div>
</div><div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
<div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
</div>
</div>$('#firstName').text("a-name")$('#firstName').text("a-name")jquery office-js office-ui-fabric
jquery office-js office-ui-fabric
edited Nov 13 at 10:38
Durga
9,46021030
asked Nov 13 at 9:42
ezG
305
edited Nov 13 at 10:38
Durga
9,46021030
asked Nov 13 at 9:42
ezG
305
edited Nov 13 at 10:38
Durga
9,46021030
edited Nov 13 at 10:38
Durga
9,46021030
edited Nov 13 at 10:38
Durga
9,46021030
9,46021030
asked Nov 13 at 9:42
ezG
305
asked Nov 13 at 9:42
ezG
305
asked Nov 13 at 9:42
ezG
305
305
1
The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a<script>tag on the page.
– Rick Kirkham
Nov 13 at 19:06
1
@RickKirkham: I tried that. I placed the code in <head> section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post.
– ezG
Nov 13 at 19:39
1
@RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub Office UI Dialog Sample
– ezG
Nov 14 at 14:51
add a comment |
1
The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a<script>tag on the page.
– Rick Kirkham
Nov 13 at 19:06
1
@RickKirkham: I tried that. I placed the code in <head> section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post.
– ezG
Nov 13 at 19:39
1
@RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub Office UI Dialog Sample
– ezG
Nov 14 at 14:51
1
1
The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a
<script> tag on the page.– Rick Kirkham
Nov 13 at 19:06
The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a
<script> tag on the page.– Rick Kirkham
Nov 13 at 19:06
1
1
@RickKirkham: I tried that. I placed the code in <head> section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post.
– ezG
Nov 13 at 19:39
@RickKirkham: I tried that. I placed the code in <head> section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post.
– ezG
Nov 13 at 19:39
1
1
@RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub Office UI Dialog Sample
– ezG
Nov 14 at 14:51
@RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub Office UI Dialog Sample
– ezG
Nov 14 at 14:51
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
In case anyone is having the same problem I did. Here is what my final sample code looks like.
<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html>The above Html is called from this Javascript file which I got from a GitHub Sample Dialog Sample
openDialog shows one use of displayDialogAsync.
/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}answered Nov 14 at 15:07
ezG
305
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
In case anyone is having the same problem I did. Here is what my final sample code looks like.
<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html>The above Html is called from this Javascript file which I got from a GitHub Sample Dialog Sample
openDialog shows one use of displayDialogAsync.
/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}answered Nov 14 at 15:07
ezG
305
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
add a comment |
up vote
1
down vote
accepted
In case anyone is having the same problem I did. Here is what my final sample code looks like.
<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html>The above Html is called from this Javascript file which I got from a GitHub Sample Dialog Sample
openDialog shows one use of displayDialogAsync.
/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}answered Nov 14 at 15:07
ezG
305
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
In case anyone is having the same problem I did. Here is what my final sample code looks like.
<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html>The above Html is called from this Javascript file which I got from a GitHub Sample Dialog Sample
openDialog shows one use of displayDialogAsync.
/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}answered Nov 14 at 15:07
ezG
305
In case anyone is having the same problem I did. Here is what my final sample code looks like.
<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html>The above Html is called from this Javascript file which I got from a GitHub Sample Dialog Sample
openDialog shows one use of displayDialogAsync.
/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function (reason) {
// This JavaScript may be run inline, as it is here
// Or it may run from a separate JavaScript file.
//
$("#firstName").text("John");
$("#lastName").text("Doe");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName" ></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
</div>
</div>
</body>
</html>/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information */
var dialog;
function dialogCallback(asyncResult) {
if (asyncResult.status === "failed") {
// In addition to general system errors, there are 3 specific errors for
// displayDialogAsync that you can handle individually.
switch (asyncResult.error.code) {
case 12004:
showNotification("Domain is not trusted");
break;
case 12005:
showNotification("HTTPS is required");
break;
case 12007:
showNotification("A dialog is already opened.");
break;
default:
showNotification(asyncResult.error.message);
break;
}
} else {
dialog = asyncResult.value;
/*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
/*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
}
}
function messageHandler(arg) {
dialog.close();
showNotification(arg.message);
}
function eventHandler(arg) {
// In addition to general system errors, there are 2 specific errors
// and one event that you can handle individually.
switch (arg.error) {
case 12002:
showNotification("Cannot load URL, no such page or bad URL syntax.");
break;
case 12003:
showNotification("HTTPS is required.");
break;
case 12006:
// The dialog was closed, typically because the user the pressed X button.
showNotification("Dialog closed by user");
break;
default:
showNotification("Undefined error in dialog window");
break;
}
}
function openDialog() {
// Code to launch Dialog
Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
height: 50,
width: 50
}, dialogCallback);
}answered Nov 14 at 15:07
ezG
305
edited 17 hours ago
answered Nov 14 at 15:07
ezG
305
answered Nov 14 at 15:07
ezG
305
answered Nov 14 at 15:07
ezG
305
305
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
add a comment |
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
You can accept your own answer. It is encouraged, as that will help others who read the question in future.
– Mawg
yesterday
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278035%2fhow-do-i-dyamically-update-the-dialog-displayed-by-displaydialogasync%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
The page in the dialog can be updated just like any other web page. You create your update logic in JavaScript and load the JavaScript with a
<script>tag on the page.– Rick Kirkham
Nov 13 at 19:06
1
@RickKirkham: I tried that. I placed the code in <head> section of the Html page that contained the markup for the Dialog. I got no errors, but neither did the dialogbox get updated. I will create a small sample code and post.
– ezG
Nov 13 at 19:39
1
@RickKirkham I was able to get it going thanks to your suggestion. I had my Javascript in the wrong place. I revisited some sample code I found on GitHub Office UI Dialog Sample
– ezG
Nov 14 at 14:51