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.

                        
                            <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>
                        
                    

                        
                            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, $);
                                });