Custom widgets using MooTools on Django Admin pages

Question

I have a custom widget that I would like to make available to a Django Admin page. This is easily implemented using the formfield_overrides attribute of a ModelAdmin subclass, and using the Media child class, I can define the necessary JavaScript and CSS for this widget. This works rather well. The only issue is that my custom widget requires MooTools to function properly, which seems to conflict with jQuery and breaks the default Django Admin widgets (namely date and time pickers).

I think both MooTools and jQuery modify Object.prototype, and since MooTools gets loaded after jQuery, it seems to be overriding jQuery's modifications. DateTimeShortcuts.init(), which is responsible for rendering the date and time picker buttons, does not get called automatically if MooTools is loaded.

I am sort of in a pickle here, because I want to be able to use the built-in admin widgets, but my custom widget is just as important, if not more so. The widget is used throughout my application, which uses MooTools, so I can't change frameworks, amd I'd rather not maintain two widgets that perform the same function using different frameworks.. Does anyone have any suggestions as to how I can get around this conflict?

Answer 1

MooTools 1.2.3+ has a few safeguards for working with jQuery (and other libraries that don't modify prototypes). First of all you should add MooTools after jQuery, and then refrain from using the $ function in your MooTools code and instead use document.id.
This way, the $ function will still be "owned" by jQuery (unless you are using jQuery.noConflict)

Any remaining conflicts after you avoid using the $ function could be due to some jQuery plugins using for ... in to loop through an array without the corresponding hasOwnProperty safeguard.

For the record, jQuery does not modify any prototype (all functions are called on the jQuery namespace) and MooTools does not modify Object.prototype since version 1.2

edit: one more thing: check also for any namespace pollution introduced by the jQuery plugins, many times I found some plugins injecting functions in the global namespace and properties in DOM elements that conflicted with those used in MooTools.