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
407 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

696 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