How to show loader in existing pop up after clicking ok button

[akshayp]

Hello, anyone with any idea on this, please revert ASAP

I have ui action on table, and if  i click it , it displays one pop up with comment box and Cancel, Ok buttons.

Now, if user fills comments and click 'ok', it takes some time to update record.

For that time, i want to show loader in existing pop up.

i tried enhancing my ui page (client script of ui page at line 13), but i was only able to place one loading pop up over my existing pop up

  Anyone, who has idea on this please share some code or links, Thanks!!

Note- by loader i mean exactly like this----

Ui action (client side)--

UI page----

HTML---

Client script--

processing script--

[Ankur Bawiskar]

@akshayp 

can you share the scripts here and not screenshots?

[akshayp]

Ok I am sharing

[akshayp]

@Ankur Bawiskar , can you please check once, thanks

[akshayp]

Ui Action--

function closeQuestionaire() {
var dialog = new GlideModal('sn_vdr_risk_asmt_close_assessment_questionnaire'); //Render the dialog containing the UI Page
dialog.setTitle('Why do you want skip this questionnaire?'); //Set the dialog title
dialog.setSize(500, 100);
dialog.setPreference("sysparm_assessment", g_form.getUniqueValue());
dialog.setPreference("sysparm_asmt_table", 'sn_vdr_risk_asmt_assessment');
dialog.render(); //Open the dialog
}

UI Page--

HTML-

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>

<input type="hidden" id="jvar_answer" name="jvar_answer" value="" />
<input type="hidden" id="asmtid" name="asmtid" value="${sysparm_assessment}" />
<input type="hidden" id="asmttable" name="asmttable" value="${sysparm_asmt_table}" />

<!--<div class="row">-->


<!--</div>-->
<!--<div class="row">-->
<div class="form-horizontal">
<div class="form-group" style="margin-left:16px !important;margin-right:16px !important">
<textarea id="close_custom_comments" name="close_custom_comments" placeholder="Additional information required" value="" onkeyup='validate()' class="form-control" spellcheck="true" style="overflow: hidden; word-wrap: break-word; resize: none;" required="required"></textarea>
</div>
</div>
<!--</div>-->
<div class="modal-footer">
<span class="pull-right">
<button class="btn btn-default" onclick="return cancel();">Cancel</button>
<button class="btn btn-primary" id="cancelbtnSubmit" onclick="return actionOK();">OK</button>
</span>
</div>
</g:ui_form>
</j:jelly>

Client script--

document.getElementById("cancelbtnSubmit").disabled = true;

function validate() {
var comments = gel("close_custom_comments").value;
document.getElementById("cancelbtnSubmit").disabled = false;
if (!comments) {
document.getElementById("cancelbtnSubmit").disabled = true;
}
}

function actionOK() {

var gm = new GlideModal("glide_prompt", true);
gm.setSize(500, 100);
gm.setPreference('table', 'loading');
//gm.setPreference('background-color', 'transparent');
// gm.setTitle('Loading...'); //Set the loading dialog title
gm.render();

//Gets called if the 'OK' dialog button is clicked
//Make sure dialog comments are not empty
var comments = gel("close_custom_comments").value;
comments = trim(comments);
if (comments == "") {
//If comments are empty stop submission
alert("Please provide comments to close the Questionnaire.");
return false;
}
//If comments are not empty do this...
//GlideDialogWindow.get().destroy(); //Close the dialog window
gel('jvar_answer').value = comments;
return true;

}

function cancel() {
GlideDialogWindow.get().destroy();
return false;
}

Processing script--

var asmtInstance = new GlideRecord('asmt_assessment_instance');
asmtInstance.addQuery('sn_vdr_risk_asmt_assessment', asmtid);
asmtInstance.query();
if (asmtInstance.next()) {
var asmtInstanceQn = new GlideRecord('asmt_assessment_instance_question');
asmtInstanceQn.addQuery('instance', asmtInstance.sys_id);
asmtInstanceQn.query();
while (asmtInstanceQn.next()) {
asmtInstanceQn.value = 10;
//asmtInstanceQn.add_info = 'Manually closed';
asmtInstanceQn.update();
}
asmtInstance.state = 'complete';

asmtInstance.update();
}

var mi = new GlideRecord('sn_vdr_risk_asmt_m2m_asmt_questionnaire_template');
mi.addQuery('vendor_risk_assessment', asmtid);
mi.query();
if (mi.next()) {
mi.ques_percent_complete = 100;
mi.global_comment = cmnts;
mi.work_notes = cmnts;
mi.update();
}

var riskAsmt=new GlideRecord(asmttable);
if(riskAsmt.get(asmtid)){
riskAsmt.u_questionnaire_skip_reason=jvar_answer;

riskAsmt.state = '8';
riskAsmt.computed_risk_rating = '1';
riskAsmt.u_skip_questionnaire = true;
riskAsmt.comments = cmnts;
//riskAsmt.comments = comments;

riskAsmt.update();
response.sendRedirect(asmttable+".do?sys_id="+asmtid);
}