Load a file with an umlaut in its name via jquery

Question

I need to get the content of a file which has an umlaut in its filename via a jquery load request. I know it's not recommendet at all to use umlauts in filenames.

The strange thing is that I use the exact same code with the same version of jquery on a different project and it works there just fine.

<a class="nav-link d-inline pl-1 pr-3" href="#" data-path="Ränge">

<script>
$(document).ready(function(){
            $(document).on('click','.nav-link, .internalLink', function(event){
                event.preventDefault();
                console.log('prevented default');
            });


            function loadContent(path, forward) {
                console.log(path);
                path = path.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) {
                        return letter.toUpperCase();
                    });
                console.log("tried to load: " + path);
                $('#content').hide('drop', function(){
                    $('#content').load('content/' + path + '.html', function(response, status, xhr){
                        if(status == 'error'){
                            if(xhr.status == '404'){
                                $('#content').load('content/404.html');
                            }
                            else {
                                $('#content').html('Es ist ein Fehler aufgetreten: ' + xhr.status + ' ' + xhr.statusText);
                            }
                        }
                        if(path == 'Startseite' || forward == false){
                            window.history.replaceState('MyWebsite | ' + path, path, '/' + path);
                        }
                        else {
                            window.history.pushState('MyWebsite | ' + path, path, '/' + path);
                        }
                        document.title = 'MyWebsite | ' + decodeURI(path);
                        $('#content').show('drop');                    
                    });
                });
            }

            var path = window.location.pathname == '/' ? 'Startseite' : window.location.pathname;
            path = path.replace('/', '');
            loadContent(path, true);

            window.onpopstate = function() {
                path = window.location.pathname;
                path = path.replace('/', '');
                loadContent(path, false);
            };

            $(document).on('click', '.nav-link, .internalLink', function(){
                path = $(this).attr('data-path');
                if(path == 'MusicBot'){
                    window.open('https://MyMusicBotWebsite.de');
                }
                else {
                    if(decodeURI(window.location.pathname.replace('/', '')) != path){
                        loadContent(path, true);
                    } 
                }
            });
        }); 
</script>

The consol output shows that path should be "Ränge" but I get an 404 error because the ajax request tries to load https://MyWebsite.de/content/R%C3%A4nge.html and it should load https://MyWebsite.de/content/Ränge.html

Thanks in advance

Answer 1

It's a Plesk related problem...

Silly me, I used the zip upload function from the Plesk webinterface and the file is shown like Ränge.html

So today I looked at the http logs of both websites which use the same load script. Plesk said that it couldn't find the Ränge.html because the file does not exist but on the other website it could. I opened up Filezilla and looked at the files via FTP and saw this: Rдnge.html

So Pleks shows the correct filename in its webinterface/filemanager but the file on the disk has not the correct name.

So the solution to this problem is to upload files via FTP and not via the Plesk webinterface.