// you’re reading...

CMS

Using inline Javascript inside RedDot CMS but external files on the webserver


In another post about embedding Javascript inside the RedDot CMS Adrian showed a good way to fool the CMS and enable JS inside your template.

Now maybe you want to use your Javascript code from a template and you don’t want it to be cached. So a good solution is to embed the code inside your template like this:

The basic stuff

<!-- template header blah.. -->
<script type="text/javascript">
  function helloWorld() {
    alert("Hello World!");
  }
</script>
<!-- more header blahh.. -->

So this is basic and this could be done by these steps:

  1. Have a HTML template with a header part where you plan to embed the Javascript block
  2. Create a new template for your JS, lets call it JS_HelloWorld
  3. Inside your existing template go to the head-part and create a container in here, I’ll call it cnt_javascript
  4. Now create an instance of your HTML template and make sure, that this page _never_ _ever_ gets deleted (add an detail authorization package will be the best)
  5. After that use the SmartTree to go to that page and put the cnt_javascript in your RedDot Clipboard
  6. Next is go to the HTML template and reference from your cnt_javascript inside the template to the container inside your clipboard
  7. After you’ve done that go back to your instance/page and at the cnt_javascript create a new page based on the template JS_HelloWorld
  8. Inside your template JS_HelloWorld you should put the Javascript code from above, except the <script> Tags, of course ;o)

Ok, that was part I. Now you can edit your javascript inside a separate file and it’ll never ever been cached during development. (Yeah I know, better way would be to develop first a prototype and after that go on and implement the prototype into your CMS, but hey? who’s developing “normal” nowadays? Beside that this is useful if you have to develop or add stuff afterwards).

So fine, but what will you get if you publish your pages? Yep, a mess.
So what? You want to get the JS file outside of your HTML template and store it at ONE location on the webserver. Here’s how:

Get the files into an external source

  1. Go to your HTML template and create an anchor element, let’s call it, uhmm, anc_javascript? (settings should be link only) Ok!
  2. Now the next thing you do is go to your created page based on the HTML
  3. Take the connected JS-page from the container and connect it with the new anc_javascript element
  4. Then reference the cnt_javascript on the anc_javascript, so that the original page is only connected to the anchor element.
  5. Next thing is go to your HTML template and again, reference from the anc_javascript element to the anc_javascript element in your page.
  6. After that open the HTML template and insert the reference to the .js file by using the anc_javascript element

This should look like that:

<!-- template header blah.. -->
<script type="text/javascript">
  cnt_javascript
</script>
<script type="text/javascript" src="anc_javascript"></script>
<!-- more header blahh.. -->

Well done! Almost finished. Now you get the JS in two ways. You got the script block inside the HEAD-Tag and you got a link element which points to a page. But some fine tuning is still required:

Cleaning up a bit

  1. Make sure that the extension for the JS_HelloWorld Template instances are always .js, check this in the template settings
  2. Rename your JS_HelloWorld based instance to a JS-filename you will recognize like helloworld.js
  3. If you have a seperated structure of html, css and js files, then you also will add an own publication package, to make sure, that the .js file gets published to the right path

Ok, that’s it, right? NO, it’s not. We still have both blocks and that means especially the <script> block inside our template, when pages get published. So what do else do we need?

A nifty reddot cms if-render tag to decide when to use what:

<reddot:cms>
  <if>
    <query valuea="Context:CurrentRenderMode" operator="!=" valueb="Int:2">
      <htmltext>
  <script type="text/javascript">
    cnt_javascript
  </script>
      </htmltext>
    </query>
  </if>
</reddot:cms>
<!IoRangeNoRedDotMode>
  <script type="text/javascript" src="anc_javascript"></script>
</!IoRangeNoRedDotMode>

The first block is only executed on the CMS in preview and RedDot SmartEdit mode. The second one only when the page gets published.
I took this from one of my old reddot cms freelancer blog posts

Yeah, and I thought that’s it, great post. But then after thinking through and discussing it
with my other blog colleagues, Fred “the awesome reddot geek” added another great idea.

What if you want to add more than one file?

Ok here we go, this is what you need, when you want to add more files in future: Make it a list.
Yeah, that easy. Take the anc_javascript and replace it with a list item – lst_javascript. The container can reference to the list, so you can always add new pages/templates in this point. A screenshot of the RedDot CMS SmartTree looks like this:

Javascript files inside RedDot CMS SmartTree

And then you got this construct inside your template:

<reddot:cms>
  <if>
    <query valuea="Context:CurrentRenderMode" operator="!=" valueb="Int:2">
      <htmltext>
  <script type="text/javascript">
    <%cnt_javascript%>
  </script>
      </htmltext>
    </query>
  </if>
</reddot:cms>
<!IoRangeNoRedDotMode>
<!IoRangeList><script type="text/javascript" src="<%lst_javascript%>"></script>
<!/IoRangeList><!/IoRangeNoRedDotMode>

As you can see in the screenshot above you can do the same with CSS. Another idea is to move the whole construct out of your masterpage template and put it into an own template you use for CSS and JS. This template can be embedded in another container inside the masterpage template.

Important update

It’s important, that you reference from the container to the list as seen above in the screenshot. Otherwise the publication won’t work.

Share and Enjoy:
  • Print
  • email
  • Twitter
  • Digg
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • MisterWong
  • Facebook
  • LinkedIn

No related posts.

About the author:

Markus Giesen Markus Giesen is a Solutions Architect and RedDot CMS Consultant, formerly based in Germany. Travelling around the world to find and offer solutions for a better world (in a very web based meaning). He just found a way to do this as part of a Melbourne based online consultant house. On this blog Markus shares his personal (not his employers) thoughts and opinions on CMS and web development. In his spare time you will find him reading, snowboarding or travelling. Also, you should follow him on Twitter!

Discussion

3 comments for “Using inline Javascript inside RedDot CMS but external files on the webserver”

  1. There’s also another added benefit of doing this. It should speed up your smartEdit experience as Reddot is now only having to generate one page, rather than your main page and all the script files.

    We are doing this in our projects for CSS and Javascript. Before introducing this we had 13 additional pages being rendered (yeah, I know. That’s been tidied up as well now) each time you loaded the page. After implementing this type of functionality we are now only loading one page…. cutting display times down by about 80%

    There may be a need to implement a few lists as occasionally there are JS files that you don’t want being used inside smartEdit, or pieces of CSS that you don’t want once published

    Posted by Paul Smith | November 6, 2008, 2:00 pm
  2. I have used a similar construct, although instead of the RenderTags I used a simple construct (as the preview is broken anyway in that project). Unfortunetly I have had the issue that whenever I publish the page inside the container (seprately) all pages that have the container embedded are published, even though there is only the “weak” reference from the container to the object. Have you experienced similar problems? Or are rendertags the solution?

    Posted by Patrick Schriner | May 27, 2009, 1:05 pm
  3. Sounds new to me, that should only happen when you choose “Publish related pages”.
    Otherwise it only should publish one file.

    Posted by Markus Giesen | May 27, 2009, 1:12 pm

Post a comment



Stay up to date! - Get notified about followup comments

If you don't feel the urge to comment but wish to stay in the loop:
Just enter your email and subscribe to new comments.

Subscribe without commenting

Recent Tweets

  • RT @AirKraft: Transport Canada breakout: they manage 80K pages and 300K assets with WSM(RedDot). Wow! #OTCW 2010-11-11
  • The RedDot usergroup session 'Future of WCM' is in National Harbor 7, now. See you there! #otcw 2010-11-11
  • RT @yttergren: @AirKraft: Calling all WSM(RedDot) devs: share your solutions on http://bit.ly/bgPIof EVERY solution can win an iPad #OTCW 2010-11-10
  • Come to the Solution Exchange session. Enhance your (#reddot) CMS project! Chesapeake 12, 3:20pm #otcw Looking forward to see you there! 2010-11-10
  • More updates...