JavaScript gets mangled in User Macros

Steve Goldberg
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.
August 15, 2013

Related to https://answers.atlassian.com/questions/21353/can-t-use-script-tag-in-user-macros, I'm trying to include some simple JS in a user macro. However, whenever I do it gets mangled as Confluence renders it wrapped in "//<!CDATA[ ... //]]>".

Why is this happening?

How can I include some JS in my user macro?

6 answers

1 vote
CharlesH
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.
August 22, 2013

I used your code in a user macro.

When I add that macro to the page, it functions correctly. There are no Javascript errors (I checked with Firebug).

The Javascript was not mangled, but it was wrapped with the comments you noted:

//<![CDATA[
.... 
//]]>

For user macros I've written I also get this behaviour, but I don't think it's a cause for concern. Here's an explanation: http://stackoverflow.com/questions/66837/when-is-a-cdata-section-necessary-within-a-script-tag

Steve Goldberg
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.
August 22, 2013

Well when I put this into a user macro and put into the page none of the JS loads and I don't see the Twitter widget. I assumed that the CDATA stuff was causing it to malfunction.

So to confirm, the Twitter widget loads for you when you put that code in a user macro and call it in a page?

1 vote
David Yu
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.
August 15, 2013
Steve Goldberg
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.
August 18, 2013

Soooo you're answer is "this is a known issue"?

0 votes
AlexH
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.
December 12, 2013

I am late to this party, but I've found that when using the <script> tag inside user macros I needed to make sure to put the closing </script> on a seperate line so that the //<!CDDATA[ ... //]]> block doesn't eat the closing tag. My code inside the CDDATA block runs fine as long as the closing tag isn't consumed accidentally.

I noticed that you have your </script> at the end of the same line as the opening tag.

This probably is a bug in the way confluence is constructing the CDDATA block.

Steve Goldberg
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.
December 12, 2013

Have you tried embedding the Twitter widget as above? The script Twitter provides is entirely on one line.

AlexH
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.
December 13, 2013

My use case had nothing to do with twitter -- I wrote some javascript to load a video player and stream videos from an external source -- so no, I didn't try using the twitter javascript. But there's no reason you couldn't add a newline to their javascript if it prevents the //<!CDDATA[...//]]> block from eating it and mangling the meaning of the script if there is no close tag.

Steve Goldberg
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.
December 16, 2013

Sorry Alex, I misread what you wrote originally. I thought you said that you *had* to put the closing <script> tag on the same line and not that it had to be on a separate one. Next time I'm poking around with my user macros I'll give it a go.

0 votes
Kirstin Seidel-Gebert
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.
September 1, 2013

Hello Steve,

I never used JS in a user macro, but I thought I'd give it a try and copied the example macro you posted into a test user macro.
In our Confluence 4, it only renders the link. Underneath the link there's no such thing as a widget displayed. However, the page contains the <script>, wrapped into a CDATA as you described.

Perhaps there's some kind of permission missing?

Cheers,
Kirstin

Steve Goldberg
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.
September 1, 2013

I'm not entirely sure. I've spent some more time looking at it and if you put arbitrary JS into a user macro then it works fine but if you try to call an external JS file then it simply won't do it. I'm entirely sure why it would do this but the only suggestions I've seen are "if you want to call external JS you have to put it in a plugin". I'm not writing a plugin just to call the Twitter widget.

(On the plus side, it turns out that the Widget Connector works with Twitter again so that solves that specific problem, but not the larger of one of why external JS can't be loaded. Perhaps you're right, and it's a permission thing.)

0 votes
CharlesH
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.
August 22, 2013

@Steve - What's your body processing option for this user macro? This could have a bearing on how the javascript is output.

Steve Goldberg
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.
August 22, 2013

None. There is no body in this macro. Are you able to put that code into a user macro?

0 votes
CharlesH
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.
August 22, 2013

@Steve - can you post your user macro as it stands right now, and what body processing option you have chosen?

I frequently use html and javascript within user macros and haven't come across any mangling issues up to now.

Regards,

Charles

Steve Goldberg
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.
August 22, 2013

I tried to embed the JS Twitter gives you for embedding tweets, e.g.:

&lt;a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE"&gt;Tweets by @twitterapi&lt;/a&gt;
&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt;

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events