I'm sending a class to my site using android web view just like this:
webView.addJavascriptInterface(data, "info")I wanted to know is there any way that I find out what functions and what variables are there in info class on the web side?
for example, if my data class be like this:
class Data(){
val name = ""
val family = ""
fun getName():String = name
fun getFamily():String = family
}
what javascript code I should use to understand the info class has two variables name and family?
currently, my web side is just like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
document.write(info.getName());
</script>
</body>
</html>
and using that I can access to name variable which is passed by android side,
how can I understand also there is a getFamily function too?
you can use a built-in method of javascript you can get the whole method of an object object.keys(name_of_object).
for example, in your case, it would be like this
document.write(object.keys(info));
and It will print
getName() and getFamily()
Related
I want get the custom attribute in AEM HTL use the request object. this attribute already set to request through javascript use API. like this:
test.js
use(function () {
request.setAttribute('someKey', 'someValue');
});
test.html
<html data-sly-use.logic="test.js">
<!-- some code ... -->
<body>
<div>${request.attribute['someKey']}</div>
</body>
</html>
result:
<html data-sly-use.logic="test.js">
<!-- some code ... -->
<body>
<div></div> <!-- empty -->
</body>
</html>
We can get request attribute without Java? Many thanks.
Since HTL syntax is rather declarative than imperative, calling methods/functions with parameters is not supported. That means you cannot do something like ${request.getAttribute('someKey')}. Unfortunately, the Java HttpServletRequest API does not expose the attributes as a map (it does that for parameters) so you cannot do ${request.attributeMap['someKey']} either, you'll need to fetch the attribute and expose it from your use-object/model.
Though you cannot send request attribute the way you are trying to do right now , you can set that as a variable from your server side JS and access it in your code.
In your test.js
use(function () {
return {
someKey: someValue
};
});
In your test.html
<html data-sly-use.logic="test.js">
<!-- some code ... -->
<body>
<div>${logic.someKey}</div>
</body>
</html>
This should print the someValue as output for you.
There are two files: 1)app.js and 2) browser.html. app.js just stores a value in a node-js local storage and browser.html should alerts that. But browser.html alerts "null".
My JavaScript code:
var LocalStorage = require('node-localstorage').LocalStorage;
localStorage = new LocalStorage('./scratch');
var a="salam";
global.a=a;
localStorage.setItem('a',a);
My html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
</head>
<body>
<input value="Smart contract data" max="25" id="12"></input>
<script src='js/app.js'> </script>
<script>
alert(localStorage.getItem('a'));
</script>
</body>
</html>
What is the problem and its solution? Is there any way to communicate between node-js storage and a html file? Please guide a beginner man.
The issue here is that node-localstorage is entirely backend, and htlm5 localStorage is entirely client side. You will not be able to pull backend values set with node-localstorage on the client end.
In order to pass values from node to the client you will need a template engine. Express provides a pretty complete list of those engines here:
https://expressjs.com/en/resources/template-engines.html
I'm trying to make a Javascript a key value object and use it as my Resources for localization
I have made this Jascsript code in a javascript file:
var Values = {
lbl_CustomerName:"Customer name: "
}
now need to use this object in my HTML file:
<title>Title</title>
<script src="../content/JS/Resources/en-us/Resources.js"></script>
</head>
<body>
Values.lbl_CustomerName
</body>
</html>
but it's parsed as a plane text!
I need to call this Object and access the key to show it's value in my HTML file how to do this?
we can truly advice you to use a javascript framework like angular js that embed this kind of behavior inside the framework.
without javascript framework, you will need to modify the DOM by yourself to insert your expected value. If you want to do it in pure javascript function you can write a functio like :
function insertKey(elem,id) {
elem.innerHTML = Values[id];
}
In your case it will look like that :
<title>Title</title>
<script src="../content/JS/Resources/en-us/Resources.js"></script>
<script type="text/javascript">
function insertKey(elem,id) {
elem.innerHTML = Values[id];
}
</script>
</head>
<body>
<div onload="insertKey(this,'lbl_CustomerName')"></div>
</body>
</html>
Whenever you want to parse a JavaScript code, you should wrap it inside a script tag.
<title>Title</title>
<script src="../content/JS/Resources/en-us/Resources.js"></script>
</head>
<body>
<script> document.write(Values.lbl_CustomerName); </script>
</body>
</html>
Browsers have interpreters and virtual machines. Natively, they parse the codes as HTML. if you need to use other syntaxes like CSS and JavaScript, you should tell them hey browser, parse this section as a CSS, JavaScript.
That's why we need and tags
I got the answer, the Javascript file must return an object, so I can use it on my page as follows:
javascript:
function resourcesObject() {
return {
"customerName": "Customer name";
};
}
HTML
<script>
var resources=resourcesObject();
var customerName=resources["customerName"];
</script>
When I have a variable defined into server context, sometimes I need use it into javascript context; for example the session id.
What's the better way to do it?
I want to separate javascript files and view files (in my case jsp); for the moment I have found 2 ways:
1) myVariables.js.jsp: create a jsp file that returns javascript code
myLib = {
sessionID: "${sessionId}",
[...]
}
and import it as javascript into the jsp view file:
<html>
<head>
<script src="myVariables.js.jsp"></script>
[...]
</head>
<body>
[...]
</body>
</html>
I'm able to get the session id writing: myLib.sessionId.
Pros: handy and rapid.
Cons: write a jsp file that acts as js.
2) Save the server variable into hidden input fields (for example, in the main part of the template):
<html>
<head>
<script src="myLib.js"></script>
[...]
</head>
<body>
<form id="myVariables">
<input type="hidden" name="sessionId" value="${sessionId}" />
[...]
</form>
[...]
</body>
</html>
I'm able to get the session id writing a specific function into myLib.js library:
myLib = {
sessionId: function() {
return $("form#myVariables > input[name=sessionId]").val();
},
[...]
}
Pros: javascript and view completely separated.
Cons: more code to write; little harder to understand than the previous.
In my opinion first way is better because your pages will be clean and more readable. That'is very important! ;)
Best regards
There's a third way that I think takes the best of both of your suggestions: An inline script tag containing the variables:
<html>
<head>
<script>
var myLib = {
sessionID: "${sessionId}",
[...]
};
</script>
</head>
<body>
[...]
</body>
</html>
No separate JSP to write. Just as separated as the second solution in your question, as the JavaScript is tied just to the myLib, exactly as the JavaScript in your second solution is tied to the structure of the form.
There's a benefit to your first solution we should call out: It allows the HTML to be cached by the browser (by separating the variables into a separate request, e.g., for the .js.jsp). Combining the variables with the HTML (either as above, or the second approach in your question) means the HTML has to be served with caching diminished or disabled.
I have tried out a scenario which I'm confused of. This is may be javascript 101, but I'm missing a point here.
Assume you have JS library which has a global variable defined. Also it has two functions called setData and retunData .I have separate html with a script within it's Head tag. This HTML file imports above library.
Now on the html I have a text field with two buttons.Buttons are send data and view data. The flow is, user type something and click send Data button. On its onClick I'm getting the text value and pass it to above JS library setData function which sets data to global variable. When i click the view data , on it's onClick it will call the returnData functio of JS Library and I'm alerting the value.
My question is, if I run my html on two browsers , and from one browser if i set the value "ONE" , on the same browser when i retrieves it says "ONE". On the second browser if returned the value it should be "ONE" because that variable is global and value is already set by first browser.
But it works as two requests. it won't override the global variable value. I know it should be the ideal case. But WHY? That's a global variable right? I hope my question is clear.
on the jsLibrary i have this.
var checkVal;
function setData(val){
checkVal = val;
}
function viewData(){
return checkVal;
}
My html is this.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jsLibrary.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<title></title>
<script type="application/javascript">
function sendData(){
var val = $("#idTextVal").val();
setData(val);
}
function viewData(){
alert(returnData());
}
</script>
</head>
<body>
<input type="text" id="idTextVal">
<input type="button" id="idConnect" onclick="sendData()" value="SEND">
<input type="button" id="idChecj" onclick="viewData()" value="VIEW">
</body>
</html>
WHY? That's a global variable right?
It is global, but for this particular tab/page instance. If you open that same page in other tab, javascript engine will initialize all variables, because it doesn't know that you have other tab.
In your case you have multiple options. Perhaps, the most straightforward is to use serverside storage to preserve state. Or you can use simple cookies/localStorage approach, they are also shared by all pages on the same origin. I would go with WebStorage as simpler:
function setData(val) {
localStorage.checkVal = val;
}
function viewData() {
return localStorage.checkVal;
}