i want to display the items to be shown from database with ajax when i click on the items that i have fetched from database with php.

i am fetching the data from database and the code is

<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("ajax_demo", $con);
$sql="select * from user where id = 1";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
 {
 ?>
       <div onClick="showuser(1)"><?php echo $row['FirstName'] ?></div>
 <?php
 }

mysql_close($con);
?>

now names are displayed on the front end and now i want that on the click of names other details are shown fetched from the database with ajax , not from php.

i am giving my js file and php file to you.
selectuser.js
 
var xmlHttp;
 
function showUser(str)
{ alert(str)
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="getuser.php";
url=url+"?q="+str;
 
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 } 
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
 
getuser.php
 
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("fetch_ajax_image", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table>";
while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['FirstName'] . "</td>";
 echo "</tr>";
 }
echo "</table>";
 
mysql_close($con);
?>

Open in new window

designersxAsked:
Who is Participating?
 
davidsperlingCommented:
This exampe works for me...
getuser.php.txt
index.php.txt
selectuser.js.txt
0
 
davidsperlingCommented:
The principles of basic AJAX are pretty nicely explained here :-)
(with example and code)

http://www.w3schools.com/php/php_ajax_database.asp
0
 
designersxAuthor Commented:
all the examples that i have seen are like that there are static items placed on the front end and ajax is applied to that. this i have done many times. i want to say that i am fetching the data from php and displaying on the front end and now on the click of those items , i want to apply ajax, have u got me exactly what i wanna say.

there is a difference between when i write like

<img src="Water.jpg" onMouseOver="showUser(1)" /> and now applying ajax

and

<?php

mysql_fetch_row['name']   //here i am fetching the items from php and now on click of it, i want to apply ajax. can i do it like that.

i have completly made a code, just a little modification is needed in that.
i have posted it above in my question.

?>
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
designersxAuthor Commented:
just take my full code.

please see the line 18th line in index.php and 1st line in selectuser.js , here i am unable to call ajax.

but my ajax works for the static image that i have taken.

this is what i wanted to say you. please help me out. i will be very thankful to you.
index.php
 
<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("ajax_demo", $con);
?>
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
 
<img src="Water.jpg" onMouseOver="showUser(1)" />
<img src="sunset.jpg" onMouseOver="showUser(2)" />
 
<form>
 <?php 
$sql="select * from user";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
 {
 ?>
	<a href="index.php" onClick="showUser(<?php echo $row['id']; ?>)" ><?php echo $row['FirstName'] ?></a>
  <?php
}
 
 ?>
 
</form>
 
 
<p>
<div id="txtHint"></div>
</p>
 
</body>
</html>
 
selectuser.js
 
var xmlHttp;
 
function showUser(str)
{ 
xmlHttp=GetXmlHttpObject();
var url="getuser.php";
url=url+"?q="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
function stateChanged()
{
alert(xmlHttp.readyState)
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 	document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 } 
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
 
getuser.php
 
<?php
$q=$_GET["q"];
 
$con = mysql_connect('localhost', 'root', '');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
 
mysql_select_db("fetch_ajax_image", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
 {
 echo $row['FirstName'];
 }
mysql_close($con);
?>

Open in new window

0
 
designersxAuthor Commented:
my database file.
ajax-demo.txt
0
 
designersxAuthor Commented:
sir please tell me whether u have understood what i want to say ,please atleast reply. i will explain u again in detail if u r getting problem or u are looking at it and try to understand????

awaiting for ur response.

ur work is always appreciated.
designersx
0
 
davidsperlingCommented:
Does the html output look ok?
0
 
designersxAuthor Commented:
yes sir , html output works exactly fine.

all the scripts and examples i have done yet, in that they have taken the html on the front end and then apply ajax. but i am bringing the data from database on the  front end and then trying to apply ajax.
that's why i was worried whether it is possible or not what i am trying to do?
0
 
davidsperlingCommented:
Think I've found it...

Why don't you try:
(xuse me if I spelled something wrong)
while($row = mysql_fetch_array($result))
 {
 ?>
	<div class="ajaxLink" onClick="showUser(<?php echo $row['id']; ?>)" ><?php echo $row['FirstName'] ?></div>
  <?php
}
 
//..then format the appearance of the "ajaxLink"'s in CSS.

Open in new window

0
 
designersxAuthor Commented:
is something what u said anything to do with ajax, my ajax is not called for the items that i call from php , so i think there is nothing to take with css.
i am sorry i have not understood ur point. can u please explain me again ?
0
 
designersxAuthor Commented:
ok
0
 
designersxAuthor Commented:
can u give me database details.it will be good for me
0
 
davidsperlingCommented:
You have to make sure that the database connection works in the "ajax script"  too.

See, if a page A.php calls B.php by AJAX, then variables and objects in A.php (like mysql-connections) won't be accessable in B.php.

So all connection parameters etc must somehow be made present in B.php.

If you use ajax a lot, concider an Ajax framework to avoid crappy code :-)

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.