WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#23293 closed defect (bug) (invalid)

wpColorPicker not working in widgets

Reported by: johnstonphilip Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.5
Component: Widgets Keywords:
Focuses: Cc:

Description

This should be a simple fix. I was creating a widget that uses the new color picker in WordPress 3.5.

It works fine except for when it is first added to a sidebar. I suspect this is because the widget is being added to the sidebar by jquery. The color picker is also applied using jquery - but it isn't able to select the color element because it wasn't part of the DOM when the page loaded.

I don't know where the js code is for the wpColorPicker javascript function, but somewhere in there this should likely be added:
http://api.jquery.com/live/

Change History (6)

comment:1 @wonderboymusic3 years ago

.live is deprecated in 1.9 - use .on() or .delegate()

comment:2 @johnstonphilip3 years ago

Ah good call. Yes .on() would work. I tested it with other jquery elements in my widget and they work when first added. The same should be applied to wpColorPicker.

Last edited 3 years ago by johnstonphilip (previous) (diff)

comment:3 @SergeyBiryukov3 years ago

  • Component changed from General to Widgets

comment:4 @scribu3 years ago

  • Keywords 2nd-opinion dev-feedback removed
  • Summary changed from wpColorPicker not working in widgets. Jquery .live() needed. to wpColorPicker not working in widgets

comment:5 @mattwiebe3 years ago

  • Resolution set to invalid
  • Status changed from new to closed

This is an implementation issue, not a wpColorPicker issue. It's not magic, it has to be called on the right element at the right time. You could:

  1. Put a script element inline inside the widget's widget method, referencing some unique id that you give the text input that you want to turn into a wpColorPicker instance. A bit ugly, but it'll work.
  2. If inline code makes you twitch, the cleaner version would go something like:
jQuery('#widgets-right .widgets-sortables').on('sortstop', function(event,ui){
    // run js after widgets are dropped. ui.item contains the dropped item.
    // note that the dropped item could just as easily be a reordering rather
    // than a new widget. Plan your logic accordingly.
});

comment:6 @helen3 years ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.