JavaScript hooks for widgets

[ciprian_vb]

Hi,
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.

[scribu]

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

[scribu]

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">
jQuery(function($){
	$(document).delegate('.qmt-taxonomies', 'mouseenter', function(ev) {
		$(this).sortable();
		$(this).disableSelection();
	});
});
</script>
<?php
}

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.

[o----o]

hello,

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.

jQuery(document).ready(function($){
  // 1. when dropped in
  $('div.widgets-sortables').bind('sortstop',function(event,ui){
    console.log('just dropped in');
  });
  // 2. do some stuff on load 
  console.log('onLoad');
  // 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) {
    console.log('saved');
  });
});

(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.

[scribu]

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

[ocean90]

Duplicate of #19675.