Custom Code written in HTML MACRO for Confluence is not working

[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

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

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

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
}

//end on radio button change event
});

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');

} 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');
}
};


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

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

[Davin Studer]

If you open up the JavaScript console in your developer tools (F12) are you seeing any errors thrown?

[niranjan]

Hello @Davin Studer  

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

[Davin Studer]

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.

[niranjan]

Please look at the Image below .!!  

[Davin Studer]

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.

[Davin Studer]

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

[niranjan]

Hello @Davin Studer 

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

[Davin Studer]

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.

[niranjan]

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?