How to pass Tridion Content TCM URI to Javascript

Question

I have a JavaScript call inside the content like below

<a onclick="playVideo('http://xx/002A70/ChampionsOfChange/xx.mp4','Victor Dickson',tcm:24-17703); return false;" href="#">
    <img style="width: 200px; height: 113px;" alt="VictorDickson" title="VictorDickson" xlink:href="tcm:24-17552" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="VictorDickson" />
</a>

In the playVideo call, the third parameter is file path. I have a text file (closed caption file) in Tridion as Multimedia component and I need to pass that file path to the javascript.

If I hard code the file path as below, it's working

<a onclick="playVideo('http:/xx.mp4','Victor Dickson','/TridionMultimedia/tcm24-17703_Champions-of-change-George-Shout-Out.txt'); return false;" href="#">
    <img style="width: 200px; height: 113px;" alt="VictorDickson" title="VictorDickson" xlink:href="tcm:24-17552" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="VictorDickson" />
</a>

But I am looking to pass the tcm id. Any suggestions?

EDIT

Thanks everyone for the comments. I did the following to fix the issue

In the XML i added file as component link and in the XSLT i added a tag to grab the xhref and passing that id in the javascript call

XML

<CaptionLink xlink:type="simple" xlink:href="tcm:24-17703" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="Champions-of-change-George-Shout-Out" />

  <a onclick="playVideo('http://wpc.2A70.edgecastcdn.net/002A70/ChampionsOfChange/Victor-Employers-say-theyre-very-flexible.mp4','Victor Dickson',$('#George_cc').attr('href')); return false;" href="#">
                  <img style="width: 200px; height: 113px;" alt="VictorDickson" title="VictorDickson" xlink:href="tcm:24-17552" xlink:title="VictorDickson" xmlns:xlink="http://www.w3.org/1999/xlink" />
                </a>

XSLT

<a id="George_cc" href="#">
    <xsl:attribute name="href">
      <xsl:value-of select="//Component:CaptionLink/@xlink:href" />
    </xsl:attribute>
  </a>

Answer 1

There is nothing special about Javascript in this context. As I see it, you have exactly the same situation as if you were publishing a binary link in some HTML. (It's all text!). So if what you have on the CM side is a tcm id, and what you want on the CD side is a link to the multimedia resource, just use standard Tridion binary linking behaviour.

Answer 2

As per your comments, you are trying to add all the UI design on Component. It's not a right approach.

Ideally you should attach the multimedia component on the actual component as component link field.

While rendering the template, you will get the Multimedia Component tcmId by using

Component.ID

On the Website, you can resolve the link and update the design with the resolved url.

More details:

Below are the steps to have proper implementation

1. Add two fields on the component which allows multimedia component for
   • Caption
   • Image

2. Write a DCP or Component Template (CT) to publish both Caption & Image components and output TCM ID's in the form of XML

   Sample:

   <?xml version="1.0" encoding="UTF-8"?>
   <Video>
     <Caption id="12345"/>
     <Image id="34567"/>
   </Video>
   

3. On the website page,

   • Read the Video XML
   • Get Caption and Image TCM Id's and Publication Id

   • Call the broker based on multimedia ID and publication ID to get resolved URL

     Sample:

      String binaryUrl = String.Empty;
      BinaryLink mBinaryLink = new BinaryLink(publicationId);
      Link mLink = mBinaryLink.GetLink(binaryComponentUri, variantId, anchor, linkText, linkTagAttributes, showTextOnFail);
      if (mLink != null && mLink.IsResolved)
      {
         binaryUrl = mLink.Url;
      }
     

4. Output the result on to the page in the expected format