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--

[akshayp]

@Prince Arora 

 i tried with your code and changed my client script of ui page, but as soon as i click on 'OK' just loading icon comes and it stays there, my record is not getting updated

Changed client script of ui page----

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() {

//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;

var mod = new GlideModal().get('sn_vdr_risk_asmt_close_assessment_questionnaire');
mod.renderWithContent('<div><img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmRkZDExYWRhODFjYWVjOGNjYzhmMDgwODRlNDBjN2Q0MGQ4ZT..."></img></div>');

return true;

}

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

[Prince Arora]

@akshayp ,

I think your further code is dependent on the previous UI page so if we interchange the content of previous UI page, it can be impact the further flow.

Can you do one thing add a alert for comments, just wanted to check whether you got the comments or not:

alert(comments);

if this will not work we can destroy one modal and open a new one as I suggested in second method, but if our further flow dependent on previous UI page then it that case destroying a UI page will not a good solution.

If my answer solved your issue, please mark my answer as ✅ Correct & 👍Helpful based on the Impact.

[akshayp]

@Prince Arora please ignore line 13 to 18, because of then i was just getting that loading pop up as shown in screenshot 3,

apart from that before returning true i have added your line of code only

[Prince Arora]

@akshayp ,

Please check the screenshot, the first UI page has some hidden fields, if you change the content of UI page, your code will not get those field to update the record, so best possible way to do is
Just go with both the modals together.

If you change the content of the first page or if you destroy the first modal it will impact your further logic, just go ahead with both the modals together
Once someone click on Ok button open a new modal and render the content.
I hope you will get my point!

If my answer solved your issue, please mark my answer as ✅ Correct & 👍Helpful based on the Impact.

[akshayp]

@Prince Arora 

sorry, im not getting your point,

can you just tell me that with your code---

{

var mod = new GlideModal().get('sn_vdr_something........'); // Please provide the name of first GlideModal parameter 

mod.renderWithContent('<div><img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmRkZDExYWRhODFjYWVjOGNjYzhmMDgwODRlNDBjN2Q0MGQ4ZT..."></img></div>')}

that where i have add this in client script of my ui page---

{

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() {

//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;
}

so that on click of 'OK', loading will pop up (as in your code) and my existing processing script logic gets executed to update my record

Thanks!!