display soy variable value like alert in javascript - google-closure-templates

Do we have anything equivalent to javascript alert() in soy file to display variable values?
I tried using javascript also in soy like below but didnt help (extendedFieldView is a List):
<#assign extendedField = extendedFieldView.ExtendedField>
<script type="text/javascript">
alert("${extendedField}")
</script>
Thanks!

Related

How to initial window.__INITIAL_STATE__ to data in a .ejs view file?

I am trying to pass data to client-side by initializing window.INITIAL_STATE, however, this keeps giving me the "Expression expected" error which I am not sure how to fix
<script>
window.__INITIAL_STATE__ = <%- JSON.stringify(initialState) %>;
</script>
You need to wrap the expression in quotes as follows,
<script>
window.__INITIAL_STATE__ = '<%- JSON.stringify(initialState) %>';
</script>
I would recommend you to change the approach and put JSON.stringify into
<script id="__INITIAL_STATE__" type="application/json">
{JSON.stringify(data).replace(/</g,'\\u003c')}
</script>
and on the client side just do
const state = JSON.parse(document.getElementById('__INITIAL_STATE__').textContent)
according to chrome devs it is faster solution and you dont get any surprises related to quotes.
Faster apps with JSON.parse (Chrome Dev Summit 2019): https://www.youtube.com/watch?v=ff4fgQxPaO0

changing box attributes onclick in javascript

trying to create this file that changes an object's attributes (size, color, fade out, and reset) with the click of buttons. Not working right now and trying to figure out what I'm missing .... Any thoughts?
changing a box size
The first thing I notice is the duplication of attribute in your <script> tag and actual javascript in between the <script> and </script>. That's poor coding.
If you need code referenced in the file named 'javascript.js', then it needs to be it's own <script> declaration in HTML:
<script type="text/javascript" src="javascript.js"></script>
and THAT'S IT. THEN follow with any code you want on the page with a new <script> declaration block.
IF you're trying to make the jQuery library available, that can be accomplished with this: (put it in the <head></head> section of your html code.)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
jQuery is very particular about the selectors you feed it:
1) no prefix symbol means an html tag: $("table") means match any <table> in the HTML
2) a dot prefix symbol means match a class: $(".button1") WILL FIND the elements that you actually have in your code. They are not being found because you didn't prefix with a dot in your selector.
3) a hashtag/pound-sign/number-sign means match an ID: $("#box") will find that box at the beginning of your code.
<script type="text/javascript">
$(function(){
$(".button1").click(function(){
$("#box").css({'height':400,'width':400});
});
$(".button2").click(function(){
$("#box").css('background-color','blue');
});
$(".button3").click(function() {
$("#box").fadeOut();
});
$(".button4").click(function() {
$("#box").show().css({'height':150, 'width':150, 'background-color':'orange'});
});
});
</script>
here's a link to a FUNCTIONING codepen showing that what you're trying to do is possible.

How can show list string via html in angularjs

I have uib-popover in html when I hover, it'll show as image.
Backend I got list FullName, but when I call it on html. It shows as array.
I want to it just show External 1, Dao Thi Hong Nhung, instead of ["External 1","Dao Thi Hong Nhung"].
How can I do it?
This is not related to AngularJS at all. This is a plain JavaScript problem. Assuming that the array name is testArray, you can do it as follows:
testArray.join(", ")
This will produce a string with all elements of the array concatenated by ,.
Try this.
<!DOCTYPE html>
<html>
<head>
<script>
var response = ["External 1", "Dao Thi Hong Nhung"];
console.log(response.join(", "));
</script>
</head>
</html>

Print special characters in interpolate

how can I print special characters using angularjs´s interpolate function (portuguease accents)?
{{product.name}} --> Não é um bom exemplo
Currently I´d get --> Não é um bom exemplo
EDIT:
tried to create a simple plunkr but it just worked. Now I wonder if this has anything to do with a JSP.
The code is pretty simple, just a ng-controller basically
Thanks
After some research I found it:
adding charset="utf-8" on each script import with special characters did the trick:
<script src="<c:url value="/resources/scripts/client.js" />" charset="utf-8"></script>

Controller constructors in global scope are not working

I've seen this basic AngularJS code in a tutorial video which gives the output as expected. But when I try the same code locally it does not work, it shows {{message}} as the output.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope)
{
$scope.message = "First Run...";
}
</script>
</body>
</html>
In the console it shows an error,
Argument 'HelloWorldCtrl' is not a function, got undefined
Error: [ng:areq]
http://errors.angularjs.org/1.3.0-rc.2/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined
Why this same code behaving differently in different environments?
Can someone point out what I'm missing here?
there is something changed in angular1.3.rc2!
http://jsbin.com/sumifozawiji/1/edit
i got same error. 1.2.25 works:
http://jsbin.com/lanavuvaniva/1/edit
Since Angular v1.3.0-beta defining controller constructors in the global scope is no longer supported.
Angular will run, it will bootstrap automatically (because of the ng-app attribute) and expects to find a controller named HelloWorldCtrl (due to the ng-controller="HelloWorldCtrl"). But this controller is defined after Angular, so it is not there at the moment of execution.
The simplest solution is to change the order of the scripts, i.e. put your code before Angular.

Resources