The Magic, XSLT into the DOM with JavaScript
Prev  Chapter 43. Client Side Transformations with JavaScript  Next

The Magic, XSLT into the DOM with JavaScript

In order to do XSLT in the browser, it is of course necessary to have the XML file and the XSL file present and in addition, the methods to invoke the transformation by JS. Getting the files is not surprisingly done by AJaX, and the transformation by built in JS method. Just watch how little is really necessary:

Example 43.5. The AJaX Module, javascripts/modules/Ajax.js 
'use strict';
/*
 * @author NML
 * @Date Apr 2020
 */
import {$} from './nQuery.js';
/*
 * method: AJaX:  getFileAjax
 * @param filename: url of wanted file
 * @param callback: function to handle response
 */
const getFileAjax = function (url) {
    let promObj = new Promise(function (resolve, reject) {
        const ajax = new XMLHttpRequest();
        ajax.open('GET', url);
        ajax.send();
        ajax.addEventListener('load', function (ev) {
            if (! ev) {
                reject(ajax.status);
            }
            var resp = ajax.responseXML;
            resolve(resp);
        });
    });
    return promObj;
}

const getAndXSLT = async function (xmlfile, xslfile, where, param) {
    let xml = await getFileAjax(xmlfile);
    let xsl = await getFileAjax(xslfile);

    let xsltProcessor = new XSLTProcessor(); // real browsers
    xsltProcessor.importStylesheet(xsl);
    xsltProcessor.setParameter(null, "param1", param);  // meant for xsl
    let resultDocument = await xsltProcessor.transformToFragment(xml, document);
    $(where).innerHTML = "";
    $(where).appendChild(resultDocument);
};

export {getFileAjax, getAndXSLT};

Example 43.6. The Application, javascripts/site.js 
'use strict';

import {$} from './modules/nQuery.js';
import {getFileAjax} from './modules/Ajax.js';
import {getAndXSLT} from './modules/Ajax.js';

const getContent = async function(ev) {
    await getAndXSLT("http://localhost:3000/xml/lecturenotesM.xml",
                     "http://localhost:3000/xml/content.xsl",
                     "content",
                     ev.target.innerText);
};
const getHeaders = async function (ev) {
    await getAndXSLT("http://localhost:3000/xml/lecturenotesM.xml",
                     "http://localhost:3000/xml/headers.xsl",
                     "content",
                     ev.target.innerText);
    let btns = document.getElementsByClassName("butthead");
    for (let butt of btns) {
        butt.addEventListener("click", getContent);
    }
};
const getSubjects = async function () {
    await getAndXSLT("http://localhost:3000/xml/lecturenotesM.xml",
                     "http://localhost:3000/xml/subjects.xsl",
                     "navmenu",
                     "");
    let btns = document.getElementsByClassName("buttsub");
    for (let butt of btns) {
        butt.addEventListener("click", getHeaders);
    }
};

const init = function () {
    if ($('navmenu') && $('content')) {   // on the right page
        getSubjects();
    }
};

window.addEventListener('load', init);

Prev  Up  Next
The Frontend Application Skeleton  Home  The XML