Javascript doesn't work to some elements of Confluence

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

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.

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?

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

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 Champion 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
Community showcase
Published Nov 29, 2018 in New to Confluence

How to use Confluence Cloud for stakeholder management

Most of us don’t need much convincing that stakeholder management is important. It just makes sense that keeping everyone in-the-know on projects and assigning clearly defined roles is key to having ...

1,216 views 4 6
Read article

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you