Cannot read property 'createDocumentFragment' of null

Question

<div class="input-group col-md-6">
  <select id="select-mesaj-gonderim-turleri" class="form-control mesajgonderimturusec input-circle" asp- 
     for="Model.FKMesajGonderimTurleriID" asp-items="ViewBag.MesajGonderimTurleri" required>
  </select>
</div>
<div class="input-group col-md-6">
   <select id="select-birimler" class="form-control birimsec input-circle" asp-for="Model.FkBirimID" asp- 
         items="ViewBag.Birimler" required></select>
</div>

<script>
function GetBirimGetir() {
            var url = '@Url.Action("GetBirimlerByBirimKod", "Helper", new { area = "Yonetim" })';
            console.log("url", url);
            LoadSelectList(url, null, 'Seçiniz', 'select-birimler', null, false, ('@ViewBag.GuncellenecekBirimID' != null && '@ViewBag.GuncellenecekBirimID' > 0) ? '@ViewBag.GuncellenecekBirimID' : null, 'Birim Bulunamadı');
        };
        function GetMesajGonderimTurleriniGetir() {
            var url = '@Url.Action("GetMesajGonderimTurleriByID", "Helper", new { area = "Yonetim" })';
            console.log("url",url);
            LoadSelectList(url, null, 'Seçiniz', 'select-mesaj-gonderim-turleri', null, false,('@ViewBag.GuncellenecekMesajGonderimTurleriID' !== null && '@ViewBag.GuncellenecekMesajGonderimTurleriID' > 0) ? '@ViewBag.GuncellenecekMesajGonderimTurleriID' : 'null', 'Tür Bulunamadı');
        };

        $(document).ready(function () {
            $(document).load('change', '.birimsec', GetBirimGetir);
            $(document).load('change', '.mesajgonderimturusec', GetMesajGonderimTurleriniGetir);

        });
</script>

I'm using loadselectlist javascript method to populate drop down lists

There is no problem when I enter the insert page. the drop down lists are getting filled. I can select and save. When entering the update page it throws the error seen in the picture below

There is no problem when I enter the insert page. the drop down lists are getting filled. I can select and save. When entering the update page it throws the error seen in the picture below

function LoadSelectList(url, value, label, target, callback, selectAll, selecteds, actionEmptyLabel) {
    debugger;
    var targetDropDown = $('#' + target);
    console.log("actionEmptyLabel",actionEmptyLabel);
    
    $.getJSON(url, value, function (result) {

        if (result.Action != GLOBAL_VARIABLES.ActionSuccess) {
            Warning(result.Message);
            return false;
        }

        var items = result.Data;

        targetDropDown.empty();
        targetDropDown.removeAttr('disabled');
        
        if (items !== null && items.length > 0) {

            if (label !== null && label !== undefined) {
                targetDropDown.append($('<option/>', {
                    value: '',
                    text: label
                }));
            }
            console.log(" $(this)", $(this));
            console.log(" targetDropDown", targetDropDown);
            $.each(items, function (index, item) {
                console.log("index");

                if (item.Disabled) {

                    targetDropDown.append($('<option/>', {
                        value: item.Value,
                        text: item.Text,
                        disabled: "disabled"
                    }));
                } else {
                    targetDropDown.append($('<option/>', {
                        value: item.Value,
                        text: item.Text
                    }));
                }
            });
        } else {
            if (actionEmptyLabel !== null && actionEmptyLabel !== undefined) {
                targetDropDown.append($('<option/>', {
                    value: '',
                    text: actionEmptyLabel
                }));
            }
        }

        if (selectAll) {
            var selected = [];
            targetDropDown.find("option").each(function (i, e) {
                selected.push($(e).attr("value"));
            });
            targetDropDown.val(selected).trigger("change");
        }

        if (selecteds) {
            targetDropDown.val(selecteds).trigger("change");
        }
    }).fail(function (xhr, status, error) {
        console.error(xhr);
        console.error(error);

    });
}

Answer 1

Had same error message when trying to append a modal to current document

$.get(url).done(function (data) {
   $(document).append(data).find('.modal').modal('show');
});

the issue was that can not append to the full page but just to the body

$.get(url).done(function (data) {
   $(document.body).append(data).find('.modal').modal('show');
});

Answer 2

The problem is caused by the difference of document.ready () and window.load ()

document.ready () DOM objects are executed as soon as they are loaded, document.ready () does not wait for image and css files to load. Window.load () runs after all images css are loaded. When we want to get the actual size of an image, we need to use the window.load () method.

I changed the code as below and the problem was fixed.

$(document).ready(function () {
     $(window).load('change', '.birimsec', GetBirimGetir());
     $(window).load('change', '.mesajgonderimturusec', GetMesajGonderimTurleriniGetir());
});