I'm looking everywhere to find out how to translate dynamic content loaded with js ajax (or innerHTML).
I expect that h2 paragraph is translated but not happens.
Am I mistaken?
Thanks.
I write here because I can't find any doc.
Link to JSFiddle
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>language test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate-loader-url/2.0.0/angular-translate-loader-url.js"></script>
<script>
angular.module('languageTest', ['pascalprecht.translate'])
.config(function($translateProvider) {
$translateProvider.preferredLanguage('en');
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
});
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
});
</script>
</head>
<body ng-app="languageTest">
<h1><span>{{'FOO'|translate}}</span></h1>
<h2 id="h2load"></h2>
<button onclick="loadh2()">load h2</button>
<script>
function loadh2(){
document.getElementById("h2load").innerText = "{{'TITLE'|translate}}";
}
</script>
</body>
</html>
Related
I can't get lightweight-charts to display when I'm using my javascript file. I see some folks put the JS code into their .html files but I would like my code inside my .js file. I must be missing something or have coded something incorrectly.
Thank you...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<!-- <link rel="stylesheet" type="text/css" href="charts.css"> -->
<script src="https://unpkg.com/lightweight-charts#3.4.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="charts.js" type="javascript"></script>
</head>
<body>
<div id="" class="">Test</div>
<div id="container"></div>
</body>
</html>
chart = LightweightCharts.createChart(document.getElementById('container'), {width: 900, height: 900,});
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
Try it just moving your <script> tag inside <body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<!-- <link rel="stylesheet" type="text/css" href="charts.css"> -->
<script src="https://unpkg.com/lightweight-charts#3.4.0/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body>
<div id="" class="">Test</div>
<div id="container"></div>
<script src="charts.js"></script>
</body>
</html>
Result I am suing live server VS code.
I had this problem too.
The chart displays here when I resize the window.
So I put an
`window.dispatchEvent(new Event('resize'));`
in my javascript file.
Found this somewhere here on SO.
#(message: String)(exchangelist: java.util.ArrayList[String])(implicit session: play.mvc.Http.Session)
#main(title = message)(session) {
<head>
...
</head>
<body>
<script>
startup(exchangelist);
<script>
</body>
Code like this, how can I pass parameter "exchangelist" to Js function "startup()"? This method don't work.
I suggest trying the meta tag:
<html>
<head>
<!-- <meta name="exchangelist" content='#{exchangelist.mkstring(",")}'> -->
<meta name="exchangelist" content='yellow,black,green'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script>
function startup(list) {
alert("startup called with " + list);
}
var el = $('meta[name=exchangelist]').attr("content").split(",");
startup(el);
</script>
</html>
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
$(".result").after(p);
});
</script>
</body>
</html>
The above codes don't insert data into p object.But the following works,
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
$(".result").after(p);
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
});
</script>
</body>
</html>
It seems to insert data, the jquery object(here,it is p)must manipulate the existing html tags? It is not reasonable like the latter,i want the first codes to insert data,but how?
Thanks, :)
render returns always a node. And if the template is in the DOM, it is replaced with the rendered node.
You can do this:
p = p.render(data, directives);
$(".result").after(p);
or
$(".result").after( p.render(data, directives) );
My code used to work until I dunno what i changed, I started everything from scratch yet it still doesn't show the tooltip, can someone tell me what's wrong with the code?
or even better, is there any other (easier) way to implement a tooltip ?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript">
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
})
</script>
</body>
</html>
Aren't you missing the onload?
<script type="text/javascript">
$(function() {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
Edit: the code above most definitely works, see jsfiddle
Make sure your qtip.js and qtip.css are loaded and recent
Try this instead:
$('a').qtip({
content: $('#jj').text()
});
Or do what the comment said and clone the element -- you'll probably have to show it explicitly:
$('a').qtip({
content: {
text: $('#jj').clone().show()
}
});
you need to put your qtip javascript inside a document ready.
$(function() {
$('a').qtip({
content: {
text: $('#jj').clone()
}
});
});
two things that you can try
move the scripts to your head section
wrap the javascript/jquery code inside the ready handler
$(document).ready(function(){
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="Scripts/qTip/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/qTip/jquery.qtip.js"></script>
<script type="text/javascript">
$(function () {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
</body>
</html>