Skip to main content

AJAX XML example to show selected user details

This example will use the Ajax XML way of sending response.
For this tutorial, first create a table, "xml_users" with the following fields:

id int(1) NOT NULL PRIMARY KEY AUTO_INCREMENT
FirstName varchar(12)
LastName varchar(12)
Age int(2)
HomeTown varchar(15)
Job varchar(12)

Insert few records in the table.

Now write the index.php file, that shows the drop down list of users' names from the table. The onchange event of this select box will fire the javascript function that sends the data to a php file using ajax.

Ex: onchange="showUser(this.value)"

The javascript:

function showUser(str)
{
xmlHttp=GetXmlHttpObject()

var url="responsexml.php"
url=url+"?q="+str // q is the id passed
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

/* Now write the span tags for showing the response */

<span id="job"></span><br />
<span id="age_text"></span>
<span id="age"></span><br />
<span id="hometown_text"></span>
<span id="hometown"></span><br />

Finally, write the php file: responsexml.php, that is called by the ajax code of js.

<?php
// Establish database connection

$q=$_GET["q"];
$sql="SELECT * FROM xml_users WHERE id = ".$q."";

$result = mysql_query($sql);

echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
{
echo "<age>" . $row['Age'] . "</age>";
echo "<hometown>" . $row['HomeTown'] . "</hometown>";
echo "<job>" . $row['Job'] . "</job>";
}
echo "</person>";
?>

On success, the response is shown in our page, like for example, the job value:

document.getElementById("job").innerHTML=
xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;

Note: change the database connection values, as needed.

Now test the application. When you select a user from the drop down list, it will show the corresponding user's details below.

You can download the entire source code here

Comments

Post a Comment

Popular posts from this blog

Retaining checkbox status of a form after submitting it

we will learn here how to post back or retain the value ( status ) of the checkbox. We will use php header redirection to post back the values to our main page where checkbox is present. We will call form page as first page and action or submitted page as second page. The form data will be received by second page and it is supposed to post back the form data back to form page by using query string through address bar. To keep the second page simple we will keep only the redirection part. Here we have excluded the part which takes care if the form passes its validation and execute the actual script (redirection part). Here is the code of our form with two checkboxes, pb-check.php <?php $t1=$_GET['t1']; $t2=$_GET['t2']; if($t1=="yes"){$t1v="checked";} else{$t1v=="";} if($t2=="yes"){$t2v="checked";} else{$t2v=="";} ?> HTML Form code: <form method="post" action="pb-chk.php"> <inp...
1 comment
Read more

Joomla validate chrono forms using jquery

It is a common practice to use Chrono forms in our joomla site to setup various forms in the site, be it a contact us form, submit a ticket form, or whatever. I have set the option "validate form" to "No" under chronoform settings in admin panel, and also preferred to not include any js or css files. For validating the chrono forms, i prefer jquery. So first lets add jquery support in our joomla. It is quite simple: 1. Download jquery.js and jquery_min.js (1.4.2 version is enough) and place them in media/system/js folder of your joomla. 2. Edit libraries->joomla->html->html->behavior.php, and add the following function below the mootools() function: function jQuery($debug = null)     {         static $loaded;         global $mainframe;         // Only load once         if ($loaded) {    ...
Post a Comment
Read more

Mysql join examples

1. Inner join: Sample Fields in "person" table:  id, email, password, firstname, lastname Sample Fields in "personprofile" table: person_id, age, dob, city, country, phone, mobile Query: select * from person inner join `personprofile` on person.id=personprofile.person_id and person.id=9; 2.  Left join: Sample fields in "employee" table: emp_id (primary), name, active Sample fields in "online" table: id (primary), user_id (references emp_id), online Query: SELECT *  FROM employee e left join online o on e.emp_id = o.user_id where e.active=1; Note the use of "where" in the above query, instead of normal "and". It will give the accurate results.
1 comment
Read more