0

Hello I want to make a SPA and I'm writing navigation. I have a problem with that because what I want to make is that when you click on item of navigation the html and scripttag is changing due to this subpage (it's made using AJAX). It's working fine when I click on item of navigation for the first time but when I want to back to this item the script didn't run (even if the script tag with properly path to JS script is added).

main.js

import { LoadSite } from './classes/LoadSite.js';
    nav.addEventListener(
            'click',
            function (e) {
                if (e.target.getAttribute('active')) {
                    return false;
                } else {
                    
                        if(e.target.classList.contains('options') || e.target.classList.contains('icon-cog')){
                            const loadSiteOptions = new LoadSite(
                                options,
                                'js/options.js',
                                'pages/options.html',
                                containerMain,
                                'options-wrapper'
                            );
                            loadSiteOptions.loadSite();
                        }
                        
                        else if (e.target.classList.contains('timetable') || e.target.classList.contains('icon-table')){
                            const loadSiteTimetable = new LoadSite(
                                timetable,
                                'js/timetable.js',
                                'pages/timetable.html',
                                containerMain,
                                'timetable-site-wrapper'
                            );
                            loadSiteTimetable.loadSite();
                        }
    
                    
                }
            },
            false
        );

LoadSite.js:

class LoadSite {
    constructor(element, scriptURL, page, parent, pageWrapperClass) {
        this.scriptURL = document.createElement('script');
        this.scriptURL.src = scriptURL;
        this.scriptURL.type = 'module';
        this.page = page;
        this.parent = parent;
        this.pageWrapperClass = pageWrapperClass;
        this.element = element;
    }
    loadSite(callback) {
        const body = document.querySelector('body'),
            oldScript = document.querySelector('script'),
            newPageWrapper = document.createElement('div'),
            parent = this.parent,
            scriptURL = this.scriptURL,
            element = this.element;
        newPageWrapper.classList.add(this.pageWrapperClass);
        const xhr = new XMLHttpRequest();
        xhr.open('GET', this.page);
        xhr.onload = function () {
            console.log(parent);
            newPageWrapper.innerHTML = this.responseText;
            element.removeEventListener('click', callback, false);
            parent.removeChild(parent.lastChild);
            parent.appendChild(newPageWrapper);
            body.removeChild(oldScript);
            body.appendChild(scriptURL);
        };
        xhr.send();
    }
}
export { LoadSite };

The callback parameter in LoadSite.js is optional and I'm using this in the another script.

  • possible dup. https://stackoverflow.com/questions/9642205/how-to-force-a-script-reload-and-re-execute – Garr Godfrey Jun 17 '21 at 21:20
  • But I added a script tag and my problem is that it isn't running –  Jun 18 '21 at 07:19
  • the only difference I see is you are setting the `type` to `module`. You could try appending a random number, like `+ '?r=' + Date.getTime()` – Garr Godfrey Jun 18 '21 at 17:51

0 Answers0