Question

I have a PHP based application that I need to work on both a normal PC and on a Samsung Galaxy tablet.

The functionality on both devices works correctly however it is just the formatting and presentation of the data that is diffrent.

My Application pulls data from a mysql database when the user enters a product number. this data is displayed in the same row as the product code inserted by the user. in Internet explorer it works 100% however on the tablet, once the user inputs a user code, the entire row is condensed into the first cell.

I have attached images to try get across what the issue is, please find these at bottom of qustion.

My relevent code is:

In Header:

<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
  document.getElementById("r"+(userNumber+1)).style.display="block";  
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).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("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  } 
</script> 

In Body:

<table><tr id="r1">  
    <td>
<input size=8 style="border: none"  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)" onkeypress="return enter(document.orderform.sku2)" value=<? echo $sku1; ?>  >
    </td>
    <td>
        <? if($grp1==0){echo "&nbsp; ".$grp1;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($su1==0){echo "&nbsp; ".$su1;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($fp1>0){echo "&nbsp; ".$fp1;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <input type=number id=qty1 name=qty1 size=3 value=<? if($qty1>0){echo $qty1;}; ?> >
    </td>
    <td>
        <? if($qty1==0){echo "&nbsp;";} else {if($qty1>0){if($line1decvalue==0){ echo "<img src=tick.jpg>";} else{ echo "<img src=cross.jpg>";}} else {echo "<img src=cross.jpg>";}} ?>
    </td>
    <td>
        <b><font color=red><? if($sku1>0){if($points1>0){echo "&nbsp; ".$points1;} else {echo "0";};} else {echo " &nbsp; ";} ?></font></b>
    </td>
    <td>
        <div align="left" id="txtHint1"><? if($sku1>0){echo "Selling Units: <font color=red>$su1</font>, Grouping: <font color=red>$grp1</font>, $su1 per Pallet: <font color=red>$fp1</font>";} else {echo "Select a SKU on left and Details will be seen here";} ?></div>
    </td>
</tr>
<tr id="r2">  
    <td>
<input size=8  style="border: none" type=number id=sku2 name=sku2 onchange="showUser(2, this.value)" onkeypress="return enter(document.orderform.sku3)" value=<? echo $sku2; ?>   >
    </td>
    <td>
        <? if($grp2==0){echo "&nbsp; ".$grp2;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($su2==0){echo "&nbsp; ".$su2;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($fp2>0){echo "&nbsp; ".$fp2;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <input type=number id=qty2 name=qty2 size=3 value=<? if($qty2>0){echo $qty2;}; ?> >
    </td>
    <td>
        <? if($qty2==0){echo "&nbsp;";} else {if($qty2>0){if($line2decvalue==0){ echo "<img src=tick.jpg>";} else{ echo "<img src=cross.jpg>";}} else {echo "<img src=cross.jpg>";}} ?>
    </td>
    <td>
        <b><font color=red><? if($sku2>0){if($points2>0){echo "&nbsp; ".$points2;} else {echo "0";};} else {echo " &nbsp; ";} ?></font></b>
    </td>
    <td>
        <div align="left" id="txtHint2"><? if($sku2>0){echo "Selling Units: <font color=red>$su2</font>, Grouping: <font color=red>$grp2</font>, $su1 per Pallet: <font color=red>$fp2</font>";} else {echo " &nbsp; "; }?></div>
    </td>
</tr>

PC Functionality:

Tablet Functionality:

Please let me know if I can assist further with any other information.

Answer 1

here is the answer, the line
document.getElementById(“r”+(userNumber)).style.display=”block”;
just needs to be removed. Thanks to @Alex van Oostenrijk for this.

Regards,
Ryan