3212 Posts in 847 Topics by 809 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 488 Views |
-
Avoiding Duplicate HTML ElementIDs when reusing widgets & included templates

12 November 2011 at 7:48am Last edited: 12 November 2011 7:52am
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.
-
Re: Avoiding Duplicate HTML ElementIDs when reusing widgets & included templates

22 November 2011 at 8:11am Last edited: 22 November 2011 8:13am
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>
| 488 Views | ||
|
Page:
1
|
Go to Top |


