Modal UI page is not getting close on Submit

[Giampiero1]

HI All,

i've built a UI page that is called by a UI Action in from the Incident form :

strike_update();

strike_update();
function strike_update(){
	var gm = new GlideModal('strike_update', false, 'modal-lg');
	var strikeNumber= g_form.getValue('u_strike_number');
	gm.setTitle("strike update");
	gm.setPreference('sysid', g_form.getUniqueValue());
	gm.setSize(600, 600);
	gm.render();
}

and built a UI Page "strike_update" for store some information that we need. 

in the HTML section there are the OK Cance Button :

<tr>
<td align="left" nowrap="true"><br /><g:dialog_buttons_ok_cancel ok="return validateForm();" cancel="return onCancel();"/>
</td>
</tr>

by Clicking on "OK" button the UI page is not closed but is redirected to the UI page itself in full screen mode. 

function validateForm() {
	var strNumber = parseInt(g_form.getValue('u_strike_number'));
	if (isNaN(strNumber)) {
		strNumber=1;
	}else{
	        strNumber = parseInt(strNumber)+1;
	}	
	if (strNumber>=4 ){
		alert("${JS:gs.getMessage('You are at last Strike')}");
		return false;
	}else {
		g_form.setValue("u_strike_number", strNumber);
		GlideDialogWindow.get().destroy();
	        return true;	
	}
}

Essentially our need is to update some fiekld in the Incident form and close the Modal UI Page remaining on Incident  page

Any hint on this ?

Thanks for your support

[Mark Guldhammer]

Hi

Your code looks ok, so it is a little strange. The redirecting behavior is usually because the form is being submitted incorrectly. I have not used the dialog_buttons_ok_cancel before, but I think you just need to remove the ; and maybe in the validateForm() return false instead of true.

ok="return validateForm()"

-Mark

[Mark Guldhammer]

This this solve the issue?

[Giampiero1]

Hi Mark, unfortunately your solution has not solved the issue. 

I've played around and applied this solution :

1) Changed the button as 

<div class="row" >
<footer class="modal-footer flex float-right">
        <button class="btn btn-secondary" id="btnClose" style="margin-right:16px;" data-dismiss="GlideModal" onclick="closeDialog()">${gs.getMessage('Cancel')}</button>
	<button class="btn btn-primary" id="btnOK" data-dismiss="GlideModal" onclick="validateForm()">${gs.getMessage('Save')}</button>
</footer>
</div>

2) created a function "CloseDialog()" that is called in both cases (I don't need to reload the page)

function closeDialog() {
	GlideDialogWindow.get().destroy();
	window.location.reload();
}

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"]')) {
    //location.reload();
  }
});

In this way it works, i'n not sure that is the correct way but ...

[Mark Guldhammer]

Well you did remove the ; I see 🙂 

GlideDialogWindow.get().destroy();

Should be enough to close down the dialog window, doesn't it work without the reload?

In either case, unless you want the button to submit the form and reload the page, you should always return false to prevent this. I think you should take another look at your validateForm logic, and try adding some console.log's to make sure it does what you expect.