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

Question

I'm using CodeMirror in my ASP.NET MVC 3 application, CodeMirror's 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, I'm a total noob in JS, I guess it's hard to do it wrong, still I did.

Any Ideas how to fix the problem?

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