HTML5 Custom Data Attributes

krepshaw's Avatar

krepshaw

19 Nov, 2012 03:26 PM

I'm receiving the following error while trying to implement custom data attributes in my format:

An error occurred: Error on line 14: The prefix "data-iview" for attribute "data-iview:thumbnail" associated with an element type "div" is not bound.

Here is my format:

## Get the page node and get the data-structure node
#set ( $page = $_XPathTool.selectSingleNode($contentRoot, "/system-index-block/calling-page/system-page") )
#set ( $title = $page.getChild("title").value )

## Print everything to the screen
<h2>$title</h2>

#set($allStories = $_XPathTool.selectNodes($contentRoot, "/system-index-block/system-page"))

#foreach ($story in $allStories)

    #set ( $storyLink = $story.getChild("link") )
    #set ( $dataStructure = $story.getChild("system-data-structure") )
    
    ## Get the items in the Basic Info fieldset
    #set ( $basicInfo = $dataStructure.getChild("fieldBasicInfo") )
    #set ( $headline = $basicInfo.getChild("txtHeadline") )
    #set ( $directLink = $basicInfo.getChild("txtDirectLink") )
    #set ( $youTube = $basicInfo.getChild("txtYouTube") )
    
    ## Get the items in the Photos fieldset
    #set ( $photos = $dataStructure.getChild("fieldPhotos") )
    #set ( $largePhoto = $photos.getChild("imgLarge") )
    #set ( $largePhotoLink = $largePhoto.getChild("link") )
    #set ( $smallPhoto = $photos.getChild("imgLarge") )
    #set ( $smallPhotoLink = $smallPhoto.getChild("link") )
    
    
    <data-iview:thumbnail xmlns:data-iview="url">thumbnail</data-iview:thumbnail>
    
    <div data-iview:thumbnail="${_SerializerTool.serialize($smallPhotoLink, true)}" data-iview:image="${_SerializerTool.serialize($largePhotoLink, true)}" OnClick="location='${_SerializerTool.serialize($storyLink, true)}'" style="cursor: pointer;">
        <div class="iview-caption" data-x="0" data-y="422">
            <a href="${_SerializerTool.serialize($storyLink, true)}">
                <span class="bannerTitle">$_SerializerTool.serialize($headline, true)</span>
                <span class="readMoreBanner">READ MORE</span>
            </a>
        </div>
    </div>    
     
#end
  1. Support Staff 1 Posted by Tim on 19 Nov, 2012 07:01 PM

    Tim's Avatar

    Hi,

    Based on the error message you are receiving, it sounds as if this error is occurring when you attempt to submit the Format. Is that correct? I tried submitting a Format containing the same content you provided but did not run into any problems. If the error is instead occurring while rendering a Page, can you please attach some sample XML data for us to use in conjunction with this Format to see if we can replicate the error?

    Thanks!

  2. 2 Posted by krepshaw on 20 Nov, 2012 01:47 PM

    krepshaw's Avatar

    The error is occurring when trying to render a page. I'm not sure what you mean by some sample XML data. Here is the XML that the page renders.

  3. Support Staff 3 Posted by Tim on 20 Nov, 2012 02:00 PM

    Tim's Avatar

    To clarify, I'm looking for the Index Block XML that this particular Velocity Format is transforming. In other words, the Block that is assigned to the same page region as this Format.

    Thanks

  4. 4 Posted by krepshaw on 20 Nov, 2012 02:04 PM

    krepshaw's Avatar

    Sorry about that ... try this file ...

  5. Support Staff 5 Posted by Tim on 20 Nov, 2012 03:01 PM

    Tim's Avatar

    No problem. OK, I see this line in your Format:

    <data-iview:thumbnail xmlns:data-iview="url">thumbnail</data-iview:thumbnail>
    

    I'm guessing this may be an attempt to declare the namespace. Is that correct? I removed this line and surrounded your code with:

    <div  xmlns:data-iview="url">
    ...
    </div>
    

    and that seems to work. Does this help with your scenario? I wasn't sure if that extra <div> would cause problems or not. At this point (as you probably realized), it's just going to be a matter of declaring that namespace prior to using it.

    So, the bottom portion of the Format looks like:

    <div  xmlns:data-iview="url">
        <div data-iview:thumbnail="${_SerializerTool.serialize($smallPhotoLink, true)}" data-iview:image="${_SerializerTool.serialize($largePhotoLink, true)}" OnClick="location='${_SerializerTool.serialize($storyLink, true)}'" style="cursor: pointer;">
            <div class="iview-caption" data-x="0" data-y="422">
                <a href="${_SerializerTool.serialize($storyLink, true)}">
                    <span class="bannerTitle">$_SerializerTool.serialize($headline, true)</span>
                    <span class="readMoreBanner">READ MORE</span>
                </a>
            </div>
        </div>    
        </div>
    
  6. 6 Posted by krepshaw on 20 Nov, 2012 05:29 PM

    krepshaw's Avatar

    That worked like a charm… Thanks so much for getting back to me!

    Sent from my iPhone

  7. Support Staff 7 Posted by Tim on 20 Nov, 2012 06:08 PM

    Tim's Avatar

    You bet! Glad I was able to help out. Take care.

  8. Tim closed this discussion on 20 Nov, 2012 06:08 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac