Materialize CSS Select update error

Question

Hi StackOverflow and fellow developers... So. I really enjoy Materialize CSS, but it can get to my head sometimes. I have some select elements on my site, which is very nice, and the initialization works fine and they are displayed. I then have another function to populate the selects, and according to the Materialize documentation i should just run $('select').material_select();again. Unfortunately when i try to call the function for the second time i get the error Uncaught TypeError: $(...).material_select is not a function.

I can't understand why i can't call the function when i just did in the document ready function?

JS Bundle For Page:

Blockquote

$(document).ready(function () {
    // This works fine and as expected my Selects are rendered perfect
    $('select').material_select();
    fetchSoftware();
    getusersinit();
});

var fetchSoftware = function fetchSoftware() {
    $.ajax({
        type: "Get",
        url: "Dashboard/GetSoftwares",
        data: { userName: "*****" },
        success: function success(softwares) {
            console.log(softwares);
            $("#softwareSelectDefault").remove();
            Object.keys(softwares).forEach(function (key) {
                $("#softwareSelect").append("<option>" + softwares[key] + "</option>");
            });
            //Down here shit falls apart. This doesen't work
            $('select').material_select();
        },
        error: function error(errorMessage) {
            //window.location.href = "/account/signin";
        }
    });
};

var getusersinit = function getusersinit() {
    $.ajax({
        type: "Get",
        url: "***********",
        data: { userName: "**********" },
        success: function success(reports) {
            console.log(reports);
            $(".progress").remove();
            Object.keys(reports).forEach(function (key) {
                $("#******").append("<tr id=\"" + reports[key].id + "\"><td><i class=\"medium material-icons\">" + reports[key].locked + "</i></td><td><i class=\"medium material-icons\">" + reports[key].status + "</i></td><td>" + reports[key].user + "</td><td>" + reports[key].script + "</td><td>" + reports[key].software + "</td><td>" + reports[key].testBench + "</td><td>" + reports[key].repository + "</td><td>" + reports[key].executionTime + "</td><td>" + reports[key].startDate + "</td></tr>");
            });
        },
        error: function error(errorMessage) {
            window.location.href = "/account/signin";
        }
    });
};

Update 10-04-2018
So, after spending almost the whole workday yesterday on this problem, I'm now a little closer to a solution. I discovered something very strange. Apparently, the problem lies in my ajax call. I have a theory, that it depends on the url or reply.

$(document).ready(function () {
    //fetchSoftware works. If i run getuserinit it does not. Then material_select doesen't exist
    fetchSoftware();
});

var fetchSoftware = function fetchSoftware() {
    $.ajax({
        type: "Get",
        url: "https://jsonplaceholder.typicode.com/posts/1",
        data: { userName: "XXXXXX" },
        success: function (result) {
            $("#testReports").append(`<tr><td>TEST</td></tr>`);
            $("#softwareSelect").append(`<option>Test Option</option>`);
            $('#softwareSelect').material_select();
        },
        error: (errorMessage) => {
            window.location.href = "/account/signin";
        }
    });
};
var getusersinit = function getuserinit() {
    $.ajax({
        type: "Get",
        url: "Dashboard/LoadTable",
        data: { userName: "XXXXXX" },
        success: function (result) {
            $("#testReports").append(`<tr><td>TEST</td></tr>`);
            $("#softwareSelect").append(`<option>Test Option</option>`);
            $('#softwareSelect').material_select();
        },
        error: (errorMessage) => {
            window.location.href = "/account/signin";
        }
    });
};

Answer 1

I fixed the issue, though it is a workaround. Put the selects in variables...

/*
These constant are created because of an unsolved issue:
See https://stackoverflow.com/questions/49728000/
By putting the selects into constants, and only referencing the constants,
this is a workaround.
*/
var selectSoftware = $('#softwareSelect');

$(document).ready(function () {
    selectSoftware.material_select();
    getSoftware();
});

var getSoftware = function getSoftware() {
    $.ajax({
        type: "Get",
        url: "Dashboard/GetSoftwares",
        data: { userName: "XXXXXXX" },
        success: function success(softwares) {
            console.log(softwares);
            $("#softwareSelectDefault").remove();
            Object.keys(softwares).forEach(function (key) {
                $("#softwareSelect").append("<option>" + softwares[key] + "</option>");
            });
            selectSoftware.material_select();
        },
        error: function error(errorMessage) {
            //window.location.href = "/account/signin";
        }
    });
};