Ace Code Editor Set Language Dynamically

Question

I'm attempting to implement Ace Code Editor with a drop down to select the language. My drop down has an id of mode. I have got the editor to work correctly, but I cannot change the language using the drop down as I would like it to do. My current code is

var editor = ace.edit("code");
var textarea = $('textarea[name="code"]').hide();
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/sql");
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});

$('#mode').on('change', function(){
var newMode = $("mode").val();
editor.session().setMode({
    path: "ace/mode/" + newMode,
    v: Date.now()});
});

As above, this successfully launches the editor, however I can't change the language from SQL, which is the initial language. I came across this question Dynamically update syntax highlighting mode rules for the Ace Editor which is why I've included

v: Date.now()

but still no luck.

Answer 1

you have a typo in the editor.session().setMode({ line

use editor.session.setMode("ace/mode/" + newMode) instead of it.

v: Date.now() was needed to disable caching, you most likely do not need that.