Issue with DOM document.getElementById("....")

[balaji_charapal]

Hi,

I have UI Page and Dynamic content block.

On click of Password Reset on UI page, service catalog page for password reset should display on the Dynamic content block, but it is giving an error.

TypeError: document.getElementById(...) is null

UI Page having below code

<script>

function Password()

{

      document.getElementById("iframe_Password").style.visibility="visible";

      document.getElementById("iframe_Password").style.position="relative";

      document.getElementById("iframe_Password").style.width="100%";

      document.getElementById("iframe_Password").style.height="500px";

      document.getElementById("iframe_Accessories").style.visibility="hidden";

      document.getElementById("iframe_Accessories").style.position="absolute";

}

function Accessories()

{

      document.getElementById("iframe_Password").style.visibility="visible";

      document.getElementById("iframe_Password").style.position="relative";

      document.getElementById("iframe_Password").style.width="100%";

      document.getElementById("iframe_Password").style.height="500px";

      document.getElementById("iframe_comm_device").style.visibility="hidden";

      document.getElementById("iframe_comm_device").style.position="absolute";

}

</script>

<table style="background-color:#5D5D5D" width="100%" cellspacing="2">

<tr>

<td/>

<td >

<img src="test.png"     width="120px" height="120px" onclick="Password()"/>

<DIV class="shd_filter" STYLE="position:relative; " onclick="Password()">

<CENTER><FONT SIZE="5.5px" COLOR="#5D5D5D"><b>Password Reset</b></FONT></CENTER>

</DIV></td>

<td class="txt_clr_chng" dropzone="true">

<img src="access.png" width="120px" height="120px"     onclick="Accessories()"/>

<DIV class="shd_filter" STYLE="position:relative; " onclick="Accessories()">

<CENTER><FONT SIZE="5.5px" COLOR="#5D5D5D"><b>Accessories</b></FONT></CENTER>

</DIV></td>

</tr>

</table>

Dynamic content block with IFrame

<?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 id= "div_order_IT_service_catalog" style="text-align: center;">

<iframe src="https://demo001.service-now.com/com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=5eb07da52b46..." style="visibility:hidden; width:0px; height:0px" id="iframe_Password"></iframe>

<iframe src="https://demo001.service-now.com/com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=7b8f8ab22b4a..." style="visibility:hidden; width:0px; height:0px" id="iframe_Accessories"></iframe>

</div>

</j:jelly>

Due to Security reasons i changed names

can some one look in to this and help me to fix this issue.

appreciate your quick response.

Regards,

Bala

[BenPhillipsSNC]

Hi Bala,

Please try using the method

gel(element);

and see if that helps.

Examples can be found here:

Useful Form Scripts - ServiceNow Wiki

Useful Catalog Scripts - ServiceNow Wiki

Useful Field Scripts - ServiceNow Wiki

Thanks  

[balaji_charapal]

I tried Ben, but no luck

Still i am getting same error if i use gel

TypeError: gel(...) is null

If it is document.getElementById() getting below error.

TypeError: document.getElementById(...) is null

Regards,

Bala

[ChrisBurks]

Balaji,

Is the catalog item using the UI page? And the Dynamic Content block is what is pulling up the catalog item?

If that's the case then the javascript won't work because the javascript really exists on the UI page which is pulled in through an iframe and not really on the same page as the content on the Dynamic Content block. Javascript doesn't seamlessly work through iframes.

Your javascript would have to exist on the page that's holding the iframe. Then you can capture the iframe element. However if you need to access an element within the iframe and not the iframe itself, you would need to capture the iframe element and dot walk through the iframe down into that through the contentWindow or contentDocument (depending upon browser) to the element that exists on the remote page.

I hope that helps

[jacobhalls]

This error TypeError: document.getelementbyid(...) is null would seem to indicate that there is no such element with an ID passed to getElementById() exist. This can happen if the JavaScript code is executed before the page is fully loaded, so its not able to find the element. The solution is that you need to put your JavaScript code after the closure of the HTML element or more generally before < /body > tag.