Home/ Questions/Q 7635493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:26:25+00:00

I have a php based web app that on a user entering a value,

  • 0

I have a php based web app that on a user entering a value, it pulls the details from the mysql database and displays it without the page being refreshed. This is obviously done with javascript.

This works 100% correctly on internet explorer, chrome etc. from mobile devices such as blackberries and tablets the formatting is messed up once the user enters data. see screen shots below.

Internet explorer, table structure remains in tacts:
enter image description here

Mobile Device (Galaxy Tablet), table structure is changed:
enter image description here

example can be viewed here

The Code for the 2 pages involved is shown below. the front end is a php page which used 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 page to fetch 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 all the asistance, it is appreciated.

Alternatively, does anybody have another javascript they can give me to dispaly the data from mysql? apologies but my javascript skills are non existant.

Thanks and Regards,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is in the first line of your JavaScript:

    document.getElementById("r"+(userNumber)).style.display="block";

    You’re setting the display style of the first table row to block. I don’t think there’s a reason to do that in your case, so just remove the line and your HTML will work nicely in all browsers, including the Samsung Galaxy Tab (I tested this on an actual tablet).

    As a side note, the cell shifting effect also happened in FireFox (and not anymore).

    • 0