4

Mootools and ExtJs have a compatibility issue when used on the same page. Mootools throws the following error :

 Uncaught TypeError: Property 'id' of object #<HTMLDocument> is not a function

How can we use both frameworks side by side ? Is there a workaround ?

Sergio
  • 28,539
  • 11
  • 85
  • 132
Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
  • Nice you got it working! +1 for unusual question – Sergio Oct 07 '13 at 15:11
  • what is the reason to use both on the same page? Seems like an overkill, no? – dbrin Oct 08 '13 at 03:14
  • @dbrin I try to upgrade an application that was written using a legacy framework ( jxlib, based on mootools ) in place and step by step. This involves rewriting all javascript, and I hope to be able to leave a part of the app as it is. – Lorenz Meyer Oct 08 '13 at 04:58

1 Answers1

5

This looks like a document.id('..') reference issue, it is defined but it's not the mootools method...

Nothing will work if it's not pointed to the mootools method.

I would argue that ExtJS or your app has added a property id to document, which is not a function as is likely a String or another primitive.

Pretty sure that ExtJS would not have been overwriting document.id, especially given that they (Sencha) employed MooTools core team dev @subtlegradient (thomas aylott) who co-wrote the Slick selector engine and helped engineer the document.id transition in MooTools from the simple $ in 1.11

You probably cannot do document.id = $ to restore it as it's by reference and it's been overwritten.

Only chance is to try loading MooTools after ExtJS is loaded and started - or load MooTools, save a ref like document.$id = document.id; immediately after, load ExtJS and then restore it back when ready via document.id = document.$id; delete document.$id - still no guarantees this will run at the right time. you really need to see what modifies your document object in web inspector (you can add a watcher)

Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69