Make WordPress Core

Opened 12 years ago

Closed 10 years ago

#19587 closed enhancement (duplicate)

JavaScript hooks for widgets

Reported by: ciprian_vb's profile ciprian_vb Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Widgets Keywords:
Focuses: Cc:

Description (last modified by SergeyBiryukov)

When a new widget is added to the sidebar, the javascript does not load for that widget. for example, if I just installed a plugin like iCalendar Events Widget or live countdown timer (bare with me, it's not the plugin that's faulty and I'll tell you why) and after installation I want to add it to the sidebar, I go to the widgets area under prefferences and drag and drop it.

The bug is this: untill I refresh the page, the jquery won't work for anything in that widget. Both of the plugins mentioned above have a datepicker (from jquery-ui-core) popup that shows once a textbox or button is clicked. if the widget has just been added, the jquery that's supposed to run and show the calendars does not work until the page is refreshed.

I received a "not working" status because of this and people complained that my plugin (live countdown timer) is broken. On further investigation, I found out that it was because WordPress is not loading the javascript when first adding the widget in the sidebar and a refresh is required.

Change History (7)

#1 @SergeyBiryukov
12 years ago

  • Description modified (diff)
  • Summary changed from Wordpress widget admin bug to WordPress widget admin bug

#2 @scribu
12 years ago

  • Keywords reporter-feedback added
  • Severity changed from blocker to normal

Are you sure it's not loading the actual JavaScript code or is it just that the JavaScript doesn't fire properly?

Last edited 12 years ago by scribu (previous) (diff)

#3 @scribu
12 years ago

Here's some JS code I use in a widget that works fine:

add_action( 'admin_footer', 'my_widget_script' );

function my_widget_script() {
<script type="text/javascript">
	$(document).delegate('.qmt-taxonomies', 'mouseenter', function(ev) {

Note that naively calling $('.qmt-taxonomies').sortable() will not work when a new widget is created, because that DOM element simply doesn't exist yet when the JS is loaded.

#4 @o----o
12 years ago


The javascript in the widget is pretty confusing still, at least for me.
In order to run the javascript when we need it, we have to run through many triggers.

When we need the script it has to be ready when:

  1. The widget is dropped on the place
  2. When the admin widget page is loaded and the widget is already in the place
  3. On some action inside the the widget (and only for that widget)
  4. When the widget is saved

I'll show you step by step what I do for each state, because I haven't found anywhere how to do it at once, or easier.

  // 1. when dropped in
    console.log('just dropped in');
  // 2. do some stuff on load 
  // 3. on action
  $(document).delegate('.our_widget_class', 'change', function(ev) {
    // you have to find the parent widget here, 
    // and do something for it. And this is not easy  
    // because the widget shouldn't have it's ID yet, but still possible. 
    // This is actually the safest part of the whole process (maybe just for me)
    console.log('the element changed');
  // 4. on save
  $('body').ajaxSuccess(function(evt, request, settings) {

(The script is located outside of the widget php code)

And still, this is not a perfect solution. When the widget is dropped in the place, the widget goes at least through a mix of these states. I think it goes through state 1. 2. 4. .. But we know, that the widget could not undergo the step 4. it is not really saved yet. If it has been saved then it should have it's ID already, right?

I'm sure I do something wrong. But this example and also the fact that there are not many widget with
Javascript inside, shows how uneasy this actually is in the WP now.

I'm sorry but I haven't found any better description of this problem than here, so I hope Scribu might clarified it.

#5 @scribu
12 years ago

  • Keywords reporter-feedback removed
  • Summary changed from WordPress widget admin bug to JavaScript hooks for widgets
  • Type changed from defect (bug) to enhancement

#6 @scribu
12 years ago

Since most of these elements are jQuery UI widgets, they might already have some events triggered.

#7 @ocean90
10 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #19675.

Note: See TracTickets for help on using tickets.