i18n XHR Backend

Load Resources Using XHR

This example demonstrates direct language switching on click or change event. Every time the link is clicked, i18next loads json file with selected language and initialize translation again, so new language appears without page reload.

Example Markup
                        
                            <div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right">
                                <a href="#" class="dropdown-item">
                                    <i class="flag-icon flag-icon-gb"></i> English
                                </a>
                                <a href="#" class="dropdown-item">
                                    <i class="flag-icon flag-icon-es"></i> Spanish
                                </a>
                                <a href="#" class="dropdown-item">
                                    <i class="flag-icon flag-icon-pt"></i> Portuguese
                                </a>
                                <a href="#" class="dropdown-item">
                                    <i class="flag-icon flag-icon-fr"></i> French
                                </a>
                            </div>
                        
                    
Js Code For Switching
                        
                            i18next
                                .use(window.i18nextXHRBackend)
                                .init({
                                    debug: true,
                                    fallbackLng: false,
                                    backend: {
                                        loadPath: "../../../app-assets/data/locales/{{lng}}/{{ns}}.json",
                                    },
                                    returnObjects: true
                                },
                                function (err, t) {
                                    // Initialize Localization
                                    jqueryI18next.init(i18next, $);
                                });