script include to write to innerHTML

[allen_pitts]

Hello implement,

Got JavaScript to write the date to ESS portal page from inline script.
But the script is pretty lengthy so figured it would
be best to put the script into an include.

Didn't work. So I dumbed it down so to get something
to write:

+++++++++++++begin script include named JS_Date+++++++++++++++++

var JS_date = Class.create();

JS_date.prototype = {

      initialize: function() {

      },

dateFunction : function() {

document.getElementById('cmsDateTime').innerHTML = "Today is";},

      type: 'JS_date'

};

+++++++++++++end script include named JS_Date+++++++++++++++++

This the code at the banner

+++++++++++++begin script in banner block for ESS portal page++++++++++++++++

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

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

<div style = "background-color: #004280; color: #FFFFFF; width: 100%; height: 150px; text-align: center; margin-left: auto; margin-right: auto;">

<script>

var DateVar = new JS_Date();

DateVar.dateFunction();

</script>

<script>

dateFunction()

</script>

<div id="cmsDateTime" style = "text-align: center; color: white; position: relative; top: 15px;">

</div>

<div class = "logo" style = "float: left; position: relative; top: 15px; padding-left: 10%; background-color: #COCOFF;">

<img src="lhp-logo.pngx" width="217" height="112"/>

</div>

<div class = "snow" style = "float: right; padding-right: 10%; position: relative; top: 35px;">

<img src="SNow_logo_b.gifx" width="230" height="62"/>

</div>

</div>

<div style = "background-color: #FF8B03; width: 100%; height: 6px; ">

</div>

<div style = "background-color: yellow;   width: 853px; height: 330px; margin-left: auto; margin-right: auto; ">

<img src="Shared_vision.jpgx" width="853" height="330"/>

</div>

</j:jelly>

+++++++++++++end script in banner block for ESS portal page++++++++++++++++

This is the syntax found in the wiki at
Script Includes - ServiceNow Wiki
but it is not working. Have never done one of these before so probably
have some simple error.

For instance, to test passing the getElementById value an

HTML page was made with a JS file to make sure the innerHTML
element is working. In the test page the function, dateFunction, has to be called from the
HTML page to get the innHTML attribute of the getElementByID method into HTML DOM object
document.getElementById('cmsDateTime').innerHTML = today [In the code above
I dumbed down the value passed to getElementById to a simple string.]
But does the function have to be called in the portal banner jelly?
If so,what is keeping the string from being written into the div?

The example in the wiki does not show the code in the receiving page in <script> tags.
But I thought this was assumed. But perhaps the code should not be in tags?

Thanks.

Allen Pitts
LHP Hospital Group

[Brad Tilton · Accepted solution]

You can only run server side code inside of a script include and anything manipulating the DOM is client side. Instead of a script include, you want to use a UI Script for client side code. A UI Script is basically a script include's client side equivalent.

UI Scripts - ServiceNow Wiki

There is also an easy way to reference a UI Script in your jelly code.

Extensions to Jelly Syntax - ServiceNow Wiki

[cborkert]

Script include runs server-side, so a client script would be much better.   You should be able to put this right in your UI page (jelly)..   replacing 'new Date()' with any valid javascript if you want..

<script>

  document.write(new Date());

</script>

although I prefer to not use document.write for page rendering, and you could do this..

<div id='thedate'/>

<script>

  document.getElementById('thedate').innerHTML = new Date();

</script>