Change language using JavaScript in SharePoint and Asp.Net

This SharePoint tutorial, we will discuss how to change the language using JavaScript in SharePoint or in Asp.Net applications.

As we know most of the time we are face challenges to configure the multi-language settings in our application. So here I am going to briefly explain about changing the language using JavaScript Code which you can use in SharePoint as well as in asp.net applications.

You can also download the complete Visual studio code solution.

Change language using javascript in sharepoint

Step 1: Before going to start, we have to add the below JavaScript references in our application.

You can also use the entire code inside a script editor or content editor web part in SharePoint Online or SharePoint On-premises versions also.

<script src="JavaScript/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript/language.js"></script>
<script type="text/javascript" src="JavaScript/js.cookie.min.js"></script>

Language.JS: This file I have mainly used to keep both language text. And I have used keys instead of text on the page. Below is the Example of a small page that I have created.

Change language using JavaScript in SharePoint

And below is the structure of my application, here I have used visual studio code.

Change language using JavaScript in SharePoint 2013

Step 2: At the top of the page, I have added a button where you can switch the language in a button click.

Change language using JavaScript in SharePoint Online

Step 3: I have used CSS to change the position of text from left to right and right to left based on the language which you have selected. Add the below CSS in your application.

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/all.css" rel="stylesheet"crossorigin="anonymous" />
    <link href="css/all.css" rel="stylesheet" />
    <link title="english" rel="stylesheet" href="css/theme.css"/> 

Step 4: In this step, I have applied the CSS using JavaScript based on the language selected.

 <script type="text/javascript">

        function ChangeLanguage(language) {

            Cookies.set('att-lng', language);
            SetContentLanguage(language);

            if (language == "en") {

                $('#ln-seletor').text("عربى");

                $("body").attr('dir', 'ltr');
                $("body").attr('lang', 'en');

                $("head link[title='english']").each(function (index, item) {

                    if ($(item).attr("href").indexOf('theme-ar.css') > 0) {
                        $(item).attr("href", "css/theme.css");
                    }                   

                });
            }
            else {

                $('#ln-seletor').text("English");

                $("body").attr('dir', 'rtl');
                $("body").attr('lang', 'ar');

                $("head link[title='english']").each(function (index, item) {
                    if ($(item).attr("href").indexOf('theme.css') > 0) {

                        $(item).attr("href", "css/theme-ar.css");
                    }                   

                });
            }
        }

        function SetContentLanguage(language) {
            $('.language').each(function (index, element) {
                if ($(this).attr('key') == 'requested-justification') {                    
                    $(this).text((arrLang[language][$(this).attr('key')]).replace("()","("+ $(this).attr('data-attr')+")"))
                }
                else {
                    $(this).text(arrLang[language][$(this).attr('key')])
                }
            });

        }

        $(function () {
            var lang = "en";
            var language = Cookies.get('att-lng');
            if (language != undefined && language != null && language != '')
                lang = language;

            ChangeLanguage(lang);

            //onclick
            $('#ln-seletor').on("click", function () {
                if ($(this).text() == "English")
                    ChangeLanguage("en");
                else
                    ChangeLanguage("ar");

            });
         });   
        
    </script>

step 5: Below is the full source code where you can debug this application very easily.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SwitchLanguage.aspx.cs" Inherits="SwitchLanguage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Enjoy SharePoint - Language Switching IN ASP.NET /SharePoint</title>  
     <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/all.css" rel="stylesheet" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <link href="css/all.css" rel="stylesheet" />
    <link title="english" rel="stylesheet" href="css/theme.css"/> 
    <style type="text/css">
        .ScrollStyle {
            max-height: 600px;
            overflow-y: scroll;
        }

    </style>
</head>
    <script src="JavaScript/jquery.min.js"></script>
    <script src="JavaScript/popper.min.js"></script>
    <script src="JavaScript/bootstrap.min.js"></script>
    <script type="text/javascript"  src="JavaScript/theme.js"></script>
   <script type="text/javascript" src="JavaScript/language.js"></script>
   <script type="text/javascript" src="JavaScript/js.cookie.min.js"></script>
     <script type="text/javascript">

        function ChangeLanguage(language) {

            Cookies.set('att-lng', language);
            SetContentLanguage(language);

            if (language == "en") {

                $('#ln-seletor').text("عربى");

                $("body").attr('dir', 'ltr');
                $("body").attr('lang', 'en');

                $("head link[title='english']").each(function (index, item) {

                    if ($(item).attr("href").indexOf('theme-ar.css') > 0) {
                        $(item).attr("href", "css/theme.css");
                    }                   

                });
            }
            else {

                $('#ln-seletor').text("English");

                $("body").attr('dir', 'rtl');
                $("body").attr('lang', 'ar');

                $("head link[title='english']").each(function (index, item) {
                    if ($(item).attr("href").indexOf('theme.css') > 0) {

                        $(item).attr("href", "css/theme-ar.css");
                    }                   

                });
            }
        }

        function SetContentLanguage(language) {
            $('.language').each(function (index, element) {
                if ($(this).attr('key') == 'requested-justification') {                    
                    $(this).text((arrLang[language][$(this).attr('key')]).replace("()","("+ $(this).attr('data-attr')+")"))
                }
                else {
                    $(this).text(arrLang[language][$(this).attr('key')])
                }
            });

        }

        $(function () {
            var lang = "en";
            var language = Cookies.get('att-lng');
            if (language != undefined && language != null && language != '')
                lang = language;

            ChangeLanguage(lang);

            //onclick
            $('#ln-seletor').on("click", function () {
                if ($(this).text() == "English")
                    ChangeLanguage("en");
                else
                    ChangeLanguage("ar");

            });
         });   
        
    </script>
    <script type="text/javascript">
        $(function () {
         $("#flip-ch1").hide();
        $("#confirm").click(function () {
            if ($(this).is(":checked")) {
                $("#flip-ch1").show();
            } else {
                $("#flip-ch1").hide();
            }
        });
    });
</script>
    
<body>
        <div class="container-fluid mt-4">
 <div class="offset-sm-2 col-sm-8 float-left help-frm ">
 <div class="col-sm-12 float-left txt-alg-c">
     <img class="float-left alg-rt " width="150" src="images/enjoysharepoint_logo.jpg"/>
         <button type="button" id="ln-seletor" class="lang-sel lang-btn float-right alg-lt">English</button>
       </div>
    <div class="col-sm-12 float-left"><h1 class="pl-3 pr-3 pt-2 pb-2 mb-5 txt-alg-c language" key="page-header"></h1>
    </div>  
     </div>

    <div class="offset-sm-2 col-sm-8 float-left help-frm">  
 <form runat="server">
      
     <div class="ScrollStyle txt-alg-rt language" key="page-content" >      

     </div>
     <hr />
     <div class="container pb-3 float-left">
         <div class="float-left alg-rt">
           <input class="float-left alg-rt mt-3 " type="checkbox" id="confirm"/>
           <span class="p-2 float-left alg-rt">I Agree with the Policy</span>
         </div>
         <button class="float-right btn btn-success alg-lt" id="flip-ch1" onclick="location.href='home.aspx'" type="button">Register a complaint</button>
     </div>
    </form>
   </div>   </div>
</body>
</html>

Step 6: Once you debug the application, you can see the default language is English.

Switch language using JavaScript sharepoint

Step 7 : Now click on button to switch the language.

change language using javascript in sharepoint

Note: You can set the language for the button, checkbox, Radio button, and Div, etc.

Please follow the above steps to build this application in your system and download the attached source code from this link.

You may like following SharePoint tutorials:

Here, we learned how to change language in SharePoint using JavaScript.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

>