Reputation: 319

IE 11 throws js breaking error 1010 unexpectedly in the middle of a tab to <h1> element

I am writing a project for work, when the page loads it will grab a page via ajax query, on button click it will grab another page. I have checked my syntax for the ajax and seems to be working, tested the same code in Chrome and FireFox.

The error is the following from ie dev tools:

SCRIPT1010: Expected identifier
File: admin, Line: 40, Column: 15

I just don't get why it is giving me an error for somewhere that doesn't have code:

</head>
<body class="default-bg">
    <div class="container">
        <div class="container-fluid">
            <div id="header">
                <div class="jumbotron card-primary">
           <!--ie errors here-->         <h2 class="text-center">Administration Panel</h2>
                </div>
            </div>
        </div>
    </div>
...

<script>
    $(document).ready(function(){
        $.ajaxSetup({ cache: false });
        $("button#content-approval-button").addClass('active-btn');
        getPage('cap');
    });
    function getPage(pageToGet){
        $.ajax({
            url:"../includes/scripts/php/actions/pages.php",
            type:"POST",
            cache:false,
            data:"&page=" + pageToGet,
            success:function(r){
                $('#page-content').html(r);
            },
            error:function(r){
                alert("failed");
            }
        });
    }
</script>

The thing is that it throws a larger and more pesky fit when the page is loaded and you try to click on something that has JS built in and IE dev tools suck. this is the script tag from the page I'm trying to load the functions fail to be found I feel that it is due to the 1010 error

<script>
var output="";
var md=window.markdownit({
    html:true,
    typographer:true,
    xhtmlout:true,
    breaks:true,
    linkify:true
});
md.use(window.markdownitEmoji);
md.use(window.markdownItAttrs);
md.use(window.markdownitAbbr);
md.use(window.markdownitDeflist);
md.use(window.markdownitIns);
md.use(window.markdownitMark);
md.use(window.markdownitSub);
md.use(window.markdownitSup);
md.use(window.markdownitMultilineTbl);
md.renderer.rules.table_open = function(tokens, idx) {
    return '<table class="table table-striped">';
};

function parseMarkDown(){
    var input = $("#input").val();
    var semiSanitized = input.replace(/javascript:/igm," javascript code is disabled ");
    //the code sanitation will finish on the sever side with removal of script tags.
    //client side it "sanitizes the page as well as input... thus making the page break.
    output = md.render(semiSanitized);    
    $('#output').html(output);
}

function updateTitle(){
    var i = $('#title').val();
    var semiSanitized = i.replace(/javascript:/igm," javascript code is disabled ");
    $('#c-title').text(i);
}

function insertByButton(startEle,endEle){
    var inV = document.getElementById('input');
    const {value, selectionStart, selectionEnd} = inV;
    const beforeSelection = value.substring(0, selectionStart);
    const selection = value.substring(selectionStart, selectionEnd);
    const afterSelection = value.substring(selectionEnd);
    inV.value = beforeSelection + startEle + selection.trim() + endEle + afterSelection;
    parseMarkDown();
    inV.focus();
    if (selectionEnd == selectionStart){
        var i = beforeSelection + startEle;
        inV.setSelectionRange(i.length,i.length);
    }else{
        inV.setSelectionRange(selectionEnd,selectionEnd);
    }
}

function buildPageTemplate(){
    var inV = document.getElementById('input');
    var h = "some proprietary text\n";
    h += "# "+$("#title").val()+'{class="jumbotron card-primary card-shadow card-bottom-spacer-md text-center" id="doc-title" title="'+$('#title').val()+'"}\n';
    inV.value = "";
    inV.value = h;
    parseMarkDown();
}

So the following are a few buttons that should insert text into a text-area...

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="btn-toolbar card-left-spacer-sm card-bottom-spacer-sm">
                    <button id="ins-template" class="btn btn-default" title="Insert page template" onclick="buildPageTemplate();"><img src="../includes/images/png/glyphicons-703-file-plus.png" alt="insert page template code"></button>
                    <button id="ins-heading" class="btn btn-default" title="Insert # for h1-h6" onclick="insertByButton('#','');"><img src="../includes/images/png/glyphicons-106-text-height.png" alt="insert # for h1-6"></button>
                    <button id="ins-css-styler" class="btn btn-default" title="Insert an attribute tag" onclick="insertByButton('','{class=&quot;&quot; id=&quot;&quot; title=&quot;&quot;}');"><img src="../includes/images/png/glyphicons-67-tags.png" alt="insert attribute tag snippet"></button>
                    <button id="ins-code-block" class="btn btn-default" title="Insert a code block" onclick="insertByButton('\n``` \n','\n```\n');"><img src="../includes/images/png/glyphicons-119-embed-close.png" alt="insert code block"></button>
                    <button id="ins-quote" class="btn btn-default" title="Insert block quote" onclick="insertByButton('\n> ','\n>_-- [attributation]_{.pull-right}');"><img src="../includes/images/png/glyphicons-547-quote.png" alt="insert block or regular quote"></button>
                    <button id="ins-ulist" class="btn btn-default" title="Insert an unordered list" onclick="insertByButton('\n- ','');"><img src="../includes/images/png/glyphicons-115-list.png" alt="insert an unordered list with bullet points"></button>
                    <button id="ins-olist" class="btn btn-default" title="Insert an ordered list" onclick="insertByButton('\n1. ','');"><img src="../includes/images/png/glyphicons-710-list-numbered.png" alt="insert ordered list with numerical values"></button>
                    <button id="ins-code-inline" class="btn btn-default" title="Insert inline code snippet" onclick="insertByButton('`','`');"><img src="../includes/images/png/glyphicons-118-embed.png" alt="insert code inline with text"></button>
                    <button id="ins-bold" class="btn btn-default" title="Insert bold text" onclick="insertByButton('**','**');"><img src="../includes/images/png/glyphicons-103-bold.png" alt="insert bolded text"></button>
                    <button id="ins-underline" class="btn btn-default" title="Insert underlined text" onclick="insertByButton('++','++');"><img src="../includes/images/png/glyphicons-104-text-underline.png" alt="insert underlined text"></button>
                    <button id="ins-italic" class="btn btn-default" title="Insert italicized text" onclick="insertByButton('_','_');"><img src="../includes/images/png/glyphicons-102-italic.png" alt="insert italicized text"></button>
                    <button id="ins-strike" class="btn btn-default" title="Insert strike though text" onclick="insertByButton('~~','~~');"><img src="../includes/images/png/glyphicons-105-text-strike.png" alt="insert strike through text"></button>
                    <button id="ins-highlight" class="btn btn-default" title="Insert highlighted text" onclick="insertByButton('==','=={.highlight-yellow}');"><img src="../includes/images/png/glyphicons-236-pen.png" alt="insert highlighted text"></button>
                    <button id="ins-sub" class="btn btn-default" title="Insert subscript text" onclick="insertByButton('~','~');"><img src="../includes/images/png/glyphicons-604-subscript.png" alt="insert subscript text"></button>
                    <button id="ins-super" class="btn btn-default" title="Insert superscript text" onclick="insertByButton('^','^');"><img src="../includes/images/png/glyphicons-603-superscript.png" alt="insert superscript text"></button>
                </div>
            </div>
        </div>

And as mentioned before all of this code works great in other browsers but due to the company most exclusively using IE11 I am forced to develop for it... any suggestions to what might be going wrong?

Upvotes: 0

Answers (1)

Napoli

Reputation: 1403

Your problem is here:

const {value, selectionStart, selectionEnd} = inV;

You cannot destruct your value to a list of variables. It is not supported in any version of IE. See here for more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Upvotes: 2

IE 11 throws js breaking error 1010 unexpectedly in the middle of a tab to &lt;h1&gt; element

Answers (1)

Related Questions

IE 11 throws js breaking error 1010 unexpectedly in the middle of a tab to <h1> element