New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preserve custom HTML5 data attributes #239
Comments
+1 |
I've created a plugin to override -not extend- the function which changes the original select options. Selectize.define('preserve_original_select', function(options) {
var self = this;
this.updateOriginalInput = (function() {
var original = self.updateOriginalInput;
return function() {
var i, n, options, self = this;
if (self.$input[0].tagName.toLowerCase() === 'select') {
for (i = 0, n = self.items.length; i < n; i++) {
self.$input.find('[value="'+self.items[i]+'"]').prop('selected', true);
}
} else {
self.$input.val(self.getValue());
}
if (self.isSetup) {
self.trigger('change', self.$input.val());
}
// original.apply(this, arguments);
};
})();
}); Don't forget to load the plugin. |
Plugin is good but data-attributes in OPTIONs shouldn't disappear by default. |
Yes! Selectize should be updated to allow for the preservation of custom attributes in each option. |
+1 |
Would really appreciate a fix to this. Can't get plugin working. |
+1 |
Agreed, selectize should retain data attributes |
+1 |
I have no idea how I got CC'd on all the posts to this list, but I'd appreciate it if it stopped. Thanks! On Sep 1, 2014, at 8:05 AM, Stephan Helbig notifications@github.com wrote:
|
+1 |
3 similar comments
+1 |
+1 |
+1 |
This is working. $(ele).selectize({ Add data-extra in every option as json encoded, Ex Get the selectize instance using this, var selectize = $(ele)[0].selectize Users selected options can be found here: selectize.items Data attributes of all options can be found here: selectize.options In our case it will be, Let me know if this is working. |
I think that it's already possibile to do that without extending the plugin (certainly, a full support will be appreciated) simply using the $('select').selectize({
onInitialize: function () {
var s = this;
this.revertSettings.$children.each(function () {
$.extend(s.options[this.value], $(this).data());
});
}
}); The possibilities are infinite with this feature, like a FULL HTML SELECT. |
@indrimuska You are a hero sir. That works like charm! |
@JamesWilsonVSolvit 😄 thank you man! |
works like charm, but not for option groups as their are undefined :(. any idea how to get to next level.. ( get each from option group and keep custom-data ? ) |
Hi @kimek, as you can see, The simplest way to overcome this problem is to look for the |
Thanks for fast replay and for help if (children.first().is('optgroup')) { // why this is not a loop ? Maybe this will help how i'm thinking, probably it's bad way.. |
Hi @kimek. var s = this, children = this.revertSettings.$children; Now, I don't know if // if the first element of the collection is an `<optgroup>`
// I have to look through this list looking for the the `<options>`s.
if (children.first().is('optgroup')) {
children = children.find('option');
}
// Now `children` is definitely a collection of `<option>`s. In your case, you can remove the if-statement and use the corresponding block directly: var s = this, children = this.revertSettings.$children.find('option'); |
@indrimuska your example is awesome I was looking for creating something like this and boom I found the perfect 1 to 1 example :) https://jsfiddle.net/8y9xkb0o/ I wanted to ask you if you know a way around the delay of the images loading? Any way to load them before opening the select? I'm trying to see the images instantly. Thanks a lot. |
Hi @voidale, your problem is about to preload the image before the select has been opened. If you google it you can find many way to preload an image by using javascript or css. I think that the better solution for you is to parse the data-attributes as jquery element looking for src-attributes of the images, then to preload them like this: var image = new Image();
image.src = $(this).attr('src'); Here it is an example. EDIT: |
@indrimuska Hey, That's awesome I did google it and founds some solutions but didn't really like them all. This seems much more light weight. I wasn't aware of the Image api. It's really awesome thanks a lot for the information I also noticed that Image instance has onload function that can be really useful. Thanks again now this seems so easy I thought it will be really hard to fix :) |
I think this feature would be delightful. |
+1 |
1 similar comment
+1 |
Hi, I believe custom attributes should be transferred to both the Selectize dropdown and its input items. In our case, we wanted multiple attributes like Hope that helps! OP |
The comments and workarounds in this thread so far are great, but what still isn't happening is the In my use case, I'm using the data to populate subsequent things, and losing the attributes means this doesn't work. Something like |
My use case was absolutely the same. When you already have existing Why I want my JS code to work with vanilla |
@joallard OP has an example at http://jsfiddle.net/k44p2by6/. I'm thinking the same as OP here. Have data-attributes in the select option elements copied over to the Selectize items. This raises a few questions regarding for example entering input values from JavaScript instead of HTML. And also how Selectize store this data internally. Now it has to store attributes in addition to key/value. And should it be possible to define data-attributes using JS or just limit it to HTML input creation? |
I successfully managed to modify the code locally to work when you load in I gotta work on it some more but hopefully will have some idea of changes On Tue, Jul 26, 2016 at 11:00 AM, Espen Antonsen notifications@github.com
|
+1 |
Here's my use case. I would like to be able to pass data attributes from the original options, onto the selectize options, so that I can later check them in a For example, my selectize list might be a list of countries, some of which required a postcode if selected. Each option has |
+1 |
For me, the solution provided by @indrimuska preserve the data-attributes on select, but not for options. |
This is how I added a data-type="list" to my select options. The answer is based on stackoverflow post at: https://stackoverflow.com/questions/36512536/add-data-attribute-to-selectize-js-options Markup: JavaScript:
|
The solution presented by @smohadjer works for me: <select class='form-control' id="productSelection">
<option disabled="disabled" value="" selected>Please select a Product.</option>
<option value="1234" data-data='{"name":"Product 1234"}'>Product 1234</option>
....
</select> $("#productSelection").selectize({
render: {
option: function (data, escape) {
return '<div data-name="' + data.name + '">' + data.name + '</div>';
}
}
});
// To retrieve value
var selectedValue = $("#productSelection").val();
var name = $("#productSelection")[0].selectize.getOption(selectedValue).data('name'); |
But I'm not using markup, but loading in options from JS. |
@WadeTheFade In the case of data from JS this issue does not apply. You can use the render function to add data attributes to the returned options and then query them when selected. This issue exists only if going from markup to selectize and wishing to retain data- attributes which existed on the original elements. |
I still can't get it to work. I've tried everything said here but my option field never receives any data values. |
@KazutoDE Here is a working example using solution I suggested earlier. Note that the data attribute (in this case data-continent) would be gone from original option element after selectize is initialized, but it will be preserved on markup generated by selectize, so you can still access it. |
#1058 by @dakuzen highlights an important issue when using the |
@KazutoDE @WadeTheFade Sample code which worked for me. HTML markup
Init the selectize:
Then you can fetch the data attributes using:
No need to overrider the selectize's renderer or anything. |
Hi @naveed-ahmad ! When I write To hope to have an exit, I have to write I have only this option in my options array... Thanks for your help ! |
@Younnah please see data attribute in my html, In your case keys are Try |
Yes, I see, but I can not access the attribute "name" in the "data" ... |
The way that worked for meMy only goal was to get the "selected" data-attr from the select Get all data-attr
then inside the eventListener:
|
closing stale issues older than one year. |
@risadams I would have liked to see this shortcoming of Selectize to be fixed properly. |
It's a fair request. We're currently focused on getting the project actively maintained with security patches, dependency updates, processing the 120 opened PRs, etc. This is a very valid enhancement and PRs are welcomed. If anyone has bandwidth to work on this, open up a new PR against this issue and we can re-open it. |
Looks like maybe #1194 addresses this too. We need to process all the PRs including their functionality, test coverage and all the usual suspects including performance. If you want to pull that PR down and check it too, the more the merrier! |
selectize.txt |
Feature request
Preserve custom HTML5 data attributes, so that in this case
data-fruit
won't disappear when going from<select>
to Selectize:http://jsfiddle.net/k44p2by6/
The text was updated successfully, but these errors were encountered: