CodeMirror textarea.getAttribute is not a function error in mvc3 application

Question

Im using codemirror in my ASP.NET MVC 3 application, codemirrors version is up to date(2.34)

my TextArea looks like this:

@Html.TextAreaFieldFor(s => s.Data.CodeBehind, htmlAttributes: new Dictionary<string, object> { { "class", "textbox codeBehind nffp-code" } })

I use codemirror like this:

var a = CodeMirror.fromTextArea($code, {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-csharp"
});

where $code is

var $code = jQuery('.nffp-code', $root);

And after page load I have this error:

TypeError: textarea.getAttribute is not a function codemirror.js Line 2209 textarea.getAttribute("autofocus") != null && hasFocus == document.body;

I used this manual for using codemirror: manual

Even thought, Im a total noob in JS, I guess its hard to do it wrong, still I did.

Any Ideas how to fix the promblem?

Answer 1

You need to use document.getElementById() instead of the jQuery lookup.

Answer 2

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

In jQuery, to get the same result as document.getElementById(), you can access the jQuery Object and get the first element in the object (Remember JavaScript objects act similar to associative arrays).

var contents = $('#contents')[0]; //returns a HTML DOM Object