Globalize.js E_DEFAULT_LOCALE_NOT_DEFINED error

Question

I'm developping an ASP MVC application that use Globalize.js. In the _Layout.cshtml I added this code

<script>
(function () {
$(function () {
    $.when(
              $.getJSON("@Url.Content("~/Scripts/cldr/supplemental/likelySubtags.json")"),
              $.getJSON("@Url.Content("~/Scripts/cldr/main/fr/numbers.json")"),
              $.getJSON("@Url.Content("~/Scripts/cldr/supplemental/numberingSystems.json")"),
              $.getJSON("@Url.Content("~/Scripts/cldr/main/fr/ca-gregorian.json")"),
              $.getJSON("@Url.Content("~/Scripts/cldr/main/fr/timeZoneNames.json")"),
              $.getJSON("@Url.Content("~/Scripts/cldr/supplemental/timeData.json")"),
              $.getJSON("@Url.Content("~/Scripts/cldr/supplemental/weekData.json")")
            ).then(function () {
                // Normalize $.get results, we only need the JSON, not the request statuses.
                return [].slice.apply(arguments, [0]).map(function (result) {
                    return result[0];
                });
            }).then(Globalize.load).then(function () {
                Globalize.locale("fr");
            });
});
})();
</script>

It's working. But when I tried to use it in other page in $(document).ready or $(window).load I Have the error JavaScript: E_DEFAULT_LOCALE_NOT_DEFINED: Default locale has not been defined.

It seems Like that The Globalize is not yet loaded.

Answer 1

I know that this is a very old story, but I stumbled upon it and the answer is pretty simple - instead of doing what you want to do on the $(document).ready event, you have to wait for the globalize to finish loading the resources and then do your stuff.

The simple way of doing this is to trigger your own event after you loaded globalize like this:

function loadcldr() {
    var currentCultureCode = $("#hfTwoCharsCultureCode").val();
    var publicCdnGlobalizeCompleteUrl = "/Resources/cldr/";

    $.when(
        $.get(publicCdnGlobalizeCompleteUrl + "main/" + currentCultureCode + "/ca-gregorian.json"),
        $.get(publicCdnGlobalizeCompleteUrl + "main/" + currentCultureCode + "/numbers.json"),
        $.get(publicCdnGlobalizeCompleteUrl + "main/" + currentCultureCode + "/currencies.json"),
        $.get(publicCdnGlobalizeCompleteUrl + "supplemental/likelySubtags.json"),
        $.get(publicCdnGlobalizeCompleteUrl + "supplemental/timeData.json"),
        $.get(publicCdnGlobalizeCompleteUrl + "supplemental/weekData.json")
    ).then(function () {

        // Normalize $.get results, we only need the JSON, not the request statuses.
        return [].slice.apply(arguments, [0]).map(function (result) {
            return result[0];
        });

    }).then(Globalize.load).then(function () {
        Globalize.locale(currentCultureCode);
        customNumberParser = Globalize.numberParser();

        $(document).trigger("globalizeHasBeenLoadedEvent");
    });
}

The line that is of interest for you is $(document).trigger("globalizeHasBeenLoadedEvent"); because this triggers the custom event.

And then you can wait for that event to happen and then do your stuff:

$(document).on("globalizeHasBeenLoadedEvent",
    function () {
        alert("I'm done loading globalize...");
    });

Hope it helps someone in the future... (not once I had an issue and I've searched on SO and found my own answers) :-))