0 Replies - 4831 Views - Last Post: 31 July 2011 - 04:18 PM

#1 hari_om  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 28-July 11

Using a mouseover event with help of ajax for PHP-MySQL Table

Posted 31 July 2011 - 04:18 PM

I am newbie to programming.

By my online search i managed to create two websites with ajax php and mysql functionality. I want to combine them into one.

Code for first webpage is

index.php code


<html>
<head>
<script type="text/javascript">
function showUser(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","country.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
  <tr>
    <td>

<select name="Country" onchange="showUser(this.value)">
    <option>Select Name</option>
    <?php
    mysql_connect('localhost','root','')
    or die ("could not connect DB");
    mysql_select_db('world')
     or die ("could not connect database");
    $query="select code, name from country order by name asc"
     or die ("query failed");
    $result=mysql_query($query);
    while(list($code, $name)=mysql_fetch_row($result)) {
        echo "<option value=\"".$code."\">".$name."</option>";
		echo "<div id=\"".$code."\">".$name."</div>";
    }
    ?>
</select>
</td>

    <td>
<div id="txtHint"><b>Country info will be listed here.</b></div>

</td> 
  </tr>
</table>
</body>
</html>





and country.php for same is


<html>
<head>
<script type="text/javascript">
function showUser(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","w3school.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
  <tr>
    <td>

<select name="Country" onchange="showUser(this.value)">
    <option>Select Name</option>
    <?php
    mysql_connect('localhost','root','')
    or die ("could not connect DB");
    mysql_select_db('world')
     or die ("could not connect database");
    $query="select code, name from country order by name asc"
     or die ("query failed");
    $result=mysql_query($query);
    while(list($code, $name)=mysql_fetch_row($result)) {
        echo "<option value=\"".$code."\">".$name."</option>";
		echo "<div id=\"".$code."\">".$name."</div>";
    }
    ?>
</select>
</td>

    <td>
<div id="txtHint"><b>Country info will be listed here.</b></div>

</td> 
  </tr>
</table>
</body>
</html>





It generates name of all the country and on selection their details.


Another webpage i created is

index.php

<html>
<table width="100%" border="1">
      <tr>
        <td width="80%" height="223">
        
        
        	<?php
	include ("/connections/query.php");
    	
	$nrows = mysqli_num_rows($result);
	/* Display results in a table */
		echo "<table width='100%'>\n
		<tr>\n";
				$i=1;
	include ("/function/table.php");
	include ("/function/table.php");
				
		
		echo "</tr>\n
		</table>\n";
		
		
?>	

		    
		</td>
        <td width="20%">&nbsp;</td>
      </tr>
    </table>
</html>



and table.php is


<?php
for (;$i<$nrows;)
			{	
						
							 #add 1 so that numbers don't start with 0
							
							echo"<tr>\n";
							for ($j=0;$j<10&&$i<=$nrows;$j++)
							{
								$n = $i;
								$i=$i + 1;
								$k=$n%30;
															
								$row = mysqli_fetch_assoc($result);
								extract($row);
							echo "<td>
										<table width='100%'>
										<tr>
											<td>$n</td>\n
										</tr>\n
										<tr>
											<td>$Name</td>\n
										</tr>\n
										<tr>\n
											<td>$Continent</td>\n
										</tr>\n
										<tr>\n
											<td>$Region</td>\n
										</tr>\n
										<tr>\n
											<td>$SurfaceArea</td>\n
										</tr>\n
										<tr>\n
											<td>$IndepYear</td>\n
										</tr>\n
										<tr>\n
											<td>$GNP</td>\n
										</tr>\n
										<tr>\n
											<td>$k</td>\n
										</tr>\n
										</table>\n
										
										
									</td>"; 
									
									if ($k==0)break 2;
									
								}
								echo"</tr>\n";
								
								
						
						
			}
?>			





Sorry for wrong indentation, and would love you to point out any other mistake with the code.


My trouble is that i want a mouse-over effect for table generated for each country in last two piece of code. It should show at one side of screen reserved for showing details only. Mouse-Over should fetch additional data from sql table and display it in that section. The mouseover box also needs to be static at same place and portion despite page movement.

I also got small trouble with showmore button. As you can find in above code, table breaks after showing 30 countries. I want help with a showmore button, which displays next 30 countries in same page and so on.

I would appreciate any sort of help.

Am working on sample world sql database now and codes are in testing mode now.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1