Ace Code Editor Installs the language dynamically

Question

I am trying to implement Ace Code Editor with a drop down list to select a language. My drop down has a mode id. I have an editor to work correctly, but I can’t change the language using the drop-down list as I would like. My current code

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 launches the editor successfully, however I cannot change the SQL language, which is the source language. I came across this question Dynamically update syntax highlighting rules for the Ace editor that's why I included

v: Date.now()

but still no luck.

Answer 1

editor.session().setMode({

editor.session.setMode("ace/mode/" + newMode) .

v: Date.now() , , , .

Answer 2

editor.getSession(). setMode ( "ace/mode/" + newMode);

editor.session editor.getSession()