Custom Code written in HTML MACRO for Confluence is not working
Asked by niranjan:

Hello Community,

we have a problem with the custom code (HTML/JS) written in HTML Macro for Confluence. We are seeing this issue after the confluence was upgraded to new version and we didn't make/add any changes to the code.

The problem is, when the user select the radio button (blue color) and refresh the page the custom code was supposed execute and change the NAME and COLOR of the output (red color), Please check the below image for the example.

Here is the sample code for one of the Stakeholder Status (Customer Adoption):

\<p id="demo"\>\</p\>  
\<!-- For each table update the following to checklist-status_X, where X is the number of the status by order --\>  
\<span id="checklist-status" class="aui-lozenge status-macro conf-macro output-inline" style = "display:block; margin-left: auto; margin-right: auto;"\>\</span\>

\<script type="text/javascript"\>

var criterianame  
var statuscolor  
var statustext

<br />

var page_id = $('meta\[name=ajs-page-id\]').attr("content");

(function ($) {  
AJS.toInit(function() {  
$ ( "input\[type='radio'\]" ).change(function() {  
//Check input ($(this).val() ) for validity  
//Values for each radio box are working and acknowledged by the system  
criterianame = $(this).attr('macroid');  
statuscolor = $(this).val();  
statustext = $('#'+criterianame+'_text').text();  
criteriatext = $('#'+criterianame+'_criteria').text();

//Delete existing status update  
jsondata = { "key" : criterianame, "value" :  
{  
"status": statuscolor,  
"statustext": statustext  
}  
}

$.ajax  
({  
type: "DELETE",  
url: "https://confluence:XXXX/rest/api/content/" + page_id + "/property/" +criterianame,  
contentType:"application/json; charset=utf-8",  
dataType: "json",  
async: false,  

data: JSON.stringify(jsondata),  
success: function (data) {  
///assign new page id to variable  
//alert('Old properties deleted');  

},  
error : function(xhr, errorText){  
//alert('Error '+ xhr.status);  
}  
});  
//end document properties

<br />

//Add status to report if red or yellow  
//Create document properties  
jsondata = { "key" : criterianame, "value" :  
{  
"criteriatext": criteriatext,  
"status": statuscolor,  
"statustext": statustext  
}  
}

<br />

if (statuscolor=='Red' \|\| statuscolor=='Yellow') {  
//save new status and text  
$.ajax  
({  
type: "POST",  
url: "https://confluence:XXXX/rest/api/content/" + page_id + "/property",  
contentType:"application/json; charset=utf-8",  
dataType: "json",  
async: false,  

data: JSON.stringify(jsondata),  
success: function (data) {  

alert('New properties added');  

},  
error : function(xhr, errorText){  
alert('Error '+ xhr.status);  
}  
});  
//end add new status  
}

<br />

//end on radio button change event  
});

<br />

var row_stat;  
var red = 0;  
var yellow = 0;  
var green = 0;  
var na = 0;  
var ns = 0;  
var i;  
var stakeholder_stat;

for(i = 1; i \< 6; i++) {  
var row_id = "LIM-RadioButton-"+page_id+"-custadopt" + i;

empty = document.querySelector('input\[name=' + CSS.escape(row_id) + '\]:checked');  
if(empty == null) {  
stakeholder_stat = "Not Started";  
continue;  
} else {  
var row_stat = document.querySelector('input\[name=' + CSS.escape(row_id) + '\]:checked').value;  
if(row_stat === "Green") {  
green++;  
} else if (row_stat === "Yellow") {  
yellow++;  
} else if (row_stat === "Red") {  
red++;  
} else if (row_stat === "N/A") {  
na++;  
} else if (row_stat === "Not started") {  
ns++;  
} else {  
stakeholder_stat = "Not Started";  
}}  
}  

//Update $('#checklist-status') to $('#checklist-status_X')  
var checkList = $('#checklist-status');  
var setStatus = function() {  
alert(stakeholder_stat);  
if (stakeholder_stat === "Not Started") {  
checkList.removeClass('aui-lozenge-current aui-lozenge-success aui-lozenge-error').addClass('aui-lozenge').text('Not Started');  
} else if (red \>= 1) {  
checkList.removeClass('aui-lozenge-current').addClass('aui-lozenge-error').text('RED');  
//alert('red');

<br />

} else if (yellow \>= 1) {  
checkList.removeClass('aui-lozenge-success').addClass('aui-lozenge-current').text('YELLOW');  
} else if (green \>= 1) {  
checkList.removeClass('aui-lozenge-current aui-lozenge-success').addClass('aui-lozenge-success').text('GREEN');  
} else if (na \>= 1) {  
checkList.removeClass('aui-lozenge-current aui-lozenge-success aui-lozenge-error').addClass('aui-lozenge').text('N/A');  
} else {  
checkList.removeClass('aui-lozenge-current aui-lozenge-success aui-lozenge-error').addClass('aui-lozenge').text('Not Started');  
}  
};  

<br />

setStatus();  
$('.lim-radiobutton').on('click', SetStatus)

//AJS.bind("inline-tasks.status-update.complete", setStatus);  
});  
})(AJS.$);  
\</script\>

![PICTURE.jpg](/t5/image/serverpage/image-id/66052i175F12908E4DDF16/image-size/large?v=v2&px=999 "PICTURE.jpg")


Answers:
author: Davin Studer
body: If you open up the JavaScript console in your developer tools (F12) are you seeing any errors thrown?

comments: author: niranjan
body: Hello [@Davin Studer](/t5/user/viewprofilepage/user-id/781467)

Yes, It showing only one error - "TypeError: Cannot set property 'InlineDialog' of undefined".


author: Davin Studer
body: I don't see any calls to InlineDialog in your code above. Is it being called elsewhere without a try/catch block? If it fails then your code may never run. You should be able to click the error and find out where it is being called.


author: niranjan
body: Please look at the Image below .!! ![Capture1.JPG](https://community.atlassian.com/t5/image/serverpage/image-id/66067iA1E3D781735A6EDD/image-size/large?v=v2&px=999 "Capture1.JPG")


author: Davin Studer
body: On the sources tab you should be able to see the code for the Confluence page. I would then do a search and find the spot in your page where the JavaScript is inserted. Then you can put in break points and walk through your JavaScript. If it is your script that is causing the issue then you should be able to see that by walking the script. If it errors before even getting to your script then you will need to look elsewhere for the issue.


author: Davin Studer
body: I see **RefinedWebPack.1** in the error. Are you using the **Refined - Structure and Theme Confluence** app? Could be an issue with your theme?


author: niranjan
body: Hello [@Davin Studer](/t5/user/viewprofilepage/user-id/781467)

No, we are using the default "Global Look and Feel" theme.


author: Davin Studer
body: Well, like I said I would try putting a break point into you code and stepping through it to see if it's the custom code or not. If it never even breaks that means the error is happening outside your code and you code isn't even being executed.


author: niranjan
body: Thank you for the feedback, If i don't find an error with in the code then where I need to look next to solve this issue?


Tags: confluence-server

server