0

I'm trying to implement wheelColorPicker, and I came up with a problem only when using a JQuery version later than 1.7.1. (I'm currently using 1.10.2.)

When I use a later version, and move any of the sliders, then stop moving it (mouseUp), the colorPicker doesn't register the mouseUp, and therefore continues to move the slider (or dragger). I also get the following error when it moves:

Uncaught TypeError: Cannot read property 'blur' of undefined

I think the main thing I have to change, how the events unbind.

var blurEvents = $input.data('events').blur;

Not working:

JSFiddle

Working:

JSFiddle

(I couldn't get it to use external files with the code snippet, and the question has a limit of how many chars. That's why I didn't include a code snippet.)

Horay
  • 1,388
  • 2
  • 19
  • 36
  • I'm going to flag this as duplicate of http://stackoverflow.com/q/2518421/1059070 since the underlying problem appears to be the same. (see my answer) – arcyqwerty Dec 15 '15 at 22:42

1 Answers1

1

$(element).data("events") was removed in jQuery 1.8.

If necessary, you can still access it via $._data(element, "events") although this is not officially supported and the behavior can (as you've seen) be modified or removed at any time.

http://blog.jquery.com/2012/08/09/jquery-1-8-released/

$(element).data(“events”): In version 1.6, jQuery separated its internal data from the user’s data to prevent name collisions. However, some people were using the internal undocumented “events” data structure so we made it possible to still retrieve that via .data(). This is now removed in 1.8, but you can still get to the events data for debugging purposes via $._data(element, "events"). Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version.

It does not appear that there is a public interface supported to retrieve this data as of jQuery 1.9:

https://jquery.com/upgrade-guide/1.9/

Prior to 1.9, .data("events") could be used to retrieve jQuery's undocumented internal event data structure for an element if no other code had defined a data element with the name "events". This special case has been removed in 1.9. There is no public interface to retrieve this internal data structure, and it remains undocumented. However, the jQuery Migrate plugin restores this behavior for code that depends upon it.

arcyqwerty
  • 10,325
  • 4
  • 47
  • 84
  • Thanks for the answer! That was quick! :) Is there an updated, **supported** way of performing that? – Horay Dec 15 '15 at 22:34
  • Quick search hasn't yielded anything official though [a lot of people seem to be using `_data` anyway](http://stackoverflow.com/a/2518441/1059070). hmm. – arcyqwerty Dec 15 '15 at 22:37
  • And [answer](http://stackoverflow.com/a/15782412/1059070) further down suggests no alternative exists. – arcyqwerty Dec 15 '15 at 22:39
  • Thanks! So would this be the correct way of doing it, (using the code from above)? `var blurEvents = $._data($input, 'events').blur` – Horay Dec 15 '15 at 22:46
  • Looks like that's about as good as it's going to get unless you use the jQuery Migrate plugin. – arcyqwerty Dec 15 '15 at 22:47
  • Which do you suggest? – Horay Dec 15 '15 at 22:47
  • For a single use case, bringing in a whole lib seems a little heavy and I'd suggest just using `_data` since it appears that's a fairly popular solution, despite being not officially supported. If you're modifying library code, you may want to use Migrate so as to be able to update (overwrite) the library at will without having to remember your modifications. That's just my opinion though and it really depends on your use case. – arcyqwerty Dec 15 '15 at 22:49
  • Thanks! I tried doing: `var blurEvents = $._data($input, 'events').blur;` at line 1544 in this http://jsfiddle.net/vmh95vjf/1/, but I still get the same error. – Horay Dec 15 '15 at 22:55
  • Hmm, not sure what might be going on. It could very well be that there are other outdated API calls being used by the colorpicker. Maybe try the Migrate lib and see if that works. – arcyqwerty Dec 15 '15 at 23:00
  • Ok. Is there a program or script that converts all old, or outdated api calls to the updated one? – Horay Dec 15 '15 at 23:05
  • Not that I know of. I wouldn't expect there to be one either since that would be a lot of work to generalize enough for arbitrary programs. Plus edge cases that would never be caught by a conversion program anyway. – arcyqwerty Dec 15 '15 at 23:21
  • Can you post a link to a tutorial in how to migrate JQuery. I've had a look at: https://github.com/jquery/jquery-migrate/#readme But I don't know what to do. – Horay Dec 15 '15 at 23:22
  • I don't have one off the top of my head and looking for tutorials is outside the scope of SO. That said, have you tried simply linking in the migrate library into your project and following the instructions that you linked? It seems like it might work toward fixing your problem or at least outputting console errors for functionality it doesn't restore. – arcyqwerty Dec 15 '15 at 23:24
  • It works, and I get the following output: http://i.imgur.com/thtwhg0.png What should I do? – Horay Dec 15 '15 at 23:33
  • Is there a way of achieving what is done with `.data` a different way? Maybe adding a var or something? – Horay Dec 15 '15 at 23:42
  • The latter warning in your console suggests `$(elem).data('events')` is still being used somewhere. Follow the stack. You could emulate that if you have control over each place you're setting an event handler. Every time you call `$(elem).blur(handler)` or more generally `$(elem).someevent(handler)` or `$(elem).on("event", handler)`, then you can register that handler (i.e. save a reference) in your own object like `events[event] = handler` – arcyqwerty Dec 16 '15 at 00:11