ace editor and dynamic content

by Rowan Hamilton

HTML

<div id="editor">
</div>
<!-- this works using xmp and NOT when using div's! -->
<xmp id="editor_hidden">SELECT * FROM upDock where macAddress = 'B827EB1B26F9';</xmp>

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>

CSS

#editor {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
}
#editor_hidden {
display: none;
}

JavaScript

// comments represent dynamic environment set up

// this is in an external js file

function initAceEditor() {
var html_editor = ace.edit("editor");
html_editor.setTheme("ace/theme/monokai");
html_editor.getSession().setMode("ace/mode/sql");
html_editor.setFontSize("15px") ;
html_editor.setPrintMarginColumn(false);
html_editor.session.setValue($("#editor_hidden").text());
html_editor.setOptions({
maxLines: 25
});
}

// the function is called at the end of a function that
// includes a getJSON() request to a Python script which
// queries a MongoDB database and json dumps the results.  
// eg loadMyContent() {
// getJSON() and return content
initAceEditor()
// }

// Problems when using div instead of xmp:  

// In Firebug I can *see* the required HTML in the 'response'
// and 'json' tabs ie:
// <div id="acey_html_hidden"><html>test</html></div>
// but the Ace edior is just showing:
// test

// In Firebug's HTML view of the hidden div, when using <div> tags, the <html> tags have been stripped out.  
//
//When using <xmp> tags the <html> tags have not been stripped out.