Problem with language.url

JochenK

Error messages shown:
DataTables warning: table id=datenliste - i18n file loading error. For more information about this error, please see https://datatables.net/tn/21

Description of problem:

the script within the page:

new DataTable('#datenliste', { language: { search: 'In der Liste finden', url: 'styles/de-de.lang' },

The file 'styles/de-de.lang' contains: ( from Internationalisation plug-in )
{
"emptyTable": "Keine Daten in der Tabelle vorhanden",
"info": "START bis END von TOTAL Einträgen",
..........
}

The chapter "21. i18n file loading error" doesn't give me a solution,
my browser Firefox (Version 133) and Edge (Version 131.0.2903) is CORS capable,
my IIS-7 has the entry "Access-Control-Allow-Origin *" under HTTP.
I get the same result if I rename the file to de-de .json

what can I do or what am I doing wrong?

kthorngren

Did you validate the JSON using JSON Lint as recommended in the technote?

Are you seeing the JSON response in the browser's network inspector?

What is the response status code?

Kevin

JochenK

Yes .. i have validate with JSON Lint ( JSON is valid! )

I don't see the JSON response in the browser's network inspector.

kthorngren

It doesn't look like it is sending a request for the URL. Possibly you need to prefix the URL with a /, for example:

url: '/styles/de-de.lang'

As a test do you see the request if you use the CDN URL? For example:

url: '//cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json'

Kevin

JochenK

when i use //cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json as test
in the Console you see

when i use styles/de-de.json :

when i use /styles/de-de.json:

when i use //styles/de-de.json:

kthorngren

when i use //cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json

You may need to add https: to the path so it fetches via the internet instead of a local resource:

https://cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json

Does it work now?

when i use styles/de-de.json

Is the path correct?

If the CDN works with https://.... and the local paths don't then you probably will need to look at your web server's config to determine the correct path.

Kevin

JochenK

url: 'https://cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json' works fine.

What do you mean with "... web server's config ..."?
Which setting should I make? All websites are found.
The phyical Path on IIS is set on "C:\inetpub\wwwroot\iNetForum"

The structure:

a test00.html is my page and is physical in
"C:\inetpub\wwwroot\iNetForum"

the styles file is in the
"C:\inetpub\wwwroot\iNetForum\HTML\ STYLES" directory,
i think this is alright.

kthorngren

Sorry I gave incorrect answers.

Kevin

JochenK

No problem ... but do you have an idea?
I don't know what to do anymore.

kthorngren

What files are in styles?

The filenames are likely case sensitive.

Kevin

kthorngren

I'm not familiar with IIS so not sure how to debug the server to learn why its not responding with the JSON file.

Kevin

JochenK

The files in directory are:

kthorngren

To see if its a permissions or IIS config issue move the JSON file to the same path as test00.html and remove styles from the language.url option.

Kevin

JochenK

I think it has nothing to do with the IIS server.
url: 'https://cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json' works.

Maybe it's because the language-option doesn't understand the URL-option with
url: 'styles/de-de.json' correctly?
What do you mean? Could this be?

kthorngren

My advice to further troubleshoot is to move the JSON file to a path you know works. The suggestion is that possibly there is a file permissions issue or that IIS is configured not to provide files from subdirectories.

EDIT:. I'm not saying it has to be permanent. Its just a test.

Kevin

JochenK

Now i tried : url: 'de-de.json' - and move the file in the same directory
as the page is. - the same error message in browser console

JochenK

... and the file is configured with full permissions for system, users, IIS-IUSRS ...

kthorngren

My next step would be to download the working CDN file (de-DE.json) and place it on the server. Either in the root or the styles directory. Does that work?

Kevin

kthorngren

Post your full JSON file so we can take a look.

Kevin

JochenK

Ok .. i have downloaded the CDN File de-DE.json and take it in the HTML-directory where the testpage is (C:\inetpub\wwwroot\inetforum\html): - it doesn't work
the console:

When i take the file in the server-root ( C:\inetpub\wwwroot) or in the page-root (C:\inetpub\wwwroot\inetforum) - it doesn't work and the console shows

to be noted :
The Browser-console shows
file:///C:/inetpub/wwwroot/iNetForum/HTML/de-De.json

although the file does not exist in the HTML directory

JochenK

{
    "emptyTable": "Keine Daten in der Tabelle vorhanden",
    "info": "_START_ bis _END_ von _TOTAL_ Einträgen",
    "infoEmpty": "Keine Daten vorhanden",
    "infoFiltered": "(gefiltert von _MAX_ Einträgen)",
    "infoThousands": ".",
    "loadingRecords": "Wird geladen ..",
    "processing": "Bitte warten ..",
    "paginate": {
        "first": "Erste",
        "next": "Nächste",
        "last": "Letzte",
        "previous": "Vorherige"
    },
    "aria": {
        "sortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
        "sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
    },
    "select": {
        "rows": {
            "_": "%d Zeilen ausgewählt",
            "1": "1 Zeile ausgewählt"
        },
        "cells": {
            "1": "1 Zelle ausgewählt",
            "_": "%d Zellen ausgewählt"
        },
        "columns": {
            "1": "1 Spalte ausgewählt",
            "_": "%d Spalten ausgewählt"
        }
    },
    "buttons": {
        "print": "Drucken",
        "copy": "Kopieren",
        "copyTitle": "In Zwischenablage kopieren",
        "copySuccess": {
            "_": "%d Zeilen kopiert",
            "1": "1 Zeile kopiert"
        },
        "collection": "Aktionen <span class=\"ui-button-icon-primary ui-icon ui-icon-triangle-1-s\"><\/span>",
        "colvis": "Spaltensichtbarkeit",
        "colvisRestore": "Sichtbarkeit wiederherstellen",
        "csv": "CSV",
        "excel": "Excel",
        "pageLength": {
            "-1": "Alle Zeilen anzeigen",
            "1": "Zeige 1 Zeile",
            "_": "Zeige %d Zeilen"
        },
        "pdf": "PDF",
        "createState": "Ansicht erstellen",
        "removeAllStates": "Alle Ansichten entfernen",
        "removeState": "Entfernen",
        "renameState": "Umbenennen",
        "savedStates": "Gespeicherte Ansicht",
        "stateRestore": "Ansicht %d",
        "updateState": "Aktualisieren",
        "copyKeys": "Taste <i>STRG&lt;\\\/i&gt; oder <i>⌘&lt;\\\/i&gt; + <i>C&lt;\\\/i&gt; drücken um die Tabelle<br \/>in den Zwischenspeicher zu kopieren.<br \/><br \/>Um den Vorgang abzubrechen, Nachricht anklicken oder Escape-Taste drücken.<\/i><\/i><\/i>"
    },
    "autoFill": {
        "cancel": "Abbrechen",
        "fill": "Alle Zellen mit <i>%d<i> füllen<\/i><\/i>",
        "fillHorizontal": "Alle horizontalen Zellen füllen",
        "fillVertical": "Alle vertikalen Zellen füllen",
        "info": "Automatische Vervollständigung"
    },
    "decimal": ",",
    "search": "Suche:",
    "searchBuilder": {
        "add": "Bedingung hinzufügen",
        "button": {
            "0": "Such-Baukasten",
            "_": "Such-Baukasten (%d)"
        },
        "condition": "Bedingung",
        "conditions": {
            "date": {
                "after": "Nach",
                "before": "Vor",
                "between": "Zwischen",
                "empty": "Leer",
                "not": "Nicht",
                "notBetween": "Nicht zwischen",
                "notEmpty": "Nicht leer",
                "equals": "Gleich"
            },
            "number": {
                "between": "Zwischen",
                "empty": "Leer",
                "equals": "Entspricht",
                "gt": "Größer als",
                "gte": "Größer als oder gleich",
                "lt": "Kleiner als",
                "lte": "Kleiner als oder gleich",
                "not": "Nicht",
                "notBetween": "Nicht zwischen",
                "notEmpty": "Nicht leer"
            },
            "string": {
                "contains": "Beinhaltet",
                "empty": "Leer",
                "endsWith": "Endet mit",
                "equals": "Entspricht",
                "not": "Nicht",
                "notEmpty": "Nicht leer",
                "startsWith": "Startet mit",
                "notContains": "enthält nicht",
                "notStartsWith": "startet nicht mit",
                "notEndsWith": "endet nicht mit"
            },
            "array": {
                "equals": "ist gleich",
                "empty": "ist leer",
                "contains": "enthält",
                "not": "ist ungleich",
                "notEmpty": "ist nicht leer",
                "without": "aber nicht"
            }
        },
        "data": "Daten",
        "deleteTitle": "Filterregel entfernen",
        "leftTitle": "Äußere Kriterien",
        "rightTitle": "Innere Kriterien",
        "title": {
            "0": "Such-Baukasten",
            "_": "Such-Baukasten (%d)"
        },
        "value": "Wert",
        "clearAll": "Alle entfernen",
        "logicAnd": "Und",
        "logicOr": "Oder"
    },
    "searchPanes": {
        "clearMessage": "Leeren",
        "collapse": {
            "0": "Suchmasken",
            "_": "Suchmasken (%d)"
        },
        "countFiltered": "{shown} ({total})",
        "emptyPanes": "Keine Suchmasken",
        "title": "Aktive Filter: %d",
        "showMessage": "zeige Alle",
        "collapseMessage": "Alle einklappen",
        "count": "{total}",
        "loadMessage": "Lade Suchmasken .."
    },
    "thousands": ".",
    "zeroRecords": "Keine passenden Einträge gefunden",
    "lengthMenu": "_MENU_ Zeilen anzeigen",
    "datetime": {
        "previous": "Vorher",
        "next": "Nachher",
        "hours": "Stunden",
        "minutes": "Minuten",
        "seconds": "Sekunden",
        "unknown": "Unbekannt",
        "weekdays": [
            "Sonntag",
            "Montag",
            "Dienstag",
            "Mittwoch",
            "Donnerstag",
            "Freitag",
            "Samstag"
        ],
        "months": [
            "Januar",
            "Februar",
            "März",
            "April",
            "Mai",
            "Juni",
            "Juli",
            "August",
            "September",
            "Oktober",
            "November",
            "Dezember"
        ]
    },
    "editor": {
        "close": "Schließen",
        "create": {
            "button": "Neu",
            "title": "Neuen Eintrag erstellen",
            "submit": "Erstellen"
        },
        "remove": {
            "confirm": {
                "_": "Sollen %d Zeilen gelöscht werden?",
                "1": "Soll diese Zeile gelöscht werden?"
            },
            "button": "Entfernen",
            "title": "Entfernen",
            "submit": "Entfernen"
        },
        "error": {
            "system": "Ein Systemfehler ist aufgetreten"
        },
        "multi": {
            "title": "Mehrere Werte",
            "restore": "Änderungen zurücksetzen",
            "noMulti": "Dieses Feld kann nur einzeln bearbeitet werden, nicht als Teil einer Mengen-Änderung.",
            "info": "Die ausgewählten Elemente enthalten mehrere Werte für dieses Feld. Um alle Elemente für dieses Feld zu bearbeiten und auf denselben Wert zu setzen, hier klicken oder tippen, andernfalls behalten diese ihre individuellen Werte bei."
        },
        "edit": {
            "button": "Bearbeiten",
            "title": "Eintrag bearbeiten",
            "submit": "Bearbeiten"
        }
    },
    "searchPlaceholder": "Suchen...",
    "stateRestore": {
        "creationModal": {
            "button": "Erstellen",
            "columns": {
                "search": "Spalten Suche",
                "visible": "Spalten Sichtbarkeit"
            },
            "name": "Name:",
            "order": "Sortieren",
            "paging": "Seiten",
            "scroller": "Scroll Position",
            "search": "Suche",
            "searchBuilder": "Such-Baukasten",
            "select": "Auswahl",
            "title": "Neue Ansicht erstellen",
            "toggleLabel": "Inkludiert:"
        },
        "duplicateError": "Eine Ansicht mit diesem Namen existiert bereits.",
        "emptyError": "Name darf nicht leer sein.",
        "emptyStates": "Keine gespeicherten Ansichten",
        "removeError": "Entfernen der Ansicht fehlgeschlagen.",
        "removeJoiner": " und ",
        "removeSubmit": "Entfernen",
        "removeTitle": "Ansicht entfernen",
        "renameButton": "Umbenennen",
        "renameLabel": "Neuer Name für %s:",
        "renameTitle": "Ansicht umbenennen",
        "removeConfirm": "Sicher dass %s entfernt werden soll?"
    }
}

JochenK

the script is

new DataTable('#datenliste', { layout: { topStart: { buttons: ['searchPanes'] } }, language: { search: 'In der Liste finden', url: 'de-De.json' }, });

kthorngren

although the file does not exist in the HTML directory

Sorry I don't know anything about IIS. But this suggests to me a configuration issue with the IIS server. Maybe do some research on Stack Overflow for you particular IIS version and setup. Possibly Allan will have some ideas for you.

Do you see an XHR request in the browser's network inspector? If yes what is the status code response?

Kevin

JochenK

No XHR request ...

I don't know of any way to configure the IIS server, eExcept the issue

I hope Alan has an idea

What is the diffrent between
url: '//cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json' and
url: 'de-De.json'

kthorngren

when i use //cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json as test
in the Console you see

When you added https: to the URL it worked. I wonder if your browser is not adding https:. Try `url: 'https://de-De.json'. You may need to adjust the URL for it to work. Check for the XHR request.

What is the diffrent between
url: '//cdn.datatables.net/plug-ins/2.1.8/i18n/de-DE.json'

This is fetching from the datatables.net website - assuming https: is prefixed.

and
url: 'de-De.json'

This is attempting to fetch from the local web server.

Kevin

JochenK

Ihave tried with https, the result a message from dataTables:
DataTables warning: table id=datenliste - i18n file loading error. For more information about this error, please see https://datatables.net/tn/21

and from the browser console:

from XHR:

I think it is a problem with CORS ( file-link in JS )

allan

Starting a URL with // means it is "protocol relative". Whatever the host page is using, the Ajax URL will therefore also use.

It sounds like you are loading your page directly from the file system, rather than going through a web-server (i.e. you are using file://). You can do that, but you cannot Ajax request other files from the hard drive. Doing so would be a massive security hole and browsers will disallow that. Which is what you are seeing.

https://de-de.json doesn't work, because there is no website at that address. It isn't looking up your hard drive, it is looking for a website of that address.

If you must load your file from the local file system, and you must Ajax load the language configuration, then you must use an https:// URL that resolves, such as the one Kevin gave you before.

If you cannot use an external resource, but you must use file:// to load the page, then you need to copy / paste the JSON for the language into your HTML file and use language to assign it to the DataTable.

Allan

JochenK

My guess was correct that it was a CORS problem and Allan is also right with his description.

The fact is that loading a local file with included local resources leads to CORS errors.

CORS requests can only use the HTTP or HTTPS URL scheme, but the URL specified by the request is of a different type. This often occurs when the URL specifies a local file with the file:/// scheme.

Especially Firefox and Edge are causing problems when CORS is not handled correctly. FF and Edge are considering requests to CDNs as "cross-domain" requests and won't load them unless it is explicitly stated in the HTTP header.

Developers who need to perform local testing should now set up a local server. Since all files are served from the same schema and domain (localhost), they all have the same origin and do not trigger cross-origin errors.
In my case : [ url: 'http://localhost/html/scripts/de-De.json']

For firefox you can use a special setting that prevents CORS:
about:config - „security.fileuri.strict_origin_policy“ set to „false“
No CORS error but in this case the console displays a XML error:

The safest solution: as Allan suggested
Instead of performing a cross-origin search for a resource, consider integrating it into the web app and use language Option. This completely avoids the cross-origin call (since it is now a local resource) and makes all CORS issues disappear.

Thank you for your support and I wish you a happy new year.