After upgrade to 6.7 hiding certain selectors doesn't work

[Graeme Baker]

Hi,

I'm trying to create a slimmed down UI for a few spaces we want to expose to external users. Everything was working ok until the upgrade to 6.7.

Basically, I want all users to have everything, except these external ones. I'm adding this in to the main layout of a single space before the </head> tag.

#if ($userAccessor.hasMembership('confluence-users', $helper.action.remoteUser.name))
#else
    <script type="text/javascript">
    AJS.toInit(function(){ 
		AJS.$('#space-menu-link').hide(); // Nav-bar Spaces menu
		AJS.$('#people-directory-link').hide(); // Nav-bar People directory
		AJS.$('#help-menu-link').hide(); // Nav-bar Help menu
		AJS.$('#notifications-anchor').hide(); // Nav-bar notifications tray
		AJS.$('#user-menu-link').hide(); // Nav-bar User profile menu
		AJS.$('#page-favourite').hide(); // Page header Favourite button
		AJS.$('#watch-content-button').hide(); // Page header Watch page button
		AJS.$('#shareContentLink').hide(); // Page header Share content button
		AJS.$('#action-menu-link').hide(); // Page header Action menu
		AJS.$('.page-metadata-modification-info').hide(); // Page Metadata information
		AJS.$('#comments-section').hide();
    });
</script>
#end

For some reason, the inclusion of the #help-menu-link breaks the entire script, and the rest are ignored. If I remove it it works.

Additionally, the following lines have no effect at all, which is confusing, as using CSS and the selector names does work.

#likes-section
#labels-section

 Anyone got any ideas why, or suggestions?

I'd also like to hide the fav star in the side bar but I wasn't sure how.

Thanks
Graeme

[Graeme Baker]

I've just tried this out on a clean install, with a brand new space and have found the following:

AJS.$('#help-menu-link').hide();

is being turned into:

AJS.$('<a title="Help" href="    ${context.docLinker.getLink($key)}" target="_blank"

   href="    ${context.docLinker.getLink($key)}" data-help-link-key="$key" class="ual-help-link help-link ">

    <span class="aui-icon aui-icon-small aui-iconfont-help">Help</span>

</a>

-menu-link').hide();

and

AJS.$(‘#labels-menu-link').hide();

 is being turned into

 AJS.$('         (None) -section').hide();

[Christo Mastoroudes _Adaptavist_]

You can do a small test. Disable or remove your custom code. Load the page, open the developer console and paste the line you would like to test in the console. If you paste 

AJS.$('#help-menu-link').hide();

then the help menu link should be hidden. I tried this locally v6.7.0 and it is working. I don't think the problem is with your code between the <script> tags but maybe the code elsewhere in that layout template.

There are alternative ways of doing what you want, but they do require javascript knowledge and it won't be as clean as yours. Probably it is best to try fix what you have first.

[Christo Mastoroudes _Adaptavist_]

I have tried your code at the top of the page on a local test instance v6.7.0 and it all seems to work except for the labels section which is not hidden. However if I try just hiding the labels section after the page loads with the same line of code it works. I can only assume that the labels section is hidden by your code but then shown again. It happens so fast that it seems to not be hidden.

As for the help icon, if you paste your code after the </html> tag it should work.

[Graeme Baker]

Thanks. The weird part is though, is that I haven't touched anything else in that layout...it's out of the box!

[Christo Mastoroudes _Adaptavist_]

I think you hit the nail on the head.

The real problem is that

AJS.$(‘#labels-section').hide();

is turned into

AJS.$('         (None) -section').hide();

More specifically "#labels " is being converted in to "(None)".

I think a work around here is to not use JQUERY for hiding the labels section.

Try this instead

document.getElementById("labels-section").style.display = "none";

If this answers your question, please mark it as answered.

[Graeme Baker]

I'll give it a go. Forgive the obvious question, but should this be added to the layout itself in the head?

[Christo Mastoroudes _Adaptavist_]

Hi, @Graeme Baker,

I was away for a week.

To answer your question you can simply replace

AJS.$(‘#labels-section').hide();

with

document.getElementById("labels-section").style.display = "none";

within the script tags and within the AJS.toInit function. As to where you place the script tags, I found an interesting post:

https://stackoverflow.com/questions/4315982/are-scripts-not-in-head-ok

[Christo Mastoroudes _Adaptavist_]

Hi, 

I had a quick look and the selector names have not changed, so it must be some other factor.

I would suggest opening the development editor of chrome and have a look at the console section for any javascript errors. This might give you a clue as to the reason.

As for hiding the fav star you could try: AJS.$('#space-favourite-add').hide();

[Graeme Baker]

I can see various warnings. There is one POST error:

This was the link:

http://knowledge2.revenuewire.com/synchrony-proxy/v1/data/Synchrony-75f76f32-05ed-3cff-911c-c13f938676e2/confluence-32866354?state-at=@head&state-format=type-tagged&rewrite-request=true&cached=true

and the response

{"type":"unauthorized-access","message":"Not authorized to access this resource."}

 Would that account for it?

[Graeme Baker]

Just found another actually:

Uncaught SyntaxError: Invalid or unexpected token

http://.../display/DOC2/Doc_Test2+Home

This line is 100% causing it, as its gone if removed

AJS.$('#help-menu-link').hide(); // Nav-bar Help menu

Likes and Labels removal doesnt work this way either at all, and does not throw this error.

Is there a better way to hide these elements based on group membership?