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

Javascript doesn't work to some elements of Confluence

Xiao Song Dec 27, 2017

I'm trying to customize the look of Confluence with Javascript and I'm still doing some experiments. So I wrote:

 AJS.toInit(function () {
AJS.$('.name a').text('test');
});

This changed the space name all right. Then I wanted to change the page titles in the left sidebar dynamically. So I wrote:

AJS.toInit(function () {
AJS.$('.plugin_pagetree_children_content span a').text('test');
});

Then this was not working! I'm not very good at programming, but I'm guessing this was related to elements not loading when my script ran. Could someone help me? Thanks in advance!

2 answers

0 votes
Christo Mastoroudes [Adaptavist] Dec 27, 2017 • edited

Your code seems to work when I tested it locally, but it changed all the page titles in the sidebar because your selector is essentially selecting all the elements with that class name that has a anchor inside a span.

 

You will have to be more specific becuase that selector returns an array of elements. Since the sidebar is dynamically populated the elements of the array will be different at times.

 

So what you would need to do is itterate over the array checking each anchor text till you find the one that matches your target, then change just that one.

 

You can be more specific by saying you only want the first element in the array by using $('.plugin_pagetree_children_content span a')[0].text('test');

 

You can easilly test your javascript code snippets in the developer console of Chrome (or other browser). In the console you could just use $('.plugin_pagetree_children_content span a')[0].text('test') and observ the result immediately.

 

Essentially AJS.toInit(function () { means that the code will only run once the page is finished loading. So if you are still having an issue it is probably something else.

Xiao Song Dec 28, 2017

Thanks Christo! Do you think it might be the place I put the script?

I have put the code below at the end of the <body> and it is working:

<script type="text/javascript">
function circle_check() { 
if ($('.plugin_pagetree_children_span ').length) { 
$('.plugin_pagetree_children_span').prepend('<span id="no_label">abc</span>');
return; 
}
setTimeout("circle_check()",500); 
}
circle_check();
</script >

 

It's acceptable for me. But I don't really like it. Do you have any idea?

Xiao Song Dec 28, 2017

BTW, I'm using an extension called Version Scroll. I wonder if it has a thing to do with it.

0 votes
Davin Studer Community Leader Dec 27, 2017

Try this. You need to bind to the event that is fired when the nav has finished loading.

AJS.toInit(function(){
AJS.bind('pagetree-children-loaded', function(){
AJS.$('.plugin_pagetree_children_content span a').text('test');
});
});
Xiao Song Dec 28, 2017

Thanks Davin. Unfortunately, it's still not working. I also tried function "load()" and it had no effect, either.

I have put the code below at the end of the <body> and it is working:

<script type="text/javascript">
function circle_check() { 
if ($('.plugin_pagetree_children_span ').length) { 
$('.plugin_pagetree_children_span').prepend('<span id="no_label">abc</span>');
return; 
}
setTimeout("circle_check()",500); 
}
circle_check();
</script >

 

It's acceptable for me. But I don't really like it. Do you have any idea?

Davin Studer Community Leader Dec 29, 2017

It worked for me in Confluence 6.4.2. That is the proper way to do it. Many of Atlassian's components have events that are fired when they finish loading so that you can do this kind of stuff. Are you sure put the code in correctly? How are you running it? Are you running it from the html macro, a user macro,  or from Custom HTML in Confluence Admin?

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

2,502 views 11 28
Read article

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