JS - Javascript not working on first load create screen / change issue type

[Deleted user]

Hello, 

i've ran into an issue that i cannot seem to resolve. 

My javascript function only loads on the second try after opening the create screen. 

The following is my full JS code that i place under the description field:

<input class="callAPIBtn" type="button" id="apiBttn" value="Retrieve Info">

<p id="text"></p>

<script type="text/javascript">

 AJS.$(document).ready(function() {
 AJS.$("#apiBttn").click(function() {
 
 var invalidCustNum = "<font color='red'>Invalid Customer ID, please try again</font>";
 var cid = getCustomFieldValue(10000).trim();
 
 if (cid.length != 9 || cid.substring(0, 3) != "100"){
 
 display(invalidCustNum);
 
 } else {
 
 var url = "http://RESTAPI/" + cid + "/";
 
 AJS.$.ajax({
 url: url, 
 success: function(result){
 
 // Key = customfield ID, Value = Value of JSON object
 var customfields = {
 10004: "firstName",
 10005: "lastName",
 10301: "emailAddress",
 10674: "address",
 10024: "mobilePhone"
 };
 
 for (cf in customfields) {
 var id = "customfield_" + cf;
 
 if (document.getElementById(id)) {
 setCustomFieldValue(cf, result[customfields[cf]].trim().replace(" "," "));
 } 
 }
 
 //Second Webbus call to get Service ID
 var servicesURL = "RESTAPI" + cid + "/services?status=active"
 
 AJS.$.ajax({
 url: servicesURL, 
 success: function(result){
 
 var text = "";
 
 for (val in result) {
 
 text += result[val]["accountNumber"] + " - " + result[val]["serviceIdentifier"] + " - " + result[val]["serviceType"].toUpperCase() + "<br/>"; 
 } 
 
 display("<font color='green'>Success</font>" + "<br/><br/>" + text + "<br/>");
 
 }
 });
 
 }, error: function(data) {
 
 display("<font color='red'>Error! Please try again</font>");
 
 }});
 }});
 });

 function display(text) {
 document.getElementById("text").innerHTML = text;
 }
 
 function getCustomFieldValue(id) {
 var customField = "#customfield_" + id;
 var fieldVal = AJS.$(customField).val();
 return fieldVal;
 }
 
 function setCustomFieldValue(id, value) {
 var customFieldId = "#customfield_" + id;
 AJS.$(customFieldId).val(value);
 }
 
</script>

<style type="text/css" style="display: none">
 
 .callAPIBtn {
 font-family: verdana;
 color: #1E286A !important;
 font-size: 10px;
 box-shadow: 1px 1px 1px #BEE2F9;
 padding: 3px 12px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: 1px solid #3866A3;
 background: #FFFFFF;
 }
 
 .callAPIBtn:hover {
 color: #14396A !important;
 background: #468CCF;
 background: linear-gradient(top, #468CCF, #63B8EE);
 background: -ms-linear-gradient(top, #468CCF, #63B8EE);
 background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
 background: -moz-linear-gradient(top, #468CCF, #63B8EE);
 }
 
</style>

I'd appreciate any suggestion or help with this. 

Thank you in advance.

Pon

[Nir Haimov]

Hi @[deleted],

Are you still having trouble with hit issue, or did you managed to solve this?