Javascript doesn't work to some elements of Confluence
Asked by Xiao Song:

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!


Answers:
author: Davin Studer
body: 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');
    });
});
```

comments: author: Xiao Song
body: 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?


author: Davin Studer
body: 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?


author: Christo Mastoroudes _Adaptavist_
body: 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.

comments: author: Xiao Song
body: 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?


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