ACE editor + requirejs + AMD jquery plugin: mode cannot be loaded

Question

I am using this version of ACE - git://github.com/ajaxorg/ace.git

And the this is I load it via requirejs,

require([
    // Load our app module and pass it to our definition function
    'jquery',
    'ext/ace-master/lib/ace/ace'
...

And how I evoke the editor,

var editor = ace.edit("ace-editor");
editor.setTheme("ext/ace-master/lib/ace/theme/eclipse");
editor.getSession().setMode("ext/ace-master/lib/ace/mode/xml");

But I always get this error message, and syntax highlighter is not highlighting any code in the form,

Could not load worker
ace.js (line 1)
TypeError: this.$mode.createWorker is not a function


...ts","module","ace/lib/lang"],function(a,b,c){var d=a("../lib/lang"),e=function()...


TypeError: a.getTokenizer is not a function


...ts","module","ace/lib/lang"],function(a,b,c){var d=a("../lib/lang"),e=function()...

Did anyone come across this problem and know how to fix it?

If I use this build version - https://github.com/ajaxorg/ace-builds/ there are even more errors - files not found, etc.

or this http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js - lots of not-found errors!

Note: I load the form via jquery ajax by the way, is it the ajax that causing the error??

Answer 1

you have miconfigured require paths

add

require.config({paths: {
    ace: "ext/ace-master/lib/ace"
}})

before the first require and use setMode("ace/mode/xml");

see http://jsbin.com/ojijeb/339/edit for working version

Answer 2

Yes, your AJAX is loading your form after the rest of the Javascript has already finished.

You can have the same function reload your Javascript but I'm not sure what kind of conflicts might arise since your code isn't really all here.

I had a similar issue and to overcome it I included the Javascript inside of the data that came through with the HTML I was requesting. Food for thought.

Answer 3

Got it worked with this build version - https://github.com/ajaxorg/ace-builds/ finally.