Referencing external JavaScript files
58 views
Skip to first unread message
fred2028
Mar 2, 2009, 10:27:28 AM3/2/09
to RedDot CMS Users
In plain HTML:
<script src="file.js" type="text/javascript"></script>
In RedDot, I made a template of type JS and file extension JS, then
copied everything between <script type="text/javascript"> and </
script> into the content class template (much like how a traditional
JS file is made). In my foundation page that uses the JS, I made an
anchor placeholder and put it in place of file.js in the above
example. I made an instance of the JS content class and put the page
in clipboard, then referenced my anchor placeholder to this file.
However, this does not work, gives me JS errors when I SmartEdit, and
the page renders as if no JS is present.
What is the proper way to reference an external JS file without using
media placeholders?
<script src="file.js" type="text/javascript"></script>
In RedDot, I made a template of type JS and file extension JS, then
copied everything between <script type="text/javascript"> and </
script> into the content class template (much like how a traditional
JS file is made). In my foundation page that uses the JS, I made an
anchor placeholder and put it in place of file.js in the above
example. I made an instance of the JS content class and put the page
in clipboard, then referenced my anchor placeholder to this file.
However, this does not work, gives me JS errors when I SmartEdit, and
the page renders as if no JS is present.
What is the proper way to reference an external JS file without using
media placeholders?
沈晓亮
Mar 2, 2009, 11:01:16 AM3/2/09
to RedDot-C...@googlegroups.com
it's not "anchor placeholder" for js file.
--
Best Regards
William Shen
--
Best Regards
William Shen
not...@endtransmission.co.uk
Mar 2, 2009, 11:02:19 AM3/2/09
to RedDot-C...@googlegroups.com
Ahhh this is a common issue. When you're working in smartEdit RedDot
looks for the <body> tag so it can place some reddot code in there
for the dots. If it can't find the body tag, it helpfully adds it for
you as it adds in it's own code... instantly invalidating your code
and causing all sorts of errors to appear. This will also be happening
to your stylesheets; it just won't be as apparent.
There are a couple of options to work around this :
1) In your JS files make the first line /* <body></body> */ . This
gives RedDot somewhere to put it's script so it doesn't break your
project.
or
2) In your link you can add a little bit of extra code so it looks
like <script src="file.js<!IoRangeRedDotMode>&script=1</!
IoRangeRedDotMode>" type="text/javascript"></script> This is supposed
to tell RedDot to not append anything into the script file, but we've
seen it cause other issues, especially when switching between
smartEdit and smartTree.
Finally the best option that we've come across...
3) In addition to your anchor you can set up a container in your
template. Reference the container to your anchor so that the contents
of your JS file appears in the container. Hide the container outside
of RedDot and hide the anchor inside smartEdit so that it looks
something like this :
<!IoRangeNoRedDotMode>
<!IoRangeRedDotMode>
<%cnt_javascript%>
</!IoRangeRedDotMode>
This has a double benefit. Your pages will no longer cause errors in
smartEdit and you should also see a slight speed improvement for the
editors as RedDot will be rendering one page instead of two each time
a page is loaded.
looks for the <body> tag so it can place some reddot code in there
for the dots. If it can't find the body tag, it helpfully adds it for
you as it adds in it's own code... instantly invalidating your code
and causing all sorts of errors to appear. This will also be happening
to your stylesheets; it just won't be as apparent.
There are a couple of options to work around this :
1) In your JS files make the first line /* <body></body> */ . This
gives RedDot somewhere to put it's script so it doesn't break your
project.
or
2) In your link you can add a little bit of extra code so it looks
like <script src="file.js<!IoRangeRedDotMode>&script=1</!
IoRangeRedDotMode>" type="text/javascript"></script> This is supposed
to tell RedDot to not append anything into the script file, but we've
seen it cause other issues, especially when switching between
smartEdit and smartTree.
Finally the best option that we've come across...
3) In addition to your anchor you can set up a container in your
template. Reference the container to your anchor so that the contents
of your JS file appears in the container. Hide the container outside
of RedDot and hide the anchor inside smartEdit so that it looks
something like this :
<!IoRangeNoRedDotMode>
<script src="file.js" type="text/javascript"></script>
</!IoRangeNoRedDotMode>
<!IoRangeRedDotMode>
<%cnt_javascript%>
</!IoRangeRedDotMode>
This has a double benefit. Your pages will no longer cause errors in
smartEdit and you should also see a slight speed improvement for the
editors as RedDot will be rendering one page instead of two each time
a page is loaded.
not...@endtransmission.co.uk
Mar 2, 2009, 11:04:23 AM3/2/09
to RedDot-C...@googlegroups.com
He'd only be using a media placeholder if he was uploading the JS file as a media asset. As he's created it as a content class he will need to use an anchor
Paul
Message has been deleted
fred2028
Mar 2, 2009, 1:12:34 PM3/2/09
to RedDot CMS Users
Thanks for reading my post entirely, I clearly stated NOT using media
placeholders.
On Mar 2, 11:01 am, 沈晓亮 <murainw...@gmail.com> wrote:
> it's not "anchor placeholder" for js file. You'd create a "media" for it.
>
> 2009/3/2 fred2028 <fred2...@gmail.com>
placeholders.
On Mar 2, 11:01 am, 沈晓亮 <murainw...@gmail.com> wrote:
> it's not "anchor placeholder" for js file. You'd create a "media" for it.
>
fred2028
Mar 2, 2009, 1:33:24 PM3/2/09
to RedDot CMS Users
Hmmm I have tried #1. I appended it and SmartEdit the JS and CSS files
and View Source, and I can confirm that only the actual CSS/JS is
outside of comments so that works. However, after clearing page cache
and temporary IE 8 files, I SmartEdit again but no success. I now get
no JS error on 1 of my pages but otherwise no JS works.
For #2, shouldn't it be ?script=1 instead of &script=1 ? And I can
append that to a placeholder right in the template editor?
On Mar 2, 11:02 am, "noti...@endtransmission.co.uk"
and View Source, and I can confirm that only the actual CSS/JS is
outside of comments so that works. However, after clearing page cache
and temporary IE 8 files, I SmartEdit again but no success. I now get
no JS error on 1 of my pages but otherwise no JS works.
For #2, shouldn't it be ?script=1 instead of &script=1 ? And I can
append that to a placeholder right in the template editor?
On Mar 2, 11:02 am, "noti...@endtransmission.co.uk"
Gavin Cope
Mar 2, 2009, 5:56:31 PM3/2/09
to RedDot-C...@googlegroups.com
Use option 3, a combination of an anchor (published site) and a container (SmartEdit and Preview).
<reddot:cms>
<if>
<query valuea="Context:CurrentRenderMode" operator="==" valueb="Int:2">
<htmltext>
<script src="<%anc_javascript%>" type="text/javascript"></script>
</htmltext>
</query>
<query type="else">
<htmltext>
<script type="text/javascript">
<%con_javascript%>
</script>
</htmltext>
</query>
</if>
</reddot:cms>
Then on both the content class instance and the content class itself, reference anc_javascript to con_javascript. That way your current and all future instances will automatically draw in the contents of anc_javascript to con_javascript. This method will also work just as well with a list placeholder in place of the anchor placeholder.
This also gets around the issue whereby when switching between SmartEdit and SmartTree, the javascript "page" always gains focus in SmartTree instead of the actual page you were on.
Cheers,
Gavin
<reddot:cms>
<if>
<query valuea="Context:CurrentRenderMode" operator="==" valueb="Int:2">
<htmltext>
<script src="<%anc_javascript%>" type="text/javascript"></script>
</htmltext>
</query>
<query type="else">
<htmltext>
<script type="text/javascript">
<%con_javascript%>
</script>
</htmltext>
</query>
</if>
</reddot:cms>
Then on both the content class instance and the content class itself, reference anc_javascript to con_javascript. That way your current and all future instances will automatically draw in the contents of anc_javascript to con_javascript. This method will also work just as well with a list placeholder in place of the anchor placeholder.
This also gets around the issue whereby when switching between SmartEdit and SmartTree, the javascript "page" always gains focus in SmartTree instead of the actual page you were on.
Cheers,
Gavin
2009/3/3 fred2028 <fred...@gmail.com>
tonyg
Mar 4, 2009, 5:32:29 AM3/4/09
to RedDot CMS Users
Why dont you just not use reddot for JS files?
In our projects we set up a virtual folder under the reddot website
and then just referance it that way, the only downside is you would
need to copy the JS/CSS files yourself but the benefits are that
designers can work on it outside of reddot.
For example in smart edit
Under the default website (on the CMS server where reddot gets its
files so it would be on teh same level as teh CMS virtual Dir) we
would have a virtual folder called ExternalFiles which would hold the
CSS and JS files.
In the template you would then just need to reference it as "/
externalfiles/file.js"
For Published Site
You would need to surround the referance with some reddot code (Which
is outlined above by gavin) so it would publish
the correct location. So say you copy the js file to your website
under the JS folder you would want the published location to be /JS/
file.js
This means that the users cant go into smart edit and change the
images used in teh css (breaking the site) and cuts down on assets
which are not needed.
> 2009/3/3 fred2028 <fred2...@gmail.com>
In our projects we set up a virtual folder under the reddot website
and then just referance it that way, the only downside is you would
need to copy the JS/CSS files yourself but the benefits are that
designers can work on it outside of reddot.
For example in smart edit
Under the default website (on the CMS server where reddot gets its
files so it would be on teh same level as teh CMS virtual Dir) we
would have a virtual folder called ExternalFiles which would hold the
CSS and JS files.
In the template you would then just need to reference it as "/
externalfiles/file.js"
For Published Site
You would need to surround the referance with some reddot code (Which
is outlined above by gavin) so it would publish
the correct location. So say you copy the js file to your website
under the JS folder you would want the published location to be /JS/
file.js
This means that the users cant go into smart edit and change the
images used in teh css (breaking the site) and cuts down on assets
which are not needed.
not...@endtransmission.co.uk
Mar 4, 2009, 5:42:24 AM3/4/09
to RedDot-C...@googlegroups.com
There are a couple of reasons why it's good to have your JS/CSS inside
RedDot.
1) There are times when it's really useful to be able to manage these
things inside, for example if you have a parent/child project setup
and you want to change something in all the stylesheets that's nice
and quick. Likewise if you need to change a reference in each project,
such as a Google Analytics ID it's also much simpler to do it through
RedDot.
2) It can quickly become an issue if half of your site isn't managed
through RedDot. Say you need to move to a different server, or you're
hacked. You want to do a quick publish and have everything restored
exactly as it was before hand. If you have scripts or files outside of
the system these files could easily become lost and your website
unusable.
You can easily stop editors form going into the JS/CSS files when you
don't want them to with security packages. Best to be safe and keep
everything in RedDot where possible.
RedDot.
1) There are times when it's really useful to be able to manage these
things inside, for example if you have a parent/child project setup
and you want to change something in all the stylesheets that's nice
and quick. Likewise if you need to change a reference in each project,
such as a Google Analytics ID it's also much simpler to do it through
RedDot.
2) It can quickly become an issue if half of your site isn't managed
through RedDot. Say you need to move to a different server, or you're
hacked. You want to do a quick publish and have everything restored
exactly as it was before hand. If you have scripts or files outside of
the system these files could easily become lost and your website
unusable.
You can easily stop editors form going into the JS/CSS files when you
don't want them to with security packages. Best to be safe and keep
everything in RedDot where possible.
Reply all
Reply to author
Forward
0 new messages