Topic on Extension talk:Widgets

Hello, I'm editing widgets on a wiki that just upgraded from MW version 1.24.2 to version 1.26.2. This edit has broken pretty much all of the widgets we wrote. I'm guessing based on the 1.26 update notes that "ResourceLoader became fully asynchronous" has caused the problem.

Firefox error console reads "ReferenceError: $ is not defined" ... will a Widget's script tags load before the mw.loader jquery module? I took a stab in the dark by wrapping all of my old code in $(document).ready(function () { //your code here}); but that didn't help, even after purging the widget cache. Any ideas on how to fix this?

Widget in usage | Widget page

Additionally, most (all?) of the example prewritten library widgets seem to be iframes without any other tags apart from smarty syntax. The complete lack of any other examples makes trying to fix our own widgets by tinkering with existing examples much harder.

perhaps Topic on Talk:Learning Javascript - jQuery document ready shortcut confusion is related?

edit: oh darn my apologies, I've just come across ResourceLoader/Migration guide (users) I suspect this will fix my problems.

Yes, the changes to ResourceLoader changed a lot of things. I don't know if it's possible any more to have a widget that uses jQuery. If it were, at the very least you'd need an equivalent to "document.ready" that didn't require jQuery. Thankfully, such a thing is possible (mostly - doesn't work with some IE versions) - see here:

http://dustindiaz.com/smallest-domready-ever

That worked perfectly thank you very much.

Ah! That's very good to know.

To run scripts with jQuery support, you should use the resource loader queue RLQ. Just call RLQ.push() and pass in the function you want to execute. It will run as soon as the loader is initialized and jQuery is available. You can call this from any position on the page: Either the script will be deferred until the environment is available, or if everything is ready already, it will just instantly execute the script. For example:

RLQ.push(function () {
    console.log('This runs with jQuery support', $);
});