uibModal won't load content until second click

[davilu]

Hi, I'm trying to use $uibModal to open up a modal window that holds an embedded widget.  The modal opens fine on the first click, but every click after that requires two clicks for the modal to load the correct content.  I've read on a few forums that it's because of the template cache and some people suggested not using the script tags, but I'm not sure how to get uibModal to work without the script tags.  Has anyone run into this?  Would love to get some suggestions on how to fix this.  

Here's my code:

<div class="card" ng-click="c.onWidget2('newTask2',task);"></div>

<script type="text/ng-template" id="newTask2">
	<div class="panel panel-default">
		<div class="panel-heading clearfix">
			<h4 class="panel-title pull-left">{{c.taskName}}</h4>
      <span ng-click="c.closeModal()"><i class="fa fa-times pull-right"></i></span>
    </div>
		<sp-widget widget="c.newTask2" options="c.newTaskOptions"></sp-widget>
  </div>
</script>

c.onWidget2 = function(template, task) {
		c.taskName = task.short_description;
		c.modalInstance = $uibModal.open({
			templateUrl: template,
			scope: $scope,
			size: 'lg'
		});
		spUtil.get('hrj_task_activity_scoped', {
			sys_id: task.sys_id,
			table: 'sn_hr_core_task',
			recordInfo: task.taskInfo
		}).then(function(response) {
			c.newTask2 = response;
		});
	};

	//closeModal for the "x" 
	c.closeModal = function() {
		c.modalInstance.close();
	};

[siva_]

Did you try using spModal instead of $uibModal and also i dont think you need script tags in your html you can just remove them and try once

Also please have a look through below link 

https://developer.servicenow.com/app.do#!/api_doc?v=london&id=SPModal-API

Mark this as correct if it resolves your issue and helpful if it really helps.

Thanks,

Siva

[Brent Sutton]

Hi,

Have you thought about using spModel instead of uibModel? This feature is built into Service Portal and should handle all the heavy lifting for you.

You can read up on spModel on ServiceNow docs. There is also information on the ServiceNow developer site.

Brent

P.S. If my suggestion helped then please mark as helpful and/or correct so other community members can benefit from this information.

[davilu]

Hey Brent, yea I've tested spModal and it works great, but our team doesn't like the way spModals look when you embed a widget or a form.  uibModal allows you to customize the modal window, so we can opt to not have a panel-header.  Is there any way to change the way spModals looks?

[Brent Sutton]

I don't think that there is much in the way of options relating to the panel header.

Available Options:

An object that may have these properties.
title - a string that can be HTML that goes in the header. The default is empty.
message - a string that can be HTML that goes in the header. The default is empty.
buttons - an array that contains the buttons to show on the dialog. The default is Cancel and OK.
input - a Boolean. When true shows an input field on the dialog. The default is false.
value - a string containing the value of the input field. The default is empty.
widget - a string that identifies the widget ID or sys_id to embed in the dialog. The default is empty.
widgetInput - an object to send the embedded widget as input. The default is null.
shared - a client-side object to share data with the embedded widget client script.
size - a string indicating the size of the window. Can be 'sm' or 'lg'. The default is empty.

However, there is an option to embed a widget in the modal which you should be able to impact the appearance of. There is an example on the developer site using a clock:

//HTML template
<button ng-click="c.onWidget('widget-cool-clock')" class="btn btn-default">
    Cool Clock
  </button>

//Client script
function(spModal) {
  var c = this;
  c.onWidget = function(widgetId, widgetInput) {
        spModal.open({
            title: 'Displaying widget ' + widgetId,
            widget: widgetId, 
            widgetInput: widgetInput || {}
        }).then(function(){
            console.log('widget dismissed');
        })      
    }
}

Result:

Not sure if this approach will work for you but may open up other ways of how you might approach your requirement. Let me know if it helped.

Brent

P.S. If my suggestion helped then please mark as helpful and/or correct so other community members can benefit from this information.