Make WordPress Core

Opened 15 months ago

Closed 15 months ago

Last modified 15 months 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:


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:

Change History (6)

comment:1 wonderboymusic15 months ago

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

comment:2 johnstonphilip15 months 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 15 months ago by johnstonphilip (previous) (diff)

comment:3 SergeyBiryukov15 months ago

  • Component changed from General to Widgets

comment:4 scribu15 months 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 mattwiebe15 months 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 helen15 months ago

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