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
398 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
Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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 count occurrences of each item in an array.

706 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

18 Experts available now in Live!

Get 1:1 Help Now