asked on

Error: Permission denied to access property "toString" <option id="text/css" > CSS</option>

Hi,
On load of my web page i see the following error in my FireBug console :

Error: Permission denied to access property "toString"
<option id="text/css" > CSS</option>

Open in new window

what could be the reason for this ?

Jsp for the page :

<!DOCTYPE html>
<html>
  <head>
    <title>Create Snippet</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <script>var require = {config: function (c) {require = c}}</script>

  </head>

  <body>
    <div id="container">
      <div class="dijitDialogTitleBar">
	<div class="dijitDialogTitle">Create Snippet</div>
      </div>
      <div class="dijitDialogPaneContent">
	<input id="name" type="text" class="title" placeholder="Title (Optional)" />
	<div class="form-group">
	  <select id="mode" class="form-control">
	    <option value="" disabled selected style='display:none;'>Code Type</option>
<option id="text/apl" > APL</option>
	    <option id="application/pgp" > PGP</option>
	    <option id="text/x-ttcn-asn" > ASN.1</option>
	    <option id="text/x-asterisk" > Asterisk</option>
	    <option id="text/x-csrc" > C</option>
	    <option id="text/x-c++src" > C++</option>
	    <option id="text/x-cobol" > Cobol</option>
	    <option id="text/x-csharp" > C#</option>
	    <option id="text/x-clojure" > Clojure</option>
	    <option id="text/x-cmake" > CMake</option>
	    <option id="text/x-coffeescript" > CoffeeScript</option>
	    <option id="text/x-common-lisp" > Common Lisp</option>
	    <option id="application/x-cypher-query" > Cypher</option>
	    <option id="text/x-cython" > Cython</option>
	    <option id="text/css" > CSS</option>
	    <option id="application/x-httpd-php" > PHP</option>
	    <option id="text/x-pig" > Pig</option>
	    <option id="text/plain" > Plain Text</option>
	    <option id="text/x-plsql" > PLSQL</option>
	    <option id="text/x-properties" > Properties files</option>
	    <option id="text/x-python" > Python</option>
	    <option id="text/x-puppet" > Puppet</option>
	    <option id="text/velocity" > Velocity</option>
	    <option id="text/x-verilog" > Verilog</option>
	    <option id="application/xml" > XML</option>
	    <option id="application/xquery" > XQuery</option>
	    <option id="text/x-yaml" > YAML</option>
	    <option id="text/x-z80" > Z80</option>
	  </select>
	</div>
	
	<div id="editor-pane">
	  <div id="editor"></div>
	</div>
	<div class="message_area">
	  <textarea id="message" type="text" placeholder="Add Comment (Optional)" ></textarea>
	</div>
	<div class="buttons">
	  <button id="submit" class="btn_green">Create & Post</button>
	  <button class="dailogueCancel" id="cancel">Cancel</button>
	</div>
      </div>
    </div>
    <div class="invisible" data-create-url="${createURL}"></div>
  </body>
</html>

Open in new window

Following js is also included in the page :

require(["jquery", "detect", "utils", "codemirror/lib/codemirror", "codemirror/mode/meta", "codemirror/addon/mode/loadmode", "codemirror/addon/selection/active-line"], function ($, detect, utils, CodeMirror) {

    CodeMirror.modeURL = "codemirror/mode/%N/%N";

    var cm = window.cm = CodeMirror($('#editor').get(0), {
        styleActiveLine: true,
        lineNumbers: !detect.isMobile,
    });

    var mime;
    $("#mode").on("change", function() {
        mime = $("#mode option:selected").prop("id");
        var mode = CodeMirror.findModeByMIME(mime).mode;
        cm.setOption("mode", mode);
        CodeMirror.autoLoadMode(cm, mode);
    });

    $("#submit").on("click", function(e) {               // on submtting make the editor readonly
        //alert($("#name").value());
        e.preventDefault();
        e.stopPropagation();

        var objectTobeSent = {};
        objectTobeSent.id = null;
        objectTobeSent.title = $("#name").val();
        if (objectTobeSent.title === "") {
            objectTobeSent.title = "Untitled";
        } 
        objectTobeSent.mime = mime;//console.log(objectTobeSent.mode);
        objectTobeSent.text = cm.getValue();

        var createURL = document.getElementsByClassName("invisible")[0].dataset.createUrl;

        $.ajax({
            contentType: "application/json; charset=utf-8",
            url : createURL,
            type: "POST",
            data : JSON.stringify(objectTobeSent),
            success: function(snippet, status, xhr) {
                if (xhr.status !== 201) {
                    alert("Couldn't create code snippet. Please try after sometime");
                } else if (!utils.sendMessage(snippet, objectTobeSent.title, $("#message").val())) {
                    window.location.href = snippet.URL;
                }
            },
            error: function(request, status, error) {
                alert(request.responseText);
            }
        });
    });

    $("#cancel").on("click", function (e) {
    });
});

Open in new window

What could be the reason for this error ? How do i correct it ?
Thanks

sajayj2009

Cannot provide Wild characters in ID or Class....
You can provide that in value attribute.. probably this is what you intend to do.

This
id="application/pgp"
to
value="application/pgp"

Rohit Bajaj

ASKER

On Changing id to value still i get the error :
Error: Permission denied to access property "toString"
<option value="text/x-cassandra" > CQL</option>

Also in documentation it just says that HTML id attribute should not contain spaces.
Doesnt mention anything about wild cards.

ASKER CERTIFIED SOLUTION

sajayj2009

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Valeri

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Error: Permission denied to access property &quot;toString&quot; &lt;option id=&quot;text/css&quot; &gt; CSS&lt;/option&gt;

Error: Permission denied to access property "toString" <option id="text/css" > CSS</option>