I have this code in HTML5 using jquery. Fails when trying to run it on Android, don't show the result. Please helpme.
I try to use jquery mobile.
When I run it on my PC runs fine.
<script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js" ></script>
<script type="text/javascript" src="js/libs/jquery-mobile-1.2.0/jquery.mobile.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#calcular").click(function(Event){
var v1 = $("#v1").val();
var v2 = $("#v2").val();
var resultado = parseInt(v1) + parseInt(v2);
$("#r").val(function(){
return resultado;
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="formsuma" id="suma">
<table align="center">
<tr>
<td><label>Valor 1: </label></td>
<td><input name="valor1" id="v1" type="number" /></td>
</tr>
<tr>
<td><label>Valor 2: </label></td>
<td><input name="valor2" id="v2" type="number" /></td>
</tr>
<tr>
<td><label>Resultado: </label></td>
<td><output form="formsuma" name="resultado" id="r"></output></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="calcular" value="Calcular" /></td>
</tr>
</table>
</form>
Related
I have some images in my opening screen, some are on the page, some are not when I install the apk into the phone. I tried to find a solution but none worked for me.
Any idea why the following scenario exists at all ?
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.4.2.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/www/css/main.css" />
<link rel="stylesheet" href="file:///android_asset/www/css/jqm-icon-pack-fa.css" />
<script src="file:///android_asset/www/js/jquery-1.11.2.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.4.5.js"></script>
The weird things;
It works in my LG G2 (4.4.2)
It DOES not work in Samsung S2 (4.2.2) even though the images are in the same folder and they are all in .jpg format, the images in the first div work, the ones in the second div not working.
The working piece in the same html;
<div data-role="header" style="padding-top:20px;">
<center><img style="padding-bottom:10px;" src="file:///android_asset/www/images/openingPage/logo.png" />
</center>
<center><img style="max-width:100%;" src="file:///android_asset/www/images/openingPage/header_image.jpg" />
</center>
</div>
The piece that is not working at all ; (I do not see the images in the table inside the div, works in the browser, emulator, LG G2 with Android version 4.4.2 !)
<div data-role="main" class="ui-content">
<table style="width:100%; margin-top:3%;">
<tr>
<td>
<a href="./19.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/1.jpg" />
</center>
</a>
</td>
<td>
<a href="./27.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/2.jpg" />
</center>
</a>
</td>
</tr>
<tr>
<td style="padding-top:5%;">
<a href="./116.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/3.jpg" />
</center>
</a>
</td>
<td style="padding-top:5%;">
<a href="./132.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/4.jpg" />
</center>
</a>
</td>
</tr>
</table>
</div>
MainActivity;
public class MainActivity extends Activity {
private WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView1);
// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
//mWebView.setWebContentsDebuggingEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setAllowContentAccess(true);
mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
mWebView.loadUrl("file:///android_asset/www/18.html");
}
Well, I am pretty surprised that "center" tag is the one causing to the problem.
When I removed it from the surrounding of "img" tags, the problem disappeared for S2 with 4.2.2.
<div data-role="main" class="ui-content">
<table style="width:100%; margin-top:3%;">
<tr>
<td>
<a href="./19.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/1.jpg" />
</a>
</td>
<td>
<a href="./27.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/2.jpg" />
</a>
</td>
</tr>
<tr>
<td style="padding-top:5%;">
<a href="./116.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/3.jpg" />
</a>
</td>
<td style="padding-top:5%;">
<a href="./132.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/4.jpg" />
</a>
</td>
</tr>
</table>
</div>
Code:
function hello(){alert("Hi");};
<center>
<table border="0" height="100%">
<tbody>
<tr>
<td align="center" width="100%">
<img src="cover.png"
width="300" height="300" id="image"></img></td>
</tr>
<tr>
<td height="100%"> </td>
</tr>
<tr>
<td align="center">
<form onsubmit="go();return false">
<input class="answer" id="answer" name="answer"
onclick="hello();"/>
</form>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</center>
I have been trying to capture when the answer text box is clicked in HTML. It works perfectly in Firefox and Chrome (I only get one Hi alert), but the onclick method fires twice when I try to run the code in a web-view in android (I get two Hi alerts). However, when I call the same function later it works properly, firing only one Hi alert.
<div style="bottom: 0; right: 0; position:absolute; margin-right:5%">
<a><img alt="" src="start.png" id="submit" onclick="go();hello();"></a>
</div>
I'm guessing it has something to do with the fact that I'm calling the function from inside the form and it's somehow firing the event twice but I have no idea how to fix it. Any help?
You could try using one() as follows.
$('#answer').one('click', function() {
alert("Hi");
});
<form onsubmit="go();return false">
<input class="answer" id="answer" name="answer"/>
</form>
I am new to Web development and Phonegap/Cordova. In the code below i am anticipating that the table would be filed with the version, uuid etc but i am getting an empty column for that.
<!DOCTYPE HTML>
<html>
<head>
<title> Phone Gap </title>
<script type="text/javascript" src="cordova-1.9.0.js"></script>
<script type="text/javascript">
function onDeviceReady() {
document.getElementById("deviceName").innerHtml=device.name;
document.getElementById("version").innerHtml=device.cordova;
document.getElementById("uuid").innerHtml=device.uuid;
}
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onLoad="init()">
<h1>Device Info </h1>
<table border="1">
<tr>
<td>Device Name</td>
<td id="deviceName"></td>
</tr>
<tr>
<td>Version</td>
<td id="version"></td>
</tr>
<tr>
<td>UUID</td>
<td id="uuid"></td>
</tr>
</table>
</body>
</html>
It's innerHTML not innerHtml.
function onDeviceReady() {
document.getElementById("deviceName").innerHTML=device.name;
document.getElementById("version").innerHTML=device.cordova;
document.getElementById("uuid").innerHTML=device.uuid;
}
I have html form.but i dont understand where is put this html form. how to display form in web view.Thanks in advance
<Html>
<Head>
<Title>
<Title>
</head>
<body>
<table width="60%" align="center">
<TR><TD colspan="2"><span class="style1">Post comments</span></TD>
</TR>
<form action="http://www.indianexpress.com/ajax/saveComment.php" id="frmcommentmain" name="frmcommentmain" method="post">
<input type="hidden" value="918703" name="storyId">
<input type="hidden" value="172.16.24.10" name="ip_addr">
<input type="hidden" value="0" name="parentcmtId">
<TR><TD height="35">Name:</TD><TD><input type="text" name="name" tiptitle="Please enter your name">
*</TD>
</TR>
<TR><TD>Email:</TD><TD><input type="text" name="email" tiptitle="Please enter your email">
*</TD>
</TR>
<TR><TD>Title:</TD><TD><input type="text" name="subject" tiptitle="Please enter subject">
*</TD>
</TR>
<TR><TD>Comment:</TD><TD><textarea title="Please enter your comments" rows="6" name="comment"></textarea>
*</TD>
</TR>
<TR><TD colspan="2"><input type="checkbox" value="checkbox" name="checkbox">I agree to the terms of use.</TD></TR>
<TR>
<TD colspan="2"> </TD>
</TR>
<TR>
<TD colspan="2"> </TD>
</TR>
<TR><TD colspan="2"><input type="Submit" name="submit" value="submit"></TD></TR>
</form>
</table>
</body>
</html>
I have read many articles but I did not get answer for putting html form.Many articles described load data from url in webview but i want to load form in webview.
Indeed place your html page in the assets folder.
For showing the webpage use a WebView
WebView wv = (WebView)findViewById(R.id.webview);
wv.loadUrl("file:///android_asset/index.html");
I would store the HTML content in a file in the assets folder in your Android project. You should then be able to read the file from your code and load it into a Webview.
I'm trying to open a html-page in WebView (and in Browser) in 2.2SDK-Emulator, but i get always this message:
"This page contains the following errors: error on line 1 at column 68: opening and ending tags mismatch: meta line 0 and head"
Then i tried to open the same page on two devices and there is no problem with it. Now i open the same app in 1.6SDK-Emulator
Does anybody have any ideas, what happens? Can i somehow see the html-code of the page?!
UPD:
HTML code will be generated on server. That's why it's not so well readable. I replaced a bit all src values. They all are correct.
<html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/><title>title</title></head><body><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><img src="..._0_0.png" alt="" border="0"/></td><td><img src="..._1_0.png" alt="" border="0"/></td><td><img src="..._2_0.png" alt="" border="0"/></td><td><img src="..._3_0.png" alt="" border="0"/></td><td><img src="..._4_0.png" alt="" border="0"/></td><td><img src="..._5_0.png" alt="" border="0"/></td><td><img src="..._6_0.png" alt="" border="0"/></td><td><img src="..._7_0.png" alt="" border="0"/></td><td><img src="..._8_0.png" alt="" border="0"/></td><td><img src="..._9_0.png" alt="" border="0"/></td></tr></tbody></table></body></html>
UPD2:
ok, the server guys added closing of tags (meta and img), now i don't get any parser errors anymore. See the code above
But i don't see any images now.
UPD3:
We've got it. It was the sever, who says that the page type is xml instead of it's html.
I think your meta tag is not closed.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>title</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><img src="..._0_0.png" alt="" border="0"></td>
<td><img src="..._1_0.png" alt="" border="0"></td>
<td><img src="..._2_0.png" alt="" border="0"></td>
<td><img src="..._3_0.png" alt="" border="0"></td>
<td><img src="..._4_0.png" alt="" border="0"></td>
<td><img src="..._5_0.png" alt="" border="0"></td>
<td><img src="..._6_0.png" alt="" border="0"></td>
<td><img src="..._7_0.png" alt="" border="0"></td>
<td><img src="..._8_0.png" alt="" border="0"></td>
<td><img src="..._9_0.png" alt="" border="0"></td>
</tr>
</tbody>
</table>
</body></html>