Reloading JavaScript

[gmrchk]

Reloading JavaScript is by far the most common issue people encounter when using swup. Unfortunately, that's just the nature of how swup and other similar libraries work, and there is no silver bullet for all the use cases. 😞

At the same time, there is simply no way for us to help out everyone, so we'd like to let the community help each other. If you're hitting these problems, this is the right place to post about them!

To get started, please check out our documentation on this topic with general information on how to structure code when using swup. Scripts plugin and Head plugin might also turn out helpful, but keep in mind that it's more of a "last resort solution".

Here is also a list of related issues, where some more helpful information could be found.
#31
#83
#98
#117
#132
#150
#166
#244
#245
#250
#274
#279
#288
#290
#292
#296
#326

[dangelion]

Hi @gmrchk
thanks for this library! I'm starting using it in these days and it's awesome.
I was asking if the following code structure is correct?

const initApp = () => {
  // Init all (carousels, accordions, components, ...)
}

// Ready
if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
  initApp();
} else {
  document.addEventListener('DOMContentLoaded', initApp);
}

// Swup
const swup = new Swup({
  plugins: [new SwupBodyClassPlugin()]
});

// This event runs for every page view after initial load
swup.on('contentReplaced', function () {
  window.scrollTo(0, 0);
  initApp();
});

I'm not sure if swup needs to be initialized into the ready or not.

Also, I need to destroy components before leaving any pages?

Any advices are welcome! Thanks

[jidp97]

Hi, I'm having problems making it work in Blazor, does Swup support being used in a Blazor App?

[daun]

I suppose not. Swup is made with traditional server-side-rendered sites in mind, while Blazor looks like more of an interactive app framework without the usual server-client response cycle.

[Tiba22]

I have this problem with my JS function.

This is a timed function (https://pastebin.com/3Mpufyyn).

First loading, everything ok.

If, on the other hand, I change the page and return, despite having used swup: contentReplaced, the first function is still active and continues to go on, and in the meantime a new one begins. Do you have any solution about it? Thank you

[AngusDV]

i solved by the way in master page :

<script>
    $(function () {

        "use strict";

        // Valid links for swup navigation
        const linkInclude = [
            `a[href^="${window.location.origin}"]`,
            `a[href^="/"]`,
            `a[href^="#"]`
        ]
// Links to skip for swup navigation
        const linkExclude = [
            '[download]',
            '[target="_blank"]',
            '[data-no-swup]',
            `[href$=".pdf"]`
        ]

        const exclude = linkExclude.map(selector => `:not(${selector})`).join('')
        const linkSelector = linkInclude.map(include => `${include}${exclude}`).join(',')
        // swup js
        const options = {
            containers: ["#swup"],
            animateHistoryBrowsing: true
        };
        const swup = new Swup({linkSelector, options});
        swup.hooks.on('content:replace', () => {init();});

        init();
        function init() {
            $.loadScript = function (url, callback) {
                $.ajax({
                    url: url,
                    dataType: 'script',
                    success: callback,
                    async: true
                });
            }
            //public js you want reload after each reload 
            $.loadScript('/assets/js/custom.js');
            if (document.querySelector('#page')) {
                $.loadScript('/js/page.js');
            }
        }
    });
</script>

page.js contents, if you want reload any js for specific page just put it in block :

if (document.querySelector('#page').value == 'panel.page') {
   // load any js wants to load in page
    $.loadScript('/assets/js/widgets.bundle.js');
    $.loadScript('/assets/js/custom/widgets.js');
    $.loadScript('/assets/js/custom/apps/chat/chat.js');
    $.loadScript('/assets/js/custom/utilities/modals/create-app.js');
    $.loadScript('/assets/js/custom/utilities/modals/create-campaign.js');
    $.loadScript('/assets/js/custom/utilities/modals/users-search.js');
}

and in panel page i put this :

<input type="hidden" id="page" value="panel.page">

you can create js for each page

@Tiba22