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
399 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
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…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

932 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now