Support dyanmically added data properties

[maxkueng]

Hello

it would be really nice if mixitup would also support dynamically added data properties using the $.data() method:

// Like this:
$('#myListItem').data('wizardlevel', 100);

// ... in addition to (or instead of) this:
$('#myListItem').attr('data-wizardlevel', 100);

// ... will work equally fine

[streetrider]

Hi Max -

Thank you for the feedback! Our developer is on vacation until June 12th, so any technical issues or requests will experience delay in response. We'll make sure to keep you posted.

The MixItUp Team

[patrickkunka]

Hey Maxkeung,

If I understand you correctly, are you requesting that if a data attribute changes after MixItUp has instantiated, MixItUp would re-sort elements accordingly automatically?

This should already be possible if you write some custom javascript that runs after you change the data attribute, essentially just firing the sort method. I haven't tested it but i'm pretty sure it would work.

If I've misunderstood you, please clarify!

Thanks for the feedback,

Patrick

[maxkueng]

Hey Patrick

thanks for the reply!

What I meant is that when setting data properties using jQuery's data function, mixitup doesn't recognize it. The data function stores data in a jQuery-internal object and does not modify the element's DOM attributes, so the stored data is not accessible through the attr function.

Consider this:

var bdy = $('body');
bdy.data('magic', 'unicorns');

console.log(bdy.attr('data-magic')); // undefined (or null)

At the same time:

var bdy = $('body');
bdy.attr('data-magic', 'unicorns');

console.log(bdy.data('magic')); // unicorns

Because mixitup uses the attr function to access data-* attributes throughout, it doesn't work with data set with the data function.

Best regards
Max

[johnwiseheart]

So is there a work around for this? Or is it not possible?

[maxkueng]

The workaround is to use actual "data-*" attributes instead of the data() function. But I haven't used in a while. This is just as far as I remember.

Basically you have to do this

$('#myListItem').attr('data-wizardlevel', 100);

instead of

$('#myListItem').data('wizardlevel', 100);