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
Rohit BajajAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sajayj2009Commented:
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 BajajAuthor Commented:
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.
sajayj2009Commented:
In js file; changed this?
$("#mode").on("change", function() {
        mime = $("#mode option:selected").prop("id");

Open in new window


to

$("#mode").on("change", function() {
        mime = $("#mode option:selected").prop("value");

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ValeriCommented:
1. is your ajax request to another domain ? do you have cross domain request ?
2. replace the line
var objectTobeSent = {};
with this one
var objectTobeSent;
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.