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

Deleted user March 4, 2018

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

1 answer

0 votes
Domenico Manzo _Actonic_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 5, 2018

Which context do you use to include this to a pages?

Deleted user March 6, 2018

@Domenico Manzo _Actonic_

 

Thanks for your reply! :)

 

Im using this javascript in the create screen pop up. The code is situated under a custom field description.

 

Sorry not sure if i've answered your questions. 

 

Happy with any advice you can give. 

 

Thanks!

Pon

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events