Calling JavaScript function in WebView - javascript

I know this question has been asked many times and I have checked all the solutions and researched everything. However, this is simply not working for me.
I don't know what I am doing wrong. Can someone please help me out?
I am loading a local html file in my WebView and then calling the JavaScript function:
wv.loadUrl("file:///android_asset/sample.html");
wv.getSettings().setJavaScriptEnabled(true);
JavascriptInterface javasriptInterface = new JavascriptInterface(MyActivity.this);
wv.addJavascriptInterface(javasriptInterface, "MyInterface");
wv.loadUrl("javascript:loadpath()");
The HTML file is:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function callDoSomething() {
// Do something
}
function loadpath() {
// Is not called no matter whatever operation I do here. Just printing a string, setting variable, android callback anything.
document.write("Hi");
document.getElementById('img').src = "path.png";
}
</script>
<form name="myForm" action="FORM">
<img src="" alt="Autofill" /><br>
<input type="button" value="Submit" onClick="callDoSomething()" />
</form>
</body>
</html>

loadUrl() is asynchronous. You are calling your second loadUrl() way too soon. You need to wait until your page is loaded, perhaps by using a WebViewClient and watching for onPageFinished().

Related

button will not execute click function in google apps script html service

I've spent 2 days trying to figure this out so any help is appreciated.
I was following this nice little video tutorial series
and I wanted to try something basic before getting any further: get an html button to show a javascript alert using google apps script and their HTML Service component, but for the life of me, I can't understand why the alert is not triggered.
Here's my code
Index.html
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("btnSearch")
.addEventListener("click",showAlert);
function showAlert() {
alert("hello world");
}
</script>
</head>
<body>
<div>
<label>Enter code</label>
<input type="text" id="txtStudentID"/>
<button id="btnSearch">Search</button>
</div>
</body>
</html>
and my
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
I also try it like google shows it here: but I still don't get the alert to trigger after the button is pressed:
<input type="button" value="Search"
onclick="google.script.run
.withSuccessHandler(showAlert)
.withUserObject(this)" />
it's like anything that starts with "document.getElementByID..." within the script tags will simply not work
What am I missing? is this something not longer supported with GAPS? is there a different/proper way to get this to work?
thank you in advance.
anything that starts with "document.getElementByID..." within the script tags will simply not work
Yes. Because at the time script tags are evaluated, there's no element with id btnSearch.
Solution(s):
Move the script to the bottom of DOM.
<div>
<label>Enter code</label>
<input type="text" id="txtStudentID" />
<button id="btnSearch">Search</button>
</div>
<script>
function showAlert() {
alert('hello world');
}
document.getElementById('btnSearch').addEventListener('click', showAlert);
</script>
Alternatively, As the previous answer states, use the load trigger; so that the script is evaluated after the DOM is loaded.
<script>
function showAlert() {
alert('hello world');
}
function load1() {
document.getElementById('btnSearch').addEventListener('click', showAlert);
}
window.addEventListener('load', load1);
</script>
Try putting addEvent into window.onload

how to run function from frame

I have one file (CCPageContainer.swt) that contain number of frames, and each frame call file.
(swt - siebel template file)
this is part of the code with a specific frame:
<HTML dir="swe:dir">
<head>
<title><swe:this property="Title"/></title>
<swe:include file="CCStylesChoice.swt"/>
</head>
<swe:switch>
<swe:frameset htmlAttr="rows='30,30,27,18,42,*,15' border='0' frameborder='No'">
<swe:frame htmlAttr="marginheight='0' marginwidth='0' noresize scrolling='No'">
<swe:include file="CCFrameGoToView.swt"/>
</swe:frame>
</swe:frameset>
</swe:switch>
</HTML>
in the CCFrameGoToView.swt file that has been called I'm trying to call to alert function:
<HTML dir="swe:dir">
<body>
<script language="JScript">
function alert_test()
{
try
{
alert("test");
}
catch (err)
{
//document.write("oops.. an error has occurred");
}
}
</script>
<form name="myForm">
<table>
<tr>
<td>ALERT: <input type="Button" value="alert5" onClick="alert_test();"><br></td>
</tr>
</table>
</form>
<swe:scripts/>
</body>
</html>
the problem is that the alert message doesn't work when I'm pushing the button.
If I’m running only CCFrameGoToView.swt the alert button is working, and i see the message after i push.
but when I'm trying to run it from CCPageContainer.swt, nothing happened when i'm pushing the alert button.
I've also tried window.parent, window.top etc.
please your help. Thanks.
Try hanging your custom function off the top window so the click handler will be able to find its way to it:
top.alert_test = function alert_test()
{
// blah blah blah
}
then:
onClick="top.alert_test();"
As an aside, it feels strange to be directly injecting code into a Siebel Web Template file, so maybe if you tell us a little more about what you're trying to accomplish, we might be able to help you think about a better way to accomplish it.

fakepath when get file path in javascript code

I'm using this javascript code to get the path of a file, but every time when I run the code, the path appears as "C:\fakepath\file". I think that it is a browser issue (I'm using Chrome), but before changing the browser settings, I wonder if there is any way to do the same procedure without having this error. Is there any javascript library to perform this procedure correctly? How can we fix this error code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showFileName() {
var fil = document.getElementById("myFile");
alert(fil.value);
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain">
<input type="file" id="myFile" name="myFile"/>
Show Name
</form>
</body>
</html>
As always, thank you very much for the help. :)

JavaScript: Error "Object doesn't support this action"

The code for a counter gives an error
Whereas a similar snippet does not
I can't figure out any valid reason...
The line under consideration is:
<input type=button name="but2" value="stop" onClick="window.clearTimeout(ID);">
The complete code is:
<html>
<head>
<script language="JavaScript">
var counter=0;
ID=window.setTimeout("start();",2000);
function start()
{
counter++;
document.forms[0].elements[0].value=counter;
ID=window.setTimeout("start();",2000);
}
</script>
</head>
<body>
<form name="frm1">
<input type="text" name="timer1">
<input type="button" name="but1" value="start" onClick="counter=0; start();">
<input type=button name="but2" value="stop" onClick="window.clearTimeout(ID);">
</form>
</body>
</html>
Use window.start instead of start for the onClick event. It may be that IE doesn't create a window context when you use code instead of a function for the handler.
Everything about that code there is wrong. Please try to avoid that source of tutorials in the future.
Here is a working script: http://jsfiddle.net/teresko/qTJPx/
List of problem with your script:
missing doctype
language="JavaScript" is deprecated
variables ID and counter ended up in global scope
using html to attach events
incorrect use of setTimeout
<script> tag used in <head> when DOM is not ready yet
.. and i don't even want to go over that "similar snippet", it looks like something that by all rights should be dead an buried.
When you add your JavaScript code, it should be right before the closing </body> tag, because at that stage the DOM is already ready, but page has not begun to render yet.
I would strongly suggest for you to get some newer materials for learning JavaScript.
Hi I think in this line your getting the error
ID=window.setTimeout("start();",2000);
Right ?
Put this code
var ID=window.setTimeout("start();",2000);
you'll not get this JavaScript: Error Object doesn't support this action error.

Calling JavaScript function loaded from remote file

I am just getting started with HTML/JavaScript, and I have a simple question. I am attempting to call a js function from a separate script source, but am having a bit of trouble. My function script (date_button_function.js) reads:
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
In order to call on this function, my code looks like this:
<html>
<head>
<script type="text/javascript" src="date_button_functoin.js"></script>
<body>
<h1>Testing the Date</h1>
<p id="date">Click below to see the date.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
When I actually write out the displayDate function in the HTML script, it runs just fine. However, when calling the function, it does not work. If someone could let me know my syntax error, that would be great.
You're not closing your head tag, that's probably your issue there. Also, as stated on the comments, the name of the js file is wrong, should read "date_button_function.js" instead of "date_button_functoin.js"

Categories

Resources