How to escape single quote Where Custom DWT function not allow to write

Question

I have a DWT TBB having code something like that -

<!-- TemplateBeginRepeat name="Video_Array" -->
 <li>
<!-- TemplateBeginIf cond="Component.Schema == 'Video Collection'" -->
<a onclick="_gaq.push(['_trackEvent', 'XYZ', 'ABC', '@@List${TemplateRepeatIndex}.Fields.title@@']);"  href="@@List${TemplateRepeatIndex}.Fields.link@@" target="_blank">
@@List${TemplateRepeatIndex}.Fields.title@@
</a> 
<!-- TemplateEndIf -->
</li>                       
<!-- TemplateEndRepeat -->

Now here Single quote in the title of the Video component creates a problem to execute the java script applied on the onclick event. So i have to escapee this anyhow. It looks something like below in the page source –

onclick="_gaq.push(['_trackEvent',  'Video Collection', 'Click', 'Music and fun daddy's child']);">

There are few challenges for me to go ahead for the fix -

1. I cannot ask editors to avoid this character or place HTML entity ' in place of this.
2. I cannot write Custom function to replace it something like Replace("'", "\'") with in the DWT.
3. I can't blindly replace "'" with "\'" as it will make our content incorrect some places.

The only way , i can think to write a java script function and call it with in the java script function called on onclick.

I am not good in java script so could somebody help me to sort it out through java script.

Is there any other way in Tridion to do same in my circumstances ?

Answer 1

I disagree with you - I do think that in this case is perfectly OK to educate editors that their titles cannot contain a quote - but obviously you still need to validate this and do the best possible.

You could:

• Do a post-processing C# template building block with a decent RegEx (always fun) to find this quote and replace it with, for instance '
• Change the content in the package before you read it with a c# TBB (you can use a TBB to modify the content of a component in the package, just don't try to save it or make changes that would make the component invalid according to its schema) - bit rusty here, but you may have to use the XML of the component to do this instead of the Component class
• Use a pre-DWT c# template building block that loads your collection of videos, escapes their titles correctly - either with a replace or with something like System.SecurityElement.Escape (not 100% sure it helps you here, but worth a try) - then push the modified values to the package with a name like escapedTitle_x where _x represents the position of this title in the collection - if it matches your TemplateRepeatIndex (which it should if you start with 0) then you can use something like this in your DWT:

<!-- TemplateBeginIf cond="Component.Schema == 'Video Collection'" -->
  <a onclick="_gaq.push(['_trackEvent', 'XYZ', 'ABC', '@@escapedTitle_${TemplateRepeatIndex}@@']);"  href="@@List${TemplateRepeatIndex}.Fields.link@@" target="_blank">
    @@escapedTitle_${TemplateRepeatIndex}@@
  </a> 
<!-- TemplateEndIf -->

Answer 2

If you need to prevent users from using single quotes, you can add a XSD restriction into the schema to allow only alphanumeric characters. Something like:

<xsd:simpletype>
    <xsd:restriction base="xsd:string">
        <xsd:pattern value="[A-Za-z0-9_ ]*"></xsd:pattern>
    </xsd:restriction>
</xsd:simpletype>

They won't get pretty error messages though when they fail the validation, so some education would still be necessary. If you need pretty messages, then you could use the event system to do something similar and throw a user-readable exception when they enter illegal characters.

I don't think you'll find a nice way to get this done with Javascript. You could pass it variables, something like:

<script type="text/javascript">
var titles=new Array();
<!-- TemplateBeginRepeat name="Video_Array" -->
    <!-- TemplateBeginIf cond="Component.Schema == 'Video Collection'" -->
        titles[titles.length]="@@List${TemplateRepeatIndex}.Fields.title@@";
    <!-- TemplateEndIf -->
    <!-- TemplateBeginIf cond="Component.Schema != 'Video Collection'" -->
        titles[titles.length]=""; //so the count matches in the next loop
    <!-- TemplateEndIf -->
<!-- TemplateEndRepeat -->
</script>

<!-- TemplateBeginRepeat name="Video_Array" -->
 <li>
<!-- TemplateBeginIf cond="Component.Schema == 'Video Collection'" -->
<a onclick="_gaq.push(['_trackEvent', 'XYZ', 'ABC', titles[@@TemplateRepeatIndex@@]);"  href="@@List${TemplateRepeatIndex}.Fields.link@@" target="_blank">
@@List${TemplateRepeatIndex}.Fields.title@@
</a> 
<!-- TemplateEndIf -->
</li>                       
<!-- TemplateEndRepeat -->

Notice I'm not doing any actual escaping here. JS will do an escape() which converts to HTML entities, but none of the JS stuff is foolproof. The above will break, for example, if they use double quotes. Which is why I think validation is the way to go. Saves you all the trouble and educates the authors at the same time.

All code untested sadly; I don't have access to Tridion :( Hopefully gives you some additional ideas though.

Answer 3

By default, the values of component fields are available via the Dreamweaver mediator as escaped HTML. In this case, you should simply be able to reference the values. I'm not sure whether something different happens when iterating over a Fields collection as you are doing, but in general, if it behaves differently, it's probably a bug.

When you add items to a package yourself, you will either wish to create escaped HTML yourself, or to simply create text and have Tridion take care of the escaping. When you create the package item, you do so using the appropriate method: CreateHTMLItem() if you have already created the markup with the appropriate escape sequences, or CreateStringItem() if you expect the Dreamweaver mediator to convert it to HTML.

Should it be necessary, you can use JavaScript functions in Dreamweaver templating expressions. The trick is to use parentheses to ensure that a package item is evaluated first as a string. Then you will have a JScript string object and can use its methods.

For your example, my first attempt would be something like this:

@@(List${TemplateRepeatIndex}.Fields.title).replace("'","'")@@