\
**Category:** UXP Plugin API\
**Created:** [April 5, 2022, 5:43am UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489 "2022-04-05T05:43:58Z")\
**Posts on this page:** 10\
**Page:** 1
**Author:**  [@revyiver](https://forums.creativeclouddeveloper.com/u/revyiver)\
**Post date:** [April 5, 2022, 5:43am UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/1 "2022-04-05T05:43:58Z")
I’m trying to show progress of the process when the button is clicked
But the problem is that the html is updated after all process has finished
even though I put the code right at the top
I’m trying to change html by using
`document.getElementById("divProgress").innerHTML = "started";`
Would there be other way to make it happen?
Thanks in advance
---
**Author:**  [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [April 5, 2022, 5:57pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/2 "2022-04-05T17:57:42Z")
Yes I think that modal execution has something for progress dialog. [https://developer.adobe.com/photoshop/uxp/2022/ps\_reference/media/executeasmodal/#progress-bar](https://developer.adobe.com/photoshop/uxp/2022/ps_reference/media/executeasmodal/#progress-bar)
---
**Author:**  [@revyiver](https://forums.creativeclouddeveloper.com/u/revyiver)\
**Post date:** [April 5, 2022, 6:51pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/3 "2022-04-05T18:51:27Z")
Thanks, I have tried it but getting an error
index.js:470 Uncaught SyntaxError: await is only valid in async function
but I’m using it on async function
async function selectAll()
---
**Author:**  [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [April 5, 2022, 8:54pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/4 "2022-04-05T20:54:08Z")
Can you post more of the surrounding code?
The function in which you’re using `await` has to be `async`, too.
---
**Author:**  [@AnthonyK](https://forums.creativeclouddeveloper.com/u/AnthonyK)\
**Post date:** [April 5, 2022, 9:06pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/5 "2022-04-05T21:06:27Z")
Panel HTML changes do NOT have to be included inside the executeAsModal code. You could call the HTML changes and then invoke the execuateAsModal function afterwards. HTML panel changes do not need to be asychronous so they don’t need to “await” anything.
---
**Author:**  [@revyiver](https://forums.creativeclouddeveloper.com/u/revyiver)\
**Post date:** [April 5, 2022, 11:05pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/6 "2022-04-05T23:05:28Z")
I’m using it as
```auto
document.getElementById("btnPopulate").addEventListener("click", start);
async function start() {
require("photoshop").core.executeAsModal(showLayerNames, {"commandName": "User Cancel Test"})
}
```
but selectAll and rasterizeLayers function is not being executed (or maybe it’s doing something wrong)
```auto
async function rasterizeLayers() {
const batchPlay = require("photoshop").action.batchPlay;
const result = await batchPlay(
[
{
_obj: "rasterizeLayer",
_target: [
{
_ref: "layer",
_enum: "ordinal",
_value: "targetEnum"
}
],
_options: {
dialogOptions: "dontDisplay"
}
}
],{
synchronousExecution: false,
modalBehavior: "fail"
});
}
async function selectAll() {
const batchPlay = require("photoshop").action.batchPlay;
const result = await batchPlay(
[
{
_obj: "selectAllLayers",
_target: [
{
_ref: "layer",
_enum: "ordinal",
_value: "targetEnum"
}
],
_options: {
dialogOptions: "dontDisplay"
}
}
], {
synchronousExecution: false,
modalBehavior: "fail"
});
}
```
---
**Author:**  [@revyiver](https://forums.creativeclouddeveloper.com/u/revyiver)\
**Post date:** [April 5, 2022, 11:07pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/7 "2022-04-05T23:07:48Z")
I wasn’t using executeAsModal at first, but html changes always happen after all process has finished
---
**Author:**  [@revyiver](https://forums.creativeclouddeveloper.com/u/revyiver)\
**Post date:** [April 5, 2022, 11:26pm UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/8 "2022-04-05T23:26:46Z")
Actually I think when I use executeAsModal, batchplay doesn’t work because it can’t select the layers with batch play
All I want to do is just change html when button is clicked, not when process is finished after the button is clicked
---
**Author:**  [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [April 6, 2022, 7:48am UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/9 "2022-04-06T07:48:14Z")
I would advise that you go and study how asynchronous JavaScript works as that’s where your problem lies (and not with anything UXP related).
It can be a tricky thing to get your head around at first, but you are going to keep hitting up against it.
In a nutshell - using the await keyword will cause code execution to wait until the awaited code is completed.
Here’s a rough pseudocode example for you:
```auto
async function exampleFunc () {
// no await
console.log("foo");
// await function that takes time to complete
await anotherExampleFunc() {
// Do stuff that takes time - e.g. API call
console.log("donk")
}
// no await
console.log("bar")
}
```
The output will be:
```auto
foo
donk
bar
```
because the final log has to wait for anotherExampleFunc to complete.
Without async/await the output would be:
```auto
foo
bar
donk
```
because the JavaScript engine will start executing the anotherExampleFunc and move straight on to the final log before it completes.
It also appears that you are asking two questions in this thread - your original HTML update one, and then a batchPlay/executeAsModal question. You’d be better served creating a new thread so as not to confuse the issue.
---
**Author:**  [@AnthonyK](https://forums.creativeclouddeveloper.com/u/AnthonyK)\
**Post date:** [April 7, 2022, 12:36am UTC](https://forums.creativeclouddeveloper.com/t/update-html-content-before-process-finishes/4489/10 "2022-04-07T00:36:38Z")
executeAsModal() calls the showLayerNames function in your code, but I don’t see where you’ve defined that function. I just see “rasterizeLayers()” and “selectAll()” functions. Are these two within the showLayerNames function?
Also, both “rasterizeLayers()” and “selectAll()” functions contain
```auto
{synchronousExecution: false,
modalBehavior: "fail"}
```
Since changes like this that affect the image have to occur inside executesAsModal(), and executesAsModal() creates a modal state,
```auto
modalBehavior: "fail"
```
will insure that these functions FAIL to execute.
I’m still not sure what your entire code looks like, but try replacing
```auto
{
synchronousExecution: false,
modalBehavior: "fail"
}
```
with
```auto
{}
```