Jump to:

3431 Posts in 1025 Topics by 864 members

Template Questions

SilverStripe Forums » Template Questions » Avoiding Duplicate HTML ElementIDs when reusing widgets & included templates

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 937 Views
  • johnmblack
    Avatar
    Community Member
    61 Posts

    Avoiding Duplicate HTML ElementIDs when reusing widgets & included templates Link to this post

    I understand about result caching in templates, as described in http://doc.silverstripe.org/sapphire/en/reference/advanced-templates and how we cannot rely on things like counters, etc. to guarantee unique values for use in a template. But how do we create unique values in template includes when reusing them, such as HTML Element IDs, which must be unique for scripting to work properly?

    Here is my scenario: Let's say I have a template include called "MyWidget.ss". Inside this include file is HTML something like:

    <div id="element-id-X"><otherHTML /></div>
    ...
    <script>
    var widgetDivId = document.getElementById('element-id-X');
    </script>

    Now imagine that you may need to include the same widget any number of times on the page. Each time, the javascript must refer only to that HTML that is bundled with it -- so obviously the "X" value in the above is something like a number, and different every time. And these are not necessarily part of a sequence of objects, so there is really no <% control Children %> or anything like that.

    This scenario is becoming more frequent as I start to bring in things like Google Custom Search scripting, Disqus elements, etc. One example (though not the only one) is a GoogleSearchBox.ss that is included in the outer "chrome" of the site (IOW the Page.ss that is in the template root folder.) However, there are other pages in the site that will also use *another* GoogleSearchBox.ss on the main page -- styled larger, but otherwise exactly the same, so it would be wrong from a code reuse POV to have a different SS file for that one.

  • rob.s
    Avatar
    Community Member
    78 Posts

    Re: Avoiding Duplicate HTML ElementIDs when reusing widgets & included templates Link to this post

    Doesn't every widget instance provide an "unique" ID (because of its auto-increment field)?

    If so, it would be enough to do it this way

    <div id="element-id-$ID"><otherHTML /></div>
    ...
    <script>
    var widgetDivId = document.getElementById('element-id-$ID');
    </script>

    937 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.