Solved

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.

Posted on 2009-05-05
14
404 Views
Last Modified: 2013-12-12
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

0
Comment
Question by:designersx
  • 8
  • 5
14 Comments
 
LVL 4

Expert Comment

by:davidsperling
ID: 24312214
The principles of basic AJAX are pretty nicely explained here :-)
(with example and code)

http://www.w3schools.com/php/php_ajax_database.asp
0
 

Author Comment

by:designersx
ID: 24312275
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
 

Author Comment

by:designersx
ID: 24312462
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:designersx
ID: 24312477
my database file.
ajax-demo.txt
0
 

Author Comment

by:designersx
ID: 24312668
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
 
LVL 4

Expert Comment

by:davidsperling
ID: 24315439
Does the html output look ok?
0
 

Author Comment

by:designersx
ID: 24315637
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
 
LVL 4

Expert Comment

by:davidsperling
ID: 24315815
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
 

Author Comment

by:designersx
ID: 24322120
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
 
LVL 4

Accepted Solution

by:
davidsperling earned 125 total points
ID: 24323302
This exampe works for me...
getuser.php.txt
index.php.txt
selectuser.js.txt
0
 

Author Comment

by:designersx
ID: 24324394
ok
0
 

Author Comment

by:designersx
ID: 24361906
can u give me database details.it will be good for me
0
 
LVL 4

Expert Comment

by:davidsperling
ID: 24409613
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question