Unable to get property 'createRange' of undefined or null reference

Question

I have a SharePoint custom list form with a bunch of Javascript running on it. In particular I have one field where it gets its choices from a lookup to another list. The lookup returns n versions of each choice depending on how many times that choice is used in the lookup list (e.g. the option "Classification" appears 9 times in the lookup list because there are 9 records with "Classification" as a subject). I'm getting the titular error on my form when my Javascript tries to filter the options so I only have one copy of each choice in the drop-down.

While the code successfully filters the options, what happens is that when I try to save the item, I get "Something Went Wrong".

My code looks something like this:

$(document).ready(function(){
   getSubjects();
});

function getSubjects(){
    var namesArray=[];
    var optionSelected = $("select[title='Subject'] option:selected").val();
    var subject=$("select[title='Subject'] option:selected").text();

    $("select[title='Subject']").html("");
    $("select[title='Subject']").append("<option value='none'>(None)</option>");
    var url = _spPageContextInfo.webServerRelativeUrl + "/_vti_bin/ListData.svc/Services?select=Id,SubjectValue&$orderby=QuestionSubject asc";
    $.getJSON(url,function(data){
        console.log("Subjects");
        console.log(data.d.results);
        $.each(data.d.results, function(index, item){
                if(item.Active==true && namesArray[item.SubjectValue]!=1){
                    $("select[title='Subject']").append("<option value='"+item.Id.toString()+"'>"+item.SubjectValue+"</option>");                       
                    namesArray[item.SubjectValue]=1;                    
                }   
        });                     

    $("select[title='Subject'] option[value='"+optionSelected+"']").attr('selected','selected');

    }); 
getServices(subject);
}

}

Answer 1

I'm going to propose a hack, that may or may not work since I have no way to test it myself. As you already pointed it, it's mostly likely related to a change of DOM between IE8 and IE11. Looking at form.js, that createRange is pretty much only called on docEditor.selection, where docEditor is the Document of an RTE.

That actually makes sense, because older versions of IE supported Document.selection, but with IE11 it changed to Document.getSelection().

That's the bad news. The good news is that form.js gets this docEditor by calling a single function, RTE_GetEditorDocument, which gives us something to try to hook where we can fix the issue. So try adding something like this to your JavaScript:

var ORIG_RTE_GetEditorDocument = RTE_GetEditorDocument;
function RTE_GetEditorDocument(strBaseElementID) {
    var result = ORIG_RTE_GetEditorDocument(strBaseElementID);

    if(result) {
        // patch document.selection
        result.selection = result.getSelection();
    }

    return result;
}

Answer 2

Modify the code as below to check if it works.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   getSubjects();
});

function getSubjects(){
    var namesArray=[];
    var optionSelected = $("select[title='Subject'] option:selected").val();
    var subject=$("select[title='Subject'] option:selected").text();
    $("select[title='Subject']").html("");
    $("select[title='Subject']").append("<option value='none'>(None)</option>");
    var url = _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Services')/items?select=Id,Active,SubjectValue&$orderby=QuestionSubject asc";
    $.ajax({
        url: url,
        type: "GET",               
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            $.each(data.d.results, function(index, item){
                if(item.Active==true && namesArray[item.SubjectValue]!=1){
                    $("select[title='Subject']").append("<option value='"+item.Id.toString()+"'>"+item.SubjectValue+"</option>");                       
                    namesArray[item.SubjectValue]=1;                    
                }   
            });
            $("select[title='Subject'] option[value='"+optionSelected+"']").attr('selected','selected');
        },
        error: function (error) {
            console.log(JSON.stringify(error));
        }
    });
    //getServices(subject);
}
</script>

If still not works, we can use IE F12 develop tools to debug the code.