PHP and javascript work correctly in Internet Explorer and Google Chrome, but not on Samsung Galaxy Android
I have a php based web application that, when entered by the user, enters data from the mysql database and displays it without refreshing the page. This is obviously done with javascript.
This works 100% correctly in Internet Explorer, chrome, etc. from mobile devices like blackberries and tablets, the formatting is messed up as soon as the user enters data. see screenshots below.
Internet explorer, the table structure remains in ticks:
Mobile device (Galaxy Tablet), the table structure changes:
Below is the code for two pages. the front is a php page that uses javascript to fetch and display data from mysql.
php page:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber)).style.display="block";
if (str=="")
{
document.getElementById("txtHint1").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="orderform" id="orderform" action="newsale.php" method="post">
<div align="left" id="txtHint1">mysql data will be shown here</div>
<br>
<table border="1">
<tr id="r1">
<td>
<input size="8" type="text" id="sku1" name="sku1" onchange="showUser(1, this.value)" >
</td>
<td>
<input type="text" id="qty1" name="qty1" size="3">
</td>
</tr>
<tr id="r2">
<td>
<input size="8" type="text" id="sku2" name="sku2" onchange="showUser(1, this.value)" >
</td>
<td>
<input type="text" id="qty2" name="qty2" size="3" >
</td>
</tr>
</table>
</form>
</body>
</html>
getdata1.php to get mysql data:
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'user', 'pass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<font color=blue size=2>Description:</font> <font color=red size=2>".$row['Description']."</font>, ";
}
mysql_close($con);
?>
Thanks again for everything as appropriate.
Alternatively, does anyone have any other javascript they can give me to pass data from mysql? sorry but my JavaScript skills don't exist.
Thanks and regards,
source to share
The problem is on the first line of your JavaScript:
document.getElementById("r"+(userNumber)).style.display="block";
You set the display style of the first row of the table to block
. I don't think there is a reason for this in your case, so just remove the line and your HTML will work well in all browsers, including the Samsung Galaxy Tab (I tested this on an actual tablet).
As a side note, the cell offset effect also happened in FireFox (and no more).
source to share