textArea and CodeMirror: How to fill text area and highlight?

Question

I have a folloowing: textarea and button, I would like to fill it by predefined text and in meantime make a syntax highlighting with CodeMirror:

$('#query1').button()
                .click(function() {
                    $('#queryText').val(<?php echo $queryArray[0];?>);
                }

Then:

<form id="queryFrom" name="queryBox"
    action="processquery.php" method="get">
        <textarea id="queryText"
    name="queryText" cols="120" rows="30">
    </textarea>
    </form> 
<button id="query1">Query1</button>
<script type="text/javascript" src="js/code/js/codemirror.js"></script>

<script type="text/javascript">

var editor = CodeMirror.fromTextArea('queryText', {
      height: "150px",
      parserfile: "parsesql.js",
      path: "js/code/js/",
      stylesheet: "js/code/css/sqlcolors.css",
      textWrapping: true
    });
</script>

unfortunately the text from button does not fill the area if CodeMirror is enabled. What is the problem?

kind regards Arman.

Answer 1

what I've been using to create a CodeMirror textarea is:

CodeMirror.fromTextArea(document.getElementById('queryText'), {
  // your settings here
});

Note the getElementById instead of just giving the name/ID of the field.

Thereby I think you should also post quotes around the PHP part, so:

val('<?php echo $data[0]; ?>')

You should check your sourcecode if the onclick event has the right text loaded. If it doesn't work try to perform a getJSON() code in the onclick to a PHP file that returns a json encoded array containt the data as only key (data[0].field or something similar).

Answer 2

I found a CodeMirror JQuery plugin that promises to solve the problems with jquery adding other event handlers, but it doesn work for me :-/

This would be the new way to setup it:

$("textarea#codemirror").codemirror({
    lineNumbers : true,
    matchBrackets : true,
    tabMode: "indent"
});