Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Javascript doesn't work to some elements of Confluence

Xiao Song
Xiao Song December 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!

Answer
Watch
Like Be the first to like this
1070 views

2 answers

0 votes
Davin Studer
Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 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');
    });
});
View More Comments
Xiao Song
Xiao Song December 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?

Like
Davin Studer
Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 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?

Like
Reply
0 votes
Christo Mastoroudes _Adaptavist_
Christo Mastoroudes _Adaptavist_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 27, 2017

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.

View More Comments
Xiao Song
Xiao Song December 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?

Like
Xiao Song
Xiao Song December 28, 2017

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

Like
Reply

Suggest an answer

Log in or Sign up to answer
Confluence
Confluence
TAGS
AUG Leaders

Atlassian Community Events

    See all events