How can I force a page language from servlet or jsp so angularjs will pick it up? -
angularjs form validation messages required display in french on given web page. displaying correctly in french language browsers not in english-language browser.
i not want detect locale in latter case, incorrect needs. instead want tell javascript page/browser french. nor want switch language dynamically client-side in javascript.
i tried modifying http headers way:
<%@ page import="java.util.locale" %> <% locale locale = new locale("fr","ca"); response.setlocale(locale); response.setheader("content-language", "fr"); response.setheader("language", "fr"); %> but not seem work.
thanks in advance help.
i solved replacing angularjs own js code. approach same, cycle through html input tags in javascript, search custom attribute. if it's there, change language based on html tag's lang attribute. hope helpful someone.
web page:
<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>lgs test java login</title> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.css" rel="stylesheet"> <style> .panel-info { border-color: #5f4793; } .panel-info > .panel-heading { color: #ffffff; background-color: #5f4793; border-color: #5f47931; } .btn-primary { color: #fff; background-color: #5f4793; border-color: #5f4793; } .btn-primary:hover { color: #fff; background-color: #4c0080; border-color: #4c0080; } .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: #4c0080; border-color: #4c0080; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #4c0080; border-color: #4c0080; } .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus { color: #fff; background-color: #4c0080; border-color: #4c0080; } </style> </head> <body> <div class="container"> <h1 style="text-align:center; color:#5f4793;">test</h1> <div class="row"> <div class="col-lg-4"> </div> <div class="col-lg-4"> <div class="panel panel-info"> <div id="panel-heading" class="panel- heading">connectez-vous !</div> <div id="messages"></div> <div class="panel-body" > <form name="loginform" id="loginform" method="post" action="loginservlet"> <div class="form-group"> <div class="input-group" id="div1"> <input type="email" bert="required email" class="form-control" id="mylogin" name="ulogin" placeholder="votre courriel" style="position: relative; top: 1px;" data-toggle="tooltip" data-placement="left" title=""> <label for="ulogin" class="input-group-addon glyphicon glyphicon-user" style="position: relative; top: 1px;"> </label> </div> </div> <div class="form-group"> <div class="input-group" id="div2"> <input type="password" bert="required" class="form-control" id="mypassword" name="upassword" style="position: relative; top: 1px;" placeholder="votre mot de passe" data-toggle="tooltip" data-placement="bottom" title=""> <label for="upassword" class="input-group-addon glyphicon glyphicon-lock" style="position: relative; top: 1px;"></label> </div> </div> <div> <input id="mybtn" class="btn btn-primary pull-right" type="button" value="connectez"></a> </div> </form> </div> </div> </div> <div class="col-lg-4"> </div> </div> <!-- row --> </div> <!-- container -->. <script src="js/bertrand.js"></script> </body> </html> and bertrand.js file:
/* small footprint javascript library inspired angularjs allows better control of bootstrap tooltip message wording. depends on: bootstrap.js, required placed @ bottom of html, has dom loading. contrary angularjs, not rely on browser language determine validation message language, uses html tag's lang attribute value. */ settimeout(function(){ document.getelementbyid("mybtn").addeventlistener("click",validateform); }, 500); /* begin block page language html tag; works around angularjs bug described at: http://stackoverflow.com/questions/38460174/how-can-i-force-a-page-language-from-servlet-or-jsp-so-angularjs-will-pick-it-up */ var mylanguage = "fr"; var myhtmlelement = document.getelementsbytagname("html"); (var = 0; < myhtmlelement.length; i++) /* should have 1 of course */ { var attrib = myhtmlelement[i].attributes; (var x = 0; x < attrib.length; x++) { if (attrib[x].name === 'lang') { mylanguage = attrib[x].value; } } } /* end block */ settimeout(adaptplaceholder(mylanguage), 500); var whitespace = " \t\n\r"; function isempty(s) { return ((s == null) || (s.length == 0)); } // returns true if string s empty or whitespace characters only. function iswhitespace(s) { var i; // s empty? if (isempty(s)) return true; (i = 0; < s.length; i++) { var c = s.charat(i); if (whitespace.indexof(c) == -1) return false; } return true; } function isemail(s) { if (iswhitespace(s)) return false; var = 1; var slength = s.length; while ((i < slength) && (s.charat(i) != "@")) { i++; } if ((i >= slength) || (s.charat(i) != "@")) return false; else += 2; while ((i < slength) && (s.charat(i) != ".")) { i++; } if ((i >= slength - 1) || (s.charat(i) != ".")) return false; else return true; } function validateform() { var elements = document.getelementsbytagname("input"); var shipthis = true; (var = 0; < elements.length; i++) { var attrib = elements[i].attributes; (var x = 0; x < attrib.length; x++) { /* find tags custom attribute "bert" in them */ if (attrib[x].name === 'bert') { $(elements[i]).closest('div').removeclass("input-group").removeclass("has-error").addclass("input-group has-success"); if(attrib[x].value.indexof('email') > -1) { if(!isemail(elements[i].value)) { $(elements[i]).closest('div').removeclass("input-group").removeclass("has-success").addclass("input-group has-error"); (var z = 0; z < attrib.length; z++) { // add supported translations here, or default french: if (attrib[z].name === 'title') { if(mylanguage == "en") { attrib[z].value = "please enter valid email address here"; } else { attrib[z].value = "svp modifier pour une adresse de courriel valide"; } } } $(elements[i]).tooltip('show'); shipthis = false; } } if( attrib[x].value.indexof('required') > -1 ) { if(isempty(elements[i].value)) { $(elements[i]).closest('div').removeclass("input-group").removeclass("has-success").addclass("input-group has-error"); (var y = 0; y < attrib.length; y++) { if (attrib[y].name === 'title') { // add supported translations here, or default french: if(mylanguage == 'en') { attrib[y].value = "please add value here"; } else { attrib[y].value = "svp ajouter une valeur ici"; } } } $(elements[i]).tooltip('show'); shipthis = false; } } } } /* end attributes in elements */ } /* end elements input tag */ if(shipthis) { var myform = document.getelementsbytagname("form"); myform[0].submit(); } } function adaptplaceholder(mylanguage) { if(mylanguage == "en") { var el = document.getelementsbytagname('input'); (var = 0; < el.length; i++) { var attrib = el[i].attributes; (var x = 0; x < attrib.length; x++) { if(el[i].type == "email") { if (attrib[x].name == "placeholder") { attrib[x].value = "your email address"; } } else if(el[i].type == "password") { if (attrib[x].name == "placeholder") { attrib[x].value = "your password"; } } else if(el[i].type == "button") { if (attrib[x].name == "value") { attrib[x].value = "connect"; } } } } document.getelementbyid("panel-heading").innerhtml = 'connect !'; } }
Comments
Post a Comment