Using AJAX to get info from SQL and place in table

Question

I want to create a table 2x2 table, first row labels and second with the information which i am getting from my sql table. I want to display the Name of the business on the left and the information on the right. I want to keep it a 2x2, so there will be multiple names on the left in button style, which when clicked on will display the relevant information on the right. So it will look something like this.

|--------------------|---------------------|
|       NAME         |        INFO         |
|--------------------|---------------------|
|    BusinessName1   |       their info    |
|    BusinessName2   |                     |
|    BusinessName3   |                     |
|--------------------|---------------------|

The problem is that i want to able to click on the businessName and display their info on the right. I have the AJAX and php working for the retrieving and displaying the businessName, just not sure how to make the BusinessName buttons work to display the relevant information on the right.

The table the information is stored in is called, business, with columns, name and info.

Here is the code i have so far to get the name and paste it in a table:

Main.php

//script for sending value 'business' to getTable.php. which will return the list of all business 
//names in button form.

<script type='text/javascript'>
function showTable(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").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").innerHTML=xmlhttp.responseText;
        }
    }

xmlhttp.open("GET","getTable.php?q="+str,true);
xmlhttp.send();

}
</script>

<?php ob_start(); ?> //using templates

//menu bar, onclick of button 'Business Basics' will run showTable script and pass value 'business' to it.
 <table width="829" border="1" cellspacing="5" cellpadding="2" align="center">
        <tr>
        <th scope="col" align="center"><button onclick="showTable(this.value)" value="business">    
        Business Basics </button></th>
        <th scope="col" align="center"><a href="" > Co-working spaces</a></th>
        <th scope="col" align="center"><a href=""> Events</a></th>
        <th scope="col" align="center"><a href=""> Entrepreneur organisations</a></th>
        </tr>
        <tr>
        <th scope="col" align="center"><a href=""> Free/Cheap resoucres</a></th>
        <th scope="col" align="center"><a href=""> Government Grants</a></th>
        <th scope="col" align="center"><a href=""> Government websites</a></th>
        <th scope="col" align="center"><a href=""> Internships</a></th>
       </tr>
       </table>

    <h1> Some stuff</h1>

    //table where the info will be displayed, 'txtHint' is where the business names are being   
    //displayed and 'txtHint2' is where i want the relevant info to be displayed.

    <table width="100%" width="830" border="1" cellpadding="2" cellspacing="5" align="center">
    <tr>
    <th scope="col" align="center" width="50%"> Pick one </th>
    <th scope="col" align="center" width="50%"> More Information </th>
    </tr>
    <tr>
    <th scope="col" align="left" width="50%"> <div id="txtHint"><b>Pick a category!</b></div></th>
    <th scope="col" align="left" width="50%"> <div id="txtHint2"><b>more info over here</b></div>    
    </th>
    </tr>
    </table> 

getTable.php

<?php

$q=$_GET["q"];
$count = 0;

$con = mysqli_connect('localhost','root','root','bregu');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

$result = mysqli_query($con,"SELECT * FROM `".$q."`");  //$q is the value 'business'

while($row = mysqli_fetch_array($result))
{
echo '<lo><button value="name" type="submit">'.$row['name'].'</lo><br>';
$count++;
}
mysqli_close($con);

?>

This is what i have so far. which will return a list of business names as separate buttons. Now i could use some help either theory or coded which will allow me to click on the business name and display their information on the right in the table.

Answer 1

You are trying to get element txtHint like this document.getElementById("txtHint") but where is the element??? As it will not find any element with this name so it won't work. Also make sure you are getting response in ajax call. You can check this either by using console.log(xmlhttp.responseText) or alert(xmlhttp.responseText).

Answer 2

jquery may like this

  $(function(){
var url="";
$("a").click(function(){
    $.post(url,{name:encodeURIComponent($(this).attr("href"))},function (data){
        $("#txtHint").html(data);
        });
    });
});

js may be

window.onload=function(){

var as=document.getElementsByTagName("a");
for(i=0;i<as.length;i++){
    //alert(as.item(i).href);
    as.item(i).onclick=function(){
        //alert(as.item(i).getAttribute("href"));
        alert(1);
                     /*ajax post*/
        return true;
    }
}

}