Passing variable from android to javascript - javascript

i'm having problem in passing data/variable from android to javascript.here is my code.
WebView webview = (WebView) findViewById(R.id.webview_graph);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
String temp = "yoolod";
webview.loadUrl("file:///android_asset/test.html");
webview.loadUrl("javascript:sample(\""+temp+"\")");
in test.html
<!DOCTYPE html>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function sample(var){ //this is line 10
document.write (var);
//echo var;
}
</script>
</head>
<body>
</body>
</html>
I always have this, error and can't find solution yet. Hope you can help me.
"Uncaught ReferenceError: sample is not defined", source: (1)
"Uncaught SyntaxError: Unexpected token var", source: file:///android_asset/test.html (10)

after searching and trial error i somehow found a way. i just put the loadurl where im calling the function inside the onfinished of the webview.
webview.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String loc) {
view.loadUrl("javascript:sample('"+temp+"')");
}
});

Put the value in to the single quotes, below i have changed your code, take that code and try again.
webview.loadUrl("javascript:sample('"+temp+"')");
i have set the value (which is getting from the android) in edittext.
so you will get value in to the edit text in html.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; user-scalable=0;" />
<script language="javascript">
// getting Value from Android/ios
function sample(temp){
var textcontrol = document.getElementById("txtname");
textcontrol.value = temp;
}
</script>
<title>My HTML</title>
</head>
<body >
<h1>My HTML </h1>
<br>
<input type="text" id="txtname" />
</body>
</html>

Related

translate is not a function (in 'translate()', 'translate' is true)

I am trying to make a simple latin dictionary. I am new to JavaScript so I am trying to test the input tag with the alert function. In the console, I am receiving the error message after I click the "translate" button. Error: "translate is not a function (in 'translate()', 'translate' is true)".
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>
JavaScript:
function translate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
Thank you in advance :)
To solve it, choose another function name, such as myTranslate().
Why you can't use translate()? Because there's already a built-in translate in HTML. See here.
Note: You can choose whatever you want.
JS Code:
function myTranslate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
HTML:
<button onclick="myTranslate()" id="btn-translate-latin-english">Translate</button>
Let me know if it works.
I think this error is being called because you are using the script tag after the button tag. I think moving the script into the head of the html will solve the issue
You seem to use the function's name translate which is a reserved word in JavaScript.
translate is a global attribute to make elements translatable or movable.
You must rename the function to fix this error. I used Translate():
function Translate() {
var latinWord = document.getElementById("latin-word").value;
alert("Word that was entered: " + latinWord);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="Translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>

How do I grab information from HTML to Javascript but that is connected to an API

So I want to connect to this API:
<script id="myshiptrackingscript" src="//www.myshiptracking.com/js/widgetApi.js" async defer></script>
from here: https://www.myshiptracking.com/more/embed-our-map
I want to make an HTML page where I can input a mmsi (a variable in the code) and display it on the map.
This is what I've got so far:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ship tracker</title>
</head>
<body>
<input type="text" placeholder="mmsi" id="input">
<input type="button" onclick="submit()" value="ubmit">
<script src="app.js"></script>
<script id="myshiptrackingscript" src="//www.myshiptracking.com/js/widgetApi.js" async defer></script>
</body>
</html>
and for JAVASCRIPT
var mst_width="75%";
var mst_height="350px";
var mst_border="0";
var mst_map_style="simple";
function submit() {
var mst_mmsi = document.getElementById("input").submit;
}
var mst_show_track="";
var mst_show_info="";
var mst_fleet="";
var mst_lat="";
var mst_lng="";
var mst_zoom="";
var mst_show_names="0";
var mst_scroll_wheel="true";
var mst_show_menu="true";
When I submit an input, I get no output from the map... do I have to refresh the map or something?
Here is the code for the HTML:
<script>var mst_width="100%";var mst_height="350px";var mst_border="0";var mst_map_style="simple";var
mst_mmsi="";var mst_show_track="false";var mst_show_info="true";var mst_fleet="";var mst_lat="";var
mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var
mst_show_menu="true";</script>
<script id="myshiptrackingscript" src="//www.myshiptracking.com/js/widgetApi.js" async defer></script>
I grabbed all of that code from the same website: https://www.myshiptracking.com/more/embed-our-map
Click on the link and then click on "get code" to get the exact same code.
Thanks :)
I hope I explained my problem well enough...

Why am I getting the JS error in line one of my script Syntax error: invalid or unexpected token?

I'm trying to make the picture on the index.html page change when you push the button. Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="lolcatButton">Show me the LOLCat!</button>
<br><br>
<img id="lolcatImage" src=https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat5.jpg>
<script src="script.js"></script>
</body>
And here's my js:
var lolcatButton = document.getElementById(“lolcatButton”);
var lolcatImage = document.getElementById(“lolcatImage”);
var image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat4.jpg";
var showMeTheLolcat = function(){
lolcatImage.src = image;
};
lolcatButton.addEventListener(“click”, showMeTheLolcat);
I'm getting an error on line 1 of the js "uncaught syntaxerror: invalid or unexpected token."
Does anyone have any ideas? Thank you very much!
var lolcatButton = document.getElementById("lolcatButton");
Change the ” to ". And the other lines.
You can reorganize your code like this:
<button id="lolcatButton" onclick="showMeTheLolcat()">Show me the LOLCat!</button>
<br><br>
<img id="lolcatImage" src=https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat5.jpg>
<script>
function showMeTheLolcat() {
var image = "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/cat4.jpg";
lolcatImage.src = image;
}
</script>
Try it on jsfiddle here.

How to open new page in new tab and redirect current page

New tab works good, but for some reasons current page haven't redirect (window.location from changeLocation() doesn't work)
function changeLocation() call success everytime when I click button, but location doesn't change.
Basically it seems like window.location doesn't work because of form submit (although I use target="_blank"). But if I add return false after window.location to function, I'm not able to submit form after changing location (because I'm already on another page) and also submit before changing location impossible.
Is this possible to make it works somehow? Thanks.
function changeLocation (){
window.location = "http://bing.com";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
This code works for firefox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "http://bing.com";
}
</script>
</head>
<body>
<form action="https://google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
google.com is being loaded in the new tab and the current tab us being loaded with bing.com
To solve it, you need to add setTimeout to function like this.
function changeLocation (){
setTimeout(function(){
window.location = "http://bing.com";
},200);
}
No ideas why, but it works perfect.
Dim returnUrl = Request.UrlReferrer.ToString()
Response.Write("<script> setTimeout(function(){window.location = """ + returnUrl + """;},200);window.open (""" + loginurl + """,'_blank');</script>")

HTML + Passing Param b/w Parent & Child

It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(.
I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value.
Any help!!
I've tried
window.parent.document.getElementById(window.name)
window.parent.document.getElementById('test').value
window.opener.document.getElementById('teast').value
window.parent.opener.document.getElementById('teast').value
window.opener.parent.document.getElementById('teast').value
Almost all the permutation and combination. And its pure HTML.
Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.
window.opener.document.getElementById('test').value should work.
I've tried that, it ain't work. I'm posting the code
test.html
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="chatMessages"></div>
<script>
var newWin = null;
var OpenWindow = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
alert(window.parent.document.getElementById(window.name));
newWin = window.open(strURL, 'alertWindow', strOptions);
//newWin.document.getElementById("child").value='Str';
newWin.focus();
// send_data(data);
}
function chat() {
popUp('../alert.jsp','console',250,600);
}
</script>
<form name="AlertReceiverOnHeader" onclick="chat()">
<input type="text" value="teast" id="teast" name="teast"/>
</form>
</html>
child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alert</title>
</head>
<body onload="load()">
<script language="JavaScript">
function load() {
alert('In load');
alert("001="+window.parent.document.getElementById('teast'));
alert("002="+window.parent.document.getElementById(window.name));
alert("003="+window.opener.document.getElementById('teast').value);
}
</script>
<form name="child">
<input type="text" id="child" value="child"/>
</form>
</body>
</html>

Categories