Setting jQuery plugin options from data attributes

Question

Im having a problem setting options to an array value in a jQuery plugin using data attributes.

If I reference the data attribute using a class selector

  $('.tm-input').tagsManager(
    {
    prefilled: $('.tm-input').data('load')
    })

It works but all the elements get the same values. If I reference using "this" it sets the correct values but it comes across as a string not an array.

  $('.tm-input').tagsManager(
    {
    prefilled: $(this).data('load')
    })

I've tried using JSON.parse() but I get an error about an unexpected character. Any help would be appreciated!

Show the strings that appear in the data-attributes. The problem is most likely because there is an illegal character somewhere in your data causing the JSON to be invalid. — sahbeewah
– sahbeewah, Commented Jun 26, 2014 at 1:51

chiliNUT · Accepted Answer · 2014-06-26 16:19:27Z

5

Have you tried each

$('.tm-input').each (function () {
    $(this).tagsManager( { prefilled: $(this).data('load') });
});

Explanation:

When a selector has more than 1 element, applying a method to it will typically affect all of the elements, but retrieving a property will typically only return that property from the 1st element.

So when you use .tagsManager on your $('.tm-input') selector, you are applying .tagsManger to all of the elements. But when you set prefilled:$('.tm-input').data('load'), the data method is only grabbing the data from the first element in the list, every single time.

When you use each, it applies the logic inside of the each block to each element individually, rather than all of them at once, so when you use $(this).data('load'), it grabs the load attribute from each individual element as well.

edited Jun 26, 2014 at 16:19

answered Jun 26, 2014 at 1:54

chiliNUT

19.5k14 gold badges72 silver badges116 bronze badges

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

3 Comments

SteveO7 Over a year ago

BINGO! I would love to understand why that works, but I will not argue with success! Thanks chiliNUT!

chiliNUT Over a year ago

@SteveO7 I've added an explanation to the answer.

SteveO7 Over a year ago

So when adding methods that require element specific options like this, looping through with each is more precise. That makes sense.

Collectives™ on Stack Overflow

Setting jQuery plugin options from data attributes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related