user user - 1 month ago 7
Android Question

How to implement onclick in javascript and html for devices with lower versions of android?

I am working on a project which works perfectly in devices with higher version-I have checked it in 4.1.2 version.

The problem is that it is not working in devices with android version 2.2.1 and 2.3.5.

I have six images to which I have added functionalities. The functionality for 2 images is to call a different HTML page with the id value. The functionality for the other four images is also the same,BUT the images will display based on the database value.

The functionality for 2 images is to call a different HTML page with the id value.

This is how I have coded..

<div id="header " class="header ">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png" onClick="abc()"/></div>
-----so -on


I have declared the abc function as

function abc(){
window.location.href="index.html";
}


The functionality for the other four images is also the same,BUT the images will display based on the database value.

if(value_in_db==0) {
document.getElementById("xyz").innerHTML = '<img src="img/inactive.png" />'
} else {
document.getElementById("xyz").innerHTML = '<img src="img/active.png" onclick="xyz()"/> '
}


I have declared the xyz function as

function xyz(){
window.location.href="basic.html";
}


Problem Facing:

The onclick functionality functions once in a while in android version 2.2.1 and 2.3.5.when keep on trying to click suddenly the function is called. I have tried fixing this error for almost 2 days.

I had faced a similar problem with the CSS position:fixed. This was not supported in the lower versions of android.I was suggested with a solution here.

I have tried with this addEventListener function it did not work for me.

I hope I get a solution for this problem to.

Please help me to fix this and guide me!

EDIT :1 touchevent and deviceready

document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent )
{
if( navigator.userAgent.match(/Android/i) )
{
touchEvent.preventDefault();
}
}


This works in the higher end version but not in the lower end version. I know its baseless to mention 2
document.addEventListener
..as it worked in the higher versions.i continued it.

Answer

This is pretty basic functionality and should work on all versions of Android - are you sure it's not something else in your code causing the problem?

I tried this test case using the latest Cordova 2.8.0 on my HTC HD2 which is running Android 2.3.4 and it works consistently fine:

<!DOCTYPE html>
<html>
    <head>     
        <meta charset="utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript">
            function abc(){
               window.location.href="foo.html";
            }
        </script>
    </head>
    <body>
         <h1>Index page</h1>
         <div id="abc" class="abc"><img src="img/abc.jpg" onClick="abc()"/></div>
    </body>
</html>

You can download my Eclipse test project and compiled APK here and try it on your devices.

UPDATE based on your JSFiddle code:

Your HTML contains several syntax errors - one of these may be causing issues with Android 2.x whereas 4.x may be more error tolerant:

1) The #header id attribute contains trailing whitespace. Replace

<div id="header " class="header "> with <div id="header" class="header">

2) Attribute values should be quoted. Replace <img name="slide" src="img/abc.jpg" width=100%; /> with <img name="slide" src="img/abc.jpg" width="100%" />

3) You have an extra closing div tag. Replace

<div id="footer"  class="footer">
    <div id="footer_text" style="color:#ffffff">footer</div>
    </div>
</div>

with

<div id="footer"  class="footer">
    <div id="footer_text" style="color:#ffffff">footer</div>
</div>