Updating Adobe Illustrator content with script, without closing GUI - adobe-illustrator

Question

I am currently building an Adobe Illustrator Script, which starts a GUI and performs some text changes within the open Illustrator file. Unfortunately, the changes are only seen after closing the GUI. Is there some kind of way to preview the changes triggered by the GUI?
Here is what I have so far:
function startGUI() {
// DIALOG
// ======
var dialog = new Window("dialog");
dialog.text = "Dialog";
dialog.orientation = "column";
dialog.alignChildren = ["center","top"];
dialog.spacing = 10;
dialog.margins = 16;
// GRPNAME
// =======
var grpName = dialog.add("group", undefined, {name: "grpName"});
grpName.orientation = "row";
grpName.alignChildren = ["left","center"];
grpName.spacing = 10;
grpName.margins = 0;
var titleName = grpName.add("statictext", undefined, undefined, {name: "titleName"});
titleName.text = "Name";
titleName.preferredSize.width = 64;
var valName = grpName.add('edittext {properties: {name: "valName"}}');
valName.text = "Ela Ayah Kayis";
valName.preferredSize.width = 200;
// GRPFONTSIZE
// ===========
var grpFontSize = dialog.add("group", undefined, {name: "grpFontSize"});
grpFontSize.preferredSize.width = 250;
grpFontSize.orientation = "row";
grpFontSize.alignChildren = ["left","top"];
grpFontSize.spacing = 10;
grpFontSize.margins = 0;
grpFontSize.alignment = ["left","top"];
var titleFontSize = grpFontSize.add("statictext", undefined, undefined, {name: "titleFontSize"});
titleFontSize.text = "Font Size";
titleFontSize.preferredSize.width = 64;
var valFontSize = grpFontSize.add('edittext {properties: {name: "valFontSize"}}');
valFontSize.text = "15";
valFontSize.preferredSize.width = 30;
valFontSize.alignment = ["center","center"];
var titleFontSizeUnit = grpFontSize.add("statictext", undefined, undefined, {name: "titleFontSizeUnit"});
titleFontSizeUnit.text = "pt";
titleFontSizeUnit.alignment = ["left","center"];
var sliderFontSize = grpFontSize.add("slider", undefined, undefined, undefined, undefined, {name: "sliderFontSize"});
sliderFontSize.minvalue = 11;
sliderFontSize.maxvalue = 15;
sliderFontSize.value = 15;
sliderFontSize.preferredSize.width = 135;
sliderFontSize.onChanging = function(){
valFontSize.text = Math.round(sliderFontSize.value)
}
// DIALOG
// ======
var divider1 = dialog.add("panel", undefined, undefined, {name: "divider1"});
divider1.alignment = "fill";
// GROUP BUTTONS
// =============
var group1 = dialog.add("group", undefined, {name: "group1"});
group1.orientation = "row";
group1.alignChildren = ["right","center"];
group1.spacing = 10;
group1.margins = 0;
group1.alignment = ["center","top"];
var btnReplaceNames = group1.add("button", undefined, undefined, {name: "btnReplaceNames"});
btnReplaceNames.text = "Replace Names";
btnReplaceNames.justify = "left";
btnReplaceNames.alignment = ["right","bottom"];
var btnClose = group1.add("button", undefined, undefined, {name: "btnClose"});
btnClose.text = "Close";
// Event Listener for the replace button
btnReplaceNames.onClick = function() {
var inputText = valName.text;
updateNames(inputText, Math.round(sliderFontSize.value));
dialog.update();
}
// Event listener for the quit button
btnClose.onClick = function() {
dialog.close(); }
dialog.show();
}
function updateNames(chosenName, fontSize) {
var txtFrames = app.activeDocument.textFrames;
$.writeln("start");
if (txtFrames.length > 0) {
for ( i = 0; i < txtFrames.length; i++ ) {
if (txtFrames[i].name == 'Text-Name') {
txtFrames[i].textRange.characterAttributes.size = fontSize;
txtFrames[i].textRange.characterAttributes.leading = fontSize;
txtFrames[i].contents = chosenName;
// $.writeln(txtFrames[i].textRange.characters.length);
// $.writeln(txtFrames[i].textRange.lines.length);
}
}
}
$.writeln("done");
}
startGUI();
Closing the GUI and starting it automatically also didn't solve the issue.

Answer 1

....
updateNames(inputText, Math.round(sliderFontSize.value));
dialog.update();
app.redraw(); // < add this, and it will work.
....