Navegación mediante AJAX

[Silenn]

Hola a todos y muy buenas noches Forer@s. Espero puedan ayudarme.
Tengo ya buen tiempo sin saber que hacer, dándole vueltas al asunto y sin encontrar alguna solución, la cuestión es que como comento en el título, tengo una navegación mediante AJAX que encontré por allí, y funciona muy bien.
Mi problema viene que cuando cargo la página que tiene un slider de materialize iniciado en un archivo JS que se junto con el otro contenido del AJAX, me explico: Tengo una serie de páginas, en una de ellas hay un carousel o sider que se inicializa con la funcion $('.carousel').carousel({parámetros}); todo el contenido html que especifiqué en la página se muestra bien, pero la función no se ejecuta y por tanto no me muestra el carousel, les adjunto unas imágenes para que me logren entender.

Cuando se carga accediendo directamente a la url en el navegador:


Y aquí cuando se carga la página mediante AJAX:


Cabe destacar que tengo un div principal con una id wrapper, donde se carga todo el contenido, excluyendo el footer, las cabeceras y el menú de navegación. Les dejo un ejemplo del código:

Código PHP:

<?php
    $page_title = "Inicio";
    $as_json = false;
    
    if(isset($_GET["view_as"]) && $_GET["view_as"] == "json"){
        $as_json = true;
        ob_start();
    } else {
        include('static/common/topsite.php');
    ?>
    <div id="wrapper">
<?php } ?>
    <div class="container">
        <div class="overlay"><img src="cdn/img/logo.png" alt="Agentes del Infinito"></div>
    </div>
    <!-- MaterializeCSS -->
    <script src="cdn/js/jquery-3.3.1.min.js"></script>
    <script src="cdn/js/materialize.min.js"></script>
    <script src="cdn/js/navigation.js"></script>
    <script src="cdn/js/init.js"></script>
<?php if($as_json){
    echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
} else { ?>
    </div>
<?php include('static/common/footer.php'); } ?>
 

También les voy a dejar el código para la navegación en ajax, quizá el error está ahí.

Código Javascript:

"use strict";
var ajaxRequest = new (function () {
    function closeReq () {
        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
        bIsLoading = false;
    }
    function abortReq () {
        if (!bIsLoading) { return; }
        oReq.abort();
        closeReq();
    }
    function ajaxError () {
        alert("Unknown error.");
    }
    function ajaxLoad () {
        var vMsg, nStatus = this.status;
        switch (nStatus) {
            case 200:
                vMsg = JSON.parse(this.responseText);
                document.title = oPageInfo.title = vMsg.page;
                document.getElementById(sTargetId).innerHTML = vMsg.content;
                if (bUpdateURL) {
                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
                    bUpdateURL = false;
                }
                break;
            default:
                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
                switch (Math.floor(nStatus / 100)) {
                    case 1:
                        console.log("Information code " + vMsg);
                        break;
                    case 2:
                        console.log("Successful code " + vMsg);
                        break;
                    case 3:
                        console.log("Redirection code " + vMsg);
                        break;
                    case 4:
                        console.log("Client Error #" + vMsg);
                        break;
                    case 5:
                        console.log("Server Error #" + vMsg);
                        break;
                    default:
                        ajaxError();
                }
        }
        closeReq();
    }
    function filterURL (sURL, sViewMode) {
        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
    }
    function getPage (sPage) {
        if (bIsLoading) { return; }
        oReq = new XMLHttpRequest();
        bIsLoading = true;
        oReq.onload = ajaxLoad;
        oReq.onerror = ajaxError;
        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
        oReq.send();
        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
    }
    function requestPage (sURL) {
        if (history.pushState) {
            bUpdateURL = true;
            getPage(sURL);
        } else {
            location.assign(sURL);
        }
    }
    function processLink () {
        if (this.className === sAjaxClass) {
            requestPage(this.href);
            return false;
        }
        return true;
    }
    function init () {
        oPageInfo.title = document.title;
        history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
    }
    const sTargetId = "wrapper", sViewKey = "view_as", sAjaxClass = "goto",
        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingSpin = document.createElement("div"),
        oPageInfo = {
            title: null,
            url: location.href
        }, oHTTPStatus = {
            100: "Continue",
            101: "Switching Protocols",
            102: "Processing",
            200: "OK",
            201: "Created",
            202: "Accepted",
            203: "Non-Authoritative Information",
            204: "No Content",
            205: "Reset Content",
            206: "Partial Content",
            207: "Multi-Status",
            208: "Already Reported",
            226: "IM Used",
            300: "Multiple Choices",
            301: "Moved Permanently",
            302: "Found",
            303: "See Other",
            304: "Not Modified",
            305: "Use Proxy",
            306: "Reserved",
            307: "Temporary Redirect",
            308: "Permanent Redirect",
            400: "Bad Request",
            401: "Unauthorized",
            402: "Payment Required",
            403: "Forbidden",
            404: "Not Found",
            405: "Method Not Allowed",
            406: "Not Acceptable",
            407: "Proxy Authentication Required",
            408: "Request Timeout",
            409: "Conflict",
            410: "Gone",
            411: "Length Required",
            412: "Precondition Failed",
            413: "Request Entity Too Large",
            414: "Request-URI Too Long",
            415: "Unsupported Media Type",
            416: "Requested Range Not Satisfiable",
            417: "Expectation Failed",
            422: "Unprocessable Entity",
            423: "Locked",
            424: "Failed Dependency",
            425: "Unassigned",
            426: "Upgrade Required",
            427: "Unassigned",
            428: "Precondition Required",
            429: "Too Many Requests",
            430: "Unassigned",
            431: "Request Header Fields Too Large",
            500: "Internal Server Error",
            501: "Not Implemented",
            502: "Bad Gateway",
            503: "Service Unavailable",
            504: "Gateway Timeout",
            505: "HTTP Version Not Supported",
            506: "Variant Also Negotiates (Experimental)",
            507: "Insufficient Storage",
            508: "Loop Detected",
            509: "Unassigned",
            510: "Not Extended",
            511: "Network Authentication Required"
        };
    var oReq, bIsLoading = false, bUpdateURL = false;
    oLoadingBox.id = "loader";
    oCover.className = "progress red accent-1";
    oLoadingSpin.className = "indeterminate red darken-2";
    oCover.onclick = abortReq;
    oCover.appendChild(oLoadingSpin);
    oLoadingBox.appendChild(oCover);
    onpopstate = function (oEvent) {
        bUpdateURL = false;
        oPageInfo.title = oEvent.state.title;
        oPageInfo.url = oEvent.state.url;
        getPage();
    };
    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
    this.open = requestPage;
    this.stop = abortReq;
    this.rebuildLinks = init;
})();
 

Además tengo la sospecha de que no solo esos elementos se verán afectados. también inputs y cosas así.
Espero me puedan ayudar, muchas gracias de antemano y si necesitan algo más, por favor háganmelo saber.

[ocp001a]

Supongo que se debe a que cuando tu servidor responde estás "dibujando" el html, pero no ejecutas el javascript si es que el contenido lo requiere.

Hay varias formas de abordar el problema, aunque lo más simple es hacer un eval() al contenido retornado por el servidor, sólo deberías tener una forma de identificar cuándo estás devolviendo html y cuándo javascript.

[Silenn]

Exactamente cómo debo hacer eso, estuve leyendo sobre eval() y hasta donde leí su funcionamiento se basa en evaluar ahora sí, la situación con el string del que se le llama.

[ocp001a]

Yo hice una función a la que le retorno SIEMPRE un json, el json contiene un arreglo que sólo puede tener dos posibles respuestas, html o javascript.

Si la respuesta es javascript, se ejecuta, si es html, se dibuja en el contener indicado, ejemplo:

Código Javascript:

respuesta=[
   {"script":"codigo javascript"},
   {"encabezado":"html que va a ir en el encabezado"}
]
 

Así, cuando recibo la etiqueta "script" la ejecuto con eval, si recibo cualquier otra cosa, asumo que es el id de un ekemento al que le voy a insertar el html.

Dado que te sería difícil cambiar lo que tienes a esta metodología, te sugiero que en donde recibes la respuesta ajax, podrías poner una condición, que si la respuesta contiene cierta palabra, le haces el eval, si no, lo que siempre haces.