0

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);
}

}
5
  • On what line of code is this error being thrown? I don't see createRange any place on this page except in your question?
    – Joe McShea
    Apr 3, 2019 at 18:06
  • I don't call createRange - you are correct. It shows the error happening in the form.js library at line 1,9996. I've seen another comment on this that it is an issue with a version of the DOM that causes this error. We just migrated and went from IE 8 to IE 11 mode. Apr 3, 2019 at 18:32
  • Ok, your form.js is at least 4 times the size of mine, but putting that aside 90% of form.js is dealing with rich text editors, and createRange is almost certainly an RTE thing. So what sort of RTEs do you have? i.e. rich text or enhanced rich text? and can you try switching to the other?
    – Joe McShea
    Apr 3, 2019 at 19:09
  • All my multi-line text fields are either plain text or regular (not enhanced) rich text. Apr 3, 2019 at 20:25
  • If you have the option, try changing to enhanced rich text. At least changing in that direction won't result in any loss of data or functionality, and the old rich text editor doesn't play well with a lot of form customization. If you can't, or just don't like ERTE, try my hack answer.
    – Joe McShea
    Apr 3, 2019 at 20:38

2 Answers 2

0

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;
}
3
  • I'm not calling it explicitly anywhere - I do have some code that inserts some text into one of these rich text fields, but it does so by a $("fieldID").html(contents); Could that be what's causing the problem? Apr 3, 2019 at 20:27
  • It certainly could, if the element you're setting the html on isn't what you think it is. Marc Anderson has a blog post on setting RTEs at sympmarc.com/2011/05/25/…, you might want to take a look at that. From looking at that post, if $("fieldID") resolves to the textarea, you should be good. If not, you're probably messing with the DOM that the RTE depends on.
    – Joe McShea
    Apr 4, 2019 at 2:52
  • It also depends on what you're other JavaScript is doing. For instance, RTEs don't generally work well when you move them, for things like tabbed forms.
    – Joe McShea
    Apr 4, 2019 at 2:57
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.