title: codemirror.setOption('mode',val) isnt working
body: <p>I am trying to make a text editor with firepad and codemirror, everything works perfectly on page loading, but when I try to change the mode on button click, the function gets called but</p>
  
  <pre><code>codemirror.setOption('mode',val);//should change mode
  CodeMirror.autoLoadMode(editor, mode);//should reload codemirror
  </code></pre>
  
  <p>doesn't seem to work.
  I am calling the following code on the onload event of the body (works perfectly):</p>
  
  <pre><code>var firepadRef = getExampleRef();
  codeMirror = CodeMirror(document.getElementById('firepad-container'), {
      lineNumbers: true,
      mode: 'javascript'
  });
  var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
      defaultText: '// Welcome'
  });
  
  function getExampleRef() {
    var ref = database.ref('Firepad');
    var hash = window.location.hash.replace(/#/g, '');
    if (hash) {
      ref = ref.child(hash);
    } else {
      ref = ref.push(); // generate unique location.
      window.location = window.location + '#' + ref.key;
    }
    if (typeof console !== 'undefined') {
      console.log('Firebase data: ', ref.toString());
    }
    return ref;
  }
  </code></pre>
  
  <p>on button click event I am calling the following code (problem here!):</p>
  
  <pre><code>console.log('Button Clicked');
  CodeMirror.modeURL = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/%N/%N.js";
  var editor = CodeMirror(document.getElementById('firepad-container'), {
    lineNumbers: true
  });
  console.log("started changing");
  var val ="xml",mode,spec;
  mode=spec=val;
  editor.setOption("mode", spec);//isn't changing mode!!
  CodeMirror.autoLoadMode(editor, mode);//isn't reloading editor!!
  </code></pre>
  
  <p>This is just a miniaturized sample of the code (the relevant one).</p>
  
  <p>I am using as a resources for the mode reloading and for firebase with codemirror the following:</p>
  
  <p><a href="https://firepad.io/docs/" rel="nofollow noreferrer">https://firepad.io/docs/</a></p>
  
  <p><a href="https://codemirror.net/demo/loadmode.html#" rel="nofollow noreferrer">https://codemirror.net/demo/loadmode.html#</a></p>
  
  <p>Scripts and stylesheets being called are the following (the relevant ones only):</p>
  
  <pre><code>&lt;link rel="stylesheet" href="codemirror-dark.css"&gt;
  &lt;link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css"&gt;
  
  &lt;script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-database.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/codemirror.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/addon/mode/loadmode.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I am using Firefox and there is no errors on the developper console(it is just neither changing nor reloading).
  So what am I missing ??
  Thanks in advance.</p>