Issue with UI Page/AngularJS and GlideDialogWindow

Matthew Glenn · ‎11-18-2015

Hey everyone,

Long story short, when I attempt to load a UI Page (w/AngularJS UI Script) in a GlideDialogWindow via a UI Macro, my AngularJS library is not being loaded. I did have a few relevant console errors yesterday but don't seem to be getting them today, but the problem still persists. I can only find one similar post on the community (AngularJS using GlideModal/GlideDialogWindow ). The errors outlined in that post are the exact errors I was receiving (minus the reference to the ngApp/ngController names).

Similar to the post mentioned above, if I go directly to the UI Page, everything loads just fine.

Has anyone seen this before? And more importantly, does anyone have a fix?

tltoulson · ‎11-19-2015

I'm with you on the iFrame hatred. I was taking another look at this problem tonight and I came up with something that seems to work without iframe: manually bootstrapping angular.

Here is a simple example of an angular app in a UI Page or UI Macro.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <!--Note that ng-app is not used-->

   <div id="myAngularApp">

   <p>Input something in the input box:</p>

   <p>Name: <input type="text" ng-model="name"/></p>

   <p ng-bind="name"></p>

   </div>

   <g:requires name="angular.min.jsdbx" />

   <script>

   // You can add your modules like this and include them as a dependency when you call bootstrap

   angular

   .module('test', []);


   // Then you bootstrap by the div id instead of using ng-app

   angular.bootstrap($("myAngularApp"), ["test"]);

   </script>


</j:jelly>

This leads me to believe the issue is with the timing of the angular auto-initialization when it is loaded dynamically by GlideDialogWindow.

View solution in original post

gags · ‎08-30-2017

Hello,

Is it best practice using iframes ?

Thanks,

GBB

G Balaji · ‎04-06-2018

Hi,

I have a similar issue, only difference I use bootstrap datetimepicker and I'm calling the UI page from UI Action button. bootstrap datetimepicker works good in UI Page but when I call the same UI page from UI Action button, datetimepicker doesn't show up. What am I missing here ?

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

<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"/>

</head>

<body>

<script>
// Prevent jQuery from conflicting with ServiceNow
var $j_custom = jQuery.noConflict(true);
$j_custom(function() {
$j_custom("#datetimepicker1").datetimepicker();
$j_custom("#datetimepicker2").datetimepicker();
});
</script>

<table>
<tr>
<td>Type</td>
<td>
<g:ui_reference table="u_downtime_master" name='type' label="Type" field="u_downtime_type" />

</td>
</tr>
<tr>
<td>Start Time</td>
<td>
<div class='input-group date' id='datetimepicker1'>
<input type='text' name='u_s' id='u_s' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
</tr>
<tr>
<td>End Time </td>
<td>
<div class='input-group date' id='datetimepicker2'>
<input type='text' name='u_e' id='u_e' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
</tr>
<tr>
<td>Total(in min)</td>
<td>
<input type='text' name='total' id='total' />
</td>
</tr>
<tr>
<td>Remarks</td>
<td>
<input type='text' name='remarks' id='remarks' />
</td>
</tr>


<tr>
<td><button onclick="saveValues()">Submit</button></td>
</tr>
</table>
<g:requires name="jquery.min.jsdbx" />
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
</script>
</body>
</html>

</j:jelly>

Client Script:

function saveValues(){
var type = document.getElementById("u_type").value;
var startdate = document.getElementById("u_startdate").value;
var enddate = document.getElementById("u_enddate").value;
var total = document.getElementById("total").value;
var remarks= document.getElementById("remarks").value;

var downtimedetails = new GlideRecord('u_downtime_track');
downtimedetails.initialize();
downtimedetails.u_type = type;
downtimedetails.u_start_time=start;
downtimedetails.u_end_time=end;
downtimedetails.u_total=total;
downtimedetails.u_remarks=remarks;
downtimedetails.insert();
}

UI Action button code:

function openDownTime(){

var sys_id=g_form.getValue("sys_id");
var gdw=new GlideDialogWindow("Washer Downtime");
gdw.setTitle("Insert DownTime Details");
gdw.setPreference("sys_id",sys_id);
gdw.setSize(850,900);
gdw.render();

}

Thanks.

Ihor · ‎12-23-2020

Hi, did you solve this? 🙂

erck · ‎09-11-2024

Does someone have an example of what worked for them ?