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

Popular posts from this blog

php strip all tags

The below function can strip almost all tags from a string. function strip_all_tags($string) {     $string = preg_replace( '@<(script|style)[^>]*?>.*?@si', '', $string );     $string = strip_tags($string);     return trim($string); } $a = '<script type="text/javascript" src="jquery.js"></script> <div id="test" style="padding:5px; color:red;">Hello world</div>'; echo strip_all_tags($a); // outputs: Hello world

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) {    ...

php get content between tags

This involves parsing the dom document. <?php function getTextBetweenTags($tag, $html) {     $dom = new domDocument;     @$dom->loadHTML($html);         $dom->preserveWhiteSpace = false;     $content = $dom->getElementsByTagname($tag);     $out = array();         foreach ($content as $item)     {         $out[] = $item->nodeValue;     }     return $out; } $xhtml = '<tag>abc def</tag><tag>123 456</tag>'; $content2 = getTextBetweenTags('tag', $xhtml); foreach( $content2 as $item ) {     echo $item.'<br />'; } ?> Output: abc def 123 456