Modal Window wont close on "OK"

[DanielG]

Hello, for some reason the modal window in the image below will not close when I click "OK" button. It will close if I click "Cancel" button.

Below, is the function that I'm using in my UI page client script.

Note: The function works fine except it doesn't close the window after "return true;"

function onOK() {
    var targetServiceCiID = gel('target_service_ci_pick').value;
    if (!targetServiceCiID) {
        var errMsgEl = $j("#err_message");
        errMsgEl.html("${gs.getMessage('Please assign a Service CI')}");
        errMsgEl.css("display", "block");
        return false;
    }
    addHidden(g_form.getFormElement(), 'sysparm_service_ci_pick', targetServiceCiID);
	g_form.setValue('cmdb_ci',targetServiceCiID);
	return true;
}

function clearErr() {
    var errMsgEl = $j("#err_message");
    errMsgEl.html("");
    errMsgEl.css("display", "none");
}

Any ideas why the modal window won't close?

I feel like my issue lies somewhere between lines 9 - 12 of my code.

[SudhirG]

Hi @DanielG ,

You have to write a code in client controller and call that function in angular template as below.

function onOK() {
    var targetServiceCiID = gel('target_service_ci_pick').value;
   .
   .
   .
   . 
   //Remove return true and define a function c.closeModal() in client controller to close th popu-up.
	//return true;
      angular.element('#submitButtonId').scope().c.closeModal();
}

Client controller:

c.closeModal = function() {
   //modalInstance is var with which you defined to open modal eg.   var modalInstance = $uibModal.open{...};
   c.modalInstance.close();
}

Thanks,

[DanielG]

@SudhirG so I first render my modal via a client script against the 'sc_task' table. See the code below:

function onSubmit() {
    var cmdbCI = g_form.getValue('cmdb_ci');
    // var requestItem = g_form.getValue('sc_req_item');

    if (cmdbCI == 'e5bde6b71bd050904c34c8c11a4bcb0f') {
        console.log('Service CI field has not been updated. cmdb_ci:', cmdbCI);
        var modal = new GlideModal('service_ci_picker');
        modal.setTitle('Service CI field update required');
        modal.setPreference('message', 'Please update the Service CI field before closing the task.');
        modal.render();
        return false; // Prevent form submission
    } else {
        console.log('Update can proceed. cmdb_ci:', cmdbCI);
        return true; // Allow form submission
    }
}

Because my var = modal should i then update the client controller code to look like the following:

c.closeModal = function() {
   c.modal.close();
}

Also, regarding the angular element. How do I know what my element id is? Here is my UI page code:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<p id="err_message" class="notification notification-error" style="display:none"></p>
	<div id="service_ci_picker" style="display:block; padding: 5px 10px">
		<div class="control-label col-sm-12">
			<label id="ci_ref_label"></label>
		</div>
		<div class="col-sm-12">
			<g:ui_reference name="target_service_ci_pick" table="cmdb_ci" completer="AJAXTableCompleter" onchange="clearErr()" 
							order_by="name" query="sys_class_name=service_offering^install_status!=7"/>
		</div>
		<div class="modal-footer">
			<g:dialog_buttons_ok_cancel ok="return onOK();" ok_type="button"/>
		</div>
	</div>
	<script>
		$j(function() {
			var e = gel("sys_display.target_service_ci_pick");
			if (e)
				e.focus();
		});	
		var serviceCiPickerLabel = GlideModal.prototype.get("service_ci_picker").getPreference("sysparm_role_picker_label");
		var rple = $j("#ci_ref_label");
		rple.html(serviceCiPickerLabel);
	</script>
</j:jelly>

You will see my "ok" button under the div tag "modal-footer"

I don't think it has an ID so I'm wondering what I should do in this case?

[DanielG]

I'm using Jelly and not angular JS in this case so how can I make this work with the current Jelly framework?