1

I am curious as to which of the following is better practice (and why):

  1. Injecting data as HTML 5 data attributes:

    <div class="someDiv" data-for-popup="someData"></div>

  2. Injecting a <script> into the file with some data structure 

    <script>
    var myMap = new Map();
    myMap.set('someKey','someValue');
</script>

In both cases, I would be using javascript/jQuery to look up the value, but which is the better solution?

A little background: I am creating a static page (no communication back and forth with the server besides servicing the page) so I can't use AJAX or any other server communication to service the data. The data being injected is used for a popup that is displayed on the page when "more information" is requested for a certain page object. In other words, I need the data to be present somewhere on the page, and I'm looking for the best avenue to do so, and I am also curious why that would be the best option.

Improve this question
2
  • If you use JS, you can have more calculations / logics before setting the value. the data attribute is a perfect place for static value, though. Commented Sep 23, 2015 at 4:27
  • 3
    There is no "best option" here. What matters is using the right option for a specific task. data-* attributes are useful for adding data to a specific element. If there is no connection between the element and data using data-* doesn't make a lot of sense. Commented Sep 23, 2015 at 4:31

3 Answers 3

Reset to default
1

Which one is better will depend on the use you want to give to that value, and on how the value is related to a particular element. So there's not a generic answer to your question, as it would go in a case-by-case basis. A good rule of thumb would be what some people commented:

  • If the data is useful and specific to that element, use data-*.
  • If there's no connection between the data and an element, use a variable in <script>.

But there's a misconception in your question, and you are missing (imho) a really important use case: data-* attributes are not exclusive for JavaScript, they can be seen and used in CSS (as part of a selector or to be used as a value), while variables inside a <script> tag are hidden to the CSS and cannot be used.

Right now data-* attributes are mainly supported in the content property for ::before and ::after but, at least in theory, they will be allowed in other properties making them more useful for styling purposes. For example:

div[data-columns] {
    column-count: attr(data-columns);
}

That rule will save you having multiple rules in your CSS, it will simplify your code and make it more robust and easier to maintain... sadly, it is not supported yet.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Store in the DOM element only what is specific for it, such as text and/or title for the popup window.

In this way your JS function can rely on the element to construct the popup.

<button data-content="My popup content" data-title="My title">More information</button>

<button data-content="My 2nd content" data-title="My 2nd title">More information</button>

$("document").on("click", "button", function () {
    var $this = $(this),
        title = $this.data("title"),
        content = $this.data("content");

    //open your popup
    //$this.popup({ title: title, content: content });
})
Improve this answer

Comments

1

As others have said, you should only store short, specific information about the element with a data-*.

If you are looking to display a 'more info' style popup, containing lots of information. I would store that information in a hidden div that is referenced by the element. Then use JS to show that element.

<button type="button" data-target="#product-1-more-info">Product 1</button>
<button type="button" data-target="#product-2-more-info">Product 2</button>

<div id="product-1-more-info" style="display:none;">
  More awesome info about product #1
</div>
<div id="product-2-more-info" style="display:none;">
  More awesome infor about product #2
</div>

<script>
  $('button').click(function() {
    $($this.data('target')).show();
  });
</script>

Of course this can be dressed up with animations and light box effects. But now you aren't storing giant amounts of data in the element and your JS is much simpler.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.