PDA

View Full Version : how to fetch data live from db?



snake_eyes
Mar 28th, 2007, 02:54 PM
hello,

I need a script which is contain 3 or more drop lists, when I choose a value from the first one I want to fetch the related data from DB, and when I choose I value from second drop list provide the related data from second etc...

Please help...

regards

BonRouge
Mar 28th, 2007, 03:40 PM
This might help a little: http://bonrouge.com/~chain_select_ajax

snake_eyes
Mar 28th, 2007, 03:58 PM
thanks for your reply, but is there another one with DB?

regards

BonRouge
Mar 28th, 2007, 06:22 PM
I don't know if you read it, but you just need to replace the switch part with a database query.

snake_eyes
Mar 28th, 2007, 07:11 PM
I read it my friend but it doesn't work I do not know why? :mad: that is why I replied to you

BonRouge
Mar 30th, 2007, 07:18 AM
Hey,
I'm sorry... Someone has pointed out to me that I forgot to show a bit of the code necessary on that page - specifically the onload event which starts the whole thing. Maybe if you go back and try again, it might work.

snake_eyes
Mar 30th, 2007, 01:45 PM
hello,

I appreciate your cooperation regarding to my matter...

BonRouge, the problem has been solved and I'm able to fetch the data, but my question it can be more than 2 lists?

1- coutry
2- city
3- street
4- ..
5- ..

:D

Regards

snake_eyes
Mar 31st, 2007, 01:46 PM
any updates please?

iLLin
Mar 31st, 2007, 04:08 PM
LOL wheres the good posters about 'reading minds' at? Good spot to insert that comment :).

We can't read your mind snake, try to be more specific in your question. Like how your querying the db, how your displaying the info... you know the code stuff.

BonRouge
Mar 31st, 2007, 06:35 PM
For 3... (this is probably not good - I just added to what I had).

http://bonrouge.com/demos/chain_select_ajax_3.htm

D'oh! I've just had a look in IE and this doesn't work with our evil little MS friend. (It's fine in Firefox, of course).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
</style>
<script type="text/javascript">
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}



function fillSelect(country,city) {
var url = "chain.php?country=" + escape(country) + "&city=" + escape(city);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}

function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var clist=document.getElementById("city");
var tlist=document.getElementById("team");
var cityTeam=response.split('^');
var cities=cityTeam[0].split('|');
var teams=cityTeam[1].split('|');
if (teams=="") {
for (i=1; i<cities.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(cities[i]);
x.appendChild(y);
clist.appendChild(x);
}
}
for (i=1; i<teams.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(teams[i]);
x.appendChild(y);
tlist.appendChild(x);
}
}
}
}

function refresh(el) {
var country=document.getElementById('country');
var city=document.getElementById('city');
var team=document.getElementById('team');
var list=document.getElementById(el);
while (list.childNodes[0]) {
list.removeChild(list.childNodes[0])
}
if (el=='city') {
while (team.childNodes[0]) {
team.removeChild(team.childNodes[0])
}
}
fillSelect(country.value,city.value);
}

function initCs() {
var country=document.getElementById('country');
var city=document.getElementById('city');
country.onchange=function() {refresh('city')};
city.onchange=function() {refresh('team')};
refresh('city');
}
window.onload=initCs;
</script>
</head>
<body>
<form method="post" action="#">
<p><label>country: <select id="country" name="country">
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select></label>
<label>city: <select id="city" name="city">
</select></label>
<label>team: <select id="team" name="team">
</select></label></p>
</form>
</body>
</html>



<?php
function doIt($country) {
switch ($country) {
case "United Kingdom":
return array('','London','Manchester','Birmingham','Liverpool','Edinburgh','Cardiff','Belfast');
break;
case "United States":
return array('','Washington DC','New York','Los Angeles', 'Chicago');
break;
case "Australia":
return array('','Canberra','Melbourne','Sydney', 'Brisbane');
break;
case "Japan":
return array('','Tokyo','Osaka','Fukuoka','Sendai','Sapporo');
break;
}
}

function team($city) {
switch ($city) {
case "London":
return array('','Arsenal','Chelsea','Tottenham','West Ham');
break;
case "Manchester":
return array('','Man Utd','Man City');
break;
case "Birmingham":
return array('','Birmingham City', 'Aston Villa');
break;
case "Liverpool":
return array('','Liverpool', 'Everton', 'Tranmere Rovers');
break;
return false;
}
}

[email protected]$_GET['country'];
$cities=doIt($country);
foreach ($cities as $city) {
echo '|'.$city;
}

echo '^';

[email protected]$_GET['city'];
if (!empty($city)) {
$teams=team($city);
foreach ($teams as $team) {
echo '|'.$team;
}
}
?>

For four and five, please pray someone else comes along to help, or see if you can work it out for yourself from what you have here.

I hope this helps.

snake_eyes
Apr 1st, 2007, 08:52 AM
Bonjour Bonrouge,

Dear, I modified the code in order to support more than 2 drop list assuming we have countries, cities and roads, below is the source code (not tested)

Scenario:
Select the Lebanon country form counties list, it will fetch in city list their cities which is:

Beirut, Saida, Tripoli try to select Beirut from cities list, it will fetch in roads list their roads etc...


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>Test From Snake_eyes</title>
<script language="javascript">
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined')
{
request = new XMLHttpRequest();
}
//
window.onload=initCountries;
//
function initCountries()
{
fillSelect("param", "default", FetchData01);
initCities();
}
//
function initCities()
{
var city=document.getElementById('country');

city.onchange=function()
{
if(this.value!="")
{
var list=document.getElementById("city");

while (list.childNodes[0])
{
list.removeChild(list.childNodes[0])
}
fillSelect("param", this.value, FetchData02);
Roads();
}
}
//fillSelect("param", city.value, FetchData02);
}
//
function Roads()
{
var test=document.getElementById('city');
test.onchange=function()
{
if(this.value!="")
{
var list=document.getElementById("road");
while (list.childNodes[0])
{
list.removeChild(list.childNodes[0])
}
fillSelect("param", this.value, FetchData03);
}
}
}
//
function fillSelect(get, data, run)
{
var url = "csa_ajax.php\?"+get+"="+ escape(data);

request.open("GET", url, true);
request.onreadystatechange = run;
request.send(null);
}
//
function FetchData01()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
var response = request.responseText;
var list=document.getElementById("country");
var cities=response.split('|');

for (i=1; i<cities.length; i++)
{
var x=document.createElement('option');
var y=document.createTextNode(cities[i]);

x.value = cities[i];
x.appendChild(y);
list.appendChild(x);
}
}
}
}
//
function FetchData02()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
var response = request.responseText;
var list=document.getElementById("city");
var cities=response.split('|');

for (i=1; i<cities.length; i++)
{
var x=document.createElement('option');
var y=document.createTextNode(cities[i]);

x.value = cities[i];
x.appendChild(y);
list.appendChild(x);
}
}
}
}
//
function FetchData03()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
var response = request.responseText;
var list=document.getElementById("road");
var cities=response.split('|');

for (i=1; i<cities.length; i++)
{
var x=document.createElement('option');
var y=document.createTextNode(cities[i]);

x.value = cities[i];
x.appendChild(y);
list.appendChild(x);
}
}
}
}
</script>
</head>
<body>

<form method="post" action="#">
<p>

<label>country:
<select id="country" name="country"></select>
</label>

<label>city:
<select id="city" name="city"></select>
</label>

<label>road:
<select id="road" name="road"></select>
</label>

</p>
</form>
</body>

</html>


<?php
function FechIt($param = "")
{
switch ($param)
{
case "default":
return array('United States','Lebanon');
break;
case "United States":
return array('London','Manchester','Birmingham','Liverpool','Edinburgh','Cardiff','Belfast');
break;
case "Lebanon":
return array('Saida','Beirut','Tripoli');
break;
//
case "Beirut":
return array('Road1','Road2','Road3','Road4','...');
break;
default:
return array('nothing');
break;
}
}
//
$param= @$_GET['param'];
$key= FechIt($param);
foreach ($key as $value)
{
echo '|'.$value;
}
?>

I'm working on it also in order to merge the FetchData01, FetchData02 and FetchData03 in one function with parameter.

Please note: if any body can upgrade also the above code please do not hesitate.

Waiting your feedback...
Sincerely yours,