Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

$.t is not a function with slow networks #45

Open
Digit-89 opened this issue Feb 13, 2024 · 7 comments
Open

$.t is not a function with slow networks #45

Digit-89 opened this issue Feb 13, 2024 · 7 comments

Comments

@Digit-89
Copy link

Digit-89 commented Feb 13, 2024 •
edited
Loading

🐛 Bug Report

I am getting $.t is not a function on page load only for slow network users. I could reproduce it using Google Chrome developer console, enabling the network throttle (preset Fast 3G) from the Network tab.

To Reproduce

Here is the footer of my HTML web page:

<head>
<!-- Header Scripts -->
<script type="text/javascript" src="/js/i18next.min.js"></script>
<script type="text/javascript" src="/js/jquery-i18next.min.js"></script>
<script type="text/javascript" src="/js/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="/js/i18nextHttpBackend.min.js"></script>
<script type="text/javascript" src="/js/ccc.js"></script>
<script>
    $(function () {
        //init i18n
        CCC.Header_TranslateBody();
    });
</script>
<!-- /CCC Header Scripts -->
</head>

<body>
<script>
$(function () {
  var alertTxt = $.t('NOTIFICATION_CENTER.LOADING_NOTIFICATIONS'); // The error happens here
});
</script>
</body>

And the content of the header ccc.js:

let CCC = window.CCC || {};
(function() {  

    const portalLng = "de-de";

    this.Header_TranslateBody = function () {
      i18next
        .use(i18nextBrowserLanguageDetector)
        .use(i18nextHttpBackend)
        .init({
          debug: true, //To comment
          fallbackLng: 'en',
          lowerCaseLng: true,
          backend: {
            loadPath: '/locales/' + portalLng +'.json'
          }
        }, function (err, t) {
          if (err) return console.error(err);
          jqueryI18next.init(i18next, $, { useOptionsAttr: true });
          i18next.changeLanguage(portalLng, () => {
            i18n_updateContent();
          });
          i18n_updateContent();
        });
    }

    this.i18n_updateContent = function () {
        $('body').localize();
    }
}).call(CCC);

Expected behavior

It looks like with slow loading times the framework loads too late. I don't know how to fix it.

Your Environment

  • runtime version: Chrome 121.0.6167.161 64 bits
  • i18next version: 23.8.2
  • os: Windows
@jamuhl
Copy link
Member

jamuhl commented Feb 13, 2024

you access $.t too early...before calling jqueryI18next.init

@Digit-89
Copy link
Author

Digit-89 commented Feb 13, 2024 •
edited
Loading

you access $.t too early...before calling jqueryI18next.init

But why does it work 100% of the time if I don't throttle the network?
EDIT: I inverted the script order in my original post, my bad, I updated it to the actual version.

failing example
working example

@adrai
Copy link
Member

adrai commented Feb 13, 2024

This:

$(function () {
  var alertTxt = $.t('NOTIFICATION_CENTER.LOADING_NOTIFICATIONS'); // The error happens here
});

should only be called, after this:

jqueryI18next.init(i18next, $, { useOptionsAttr: true });

@Digit-89
Copy link
Author

Digit-89 commented Feb 14, 2024 •
edited
Loading

I added consol.logs to the code and am now calling the CCC.Header_TranslateBody synchronously from the . See the result in the console. Error happening on slow networks only.

let CCC = window.CCC || {};
(function() {  

    const portalLng = "de-de";

    this.Header_TranslateBody = function () {
      i18next
        .use(i18nextBrowserLanguageDetector)
        .use(i18nextHttpBackend)
        .init({
          debug: true, //To comment
          fallbackLng: 'en',
          lowerCaseLng: true,
          backend: {
            loadPath: '/locales/' + portalLng +'.json'
          }
        }, function (err, t) {
          if (err) return console.error(err);
         console.log('i18next initialized');//To comment
          jqueryI18next.init(i18next, $, { useOptionsAttr: true });
         console.log('jqueryI18next initialized');//To comment
          i18next.changeLanguage(portalLng, () => {
            i18n_updateContent();
          });
          i18n_updateContent();
        });
    }

    this.i18n_updateContent = function () {
        $('body').localize();
    }
}).call(CCC);

github1

@adrai
Copy link
Member

adrai commented Feb 14, 2024

Please create a minimal reproducible example... not just code snippets

@adrai
Copy link
Member

adrai commented Feb 14, 2024

btw: it may also be jquery is not loaded when calling jqueryI18next.init()... and $ is undefined?
fyi: here the $.t function is set to jquery

@Digit-89
Copy link
Author

I just checked, jquery is correctly loaded beforehand.
I will try to make a working sandbox to reproduce the error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jamuhl @adrai @Digit-89