Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Custom Code written in HTML MACRO for Confluence is not working

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>

 

PICTURE.jpg

1 answer

0 votes
Davin Studer Community Leader Sep 12, 2019

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

Hello @Davin Studer  

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

Davin Studer Community Leader Sep 12, 2019

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.

Please look at the Image below .!!  Capture1.JPG

Davin Studer Community Leader Sep 12, 2019

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 Community Leader Sep 12, 2019

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

Hello @Davin Studer 

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

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.

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? 

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

494 views 24 9
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you