Topic: aJax PHP Dynamic Drop Down Menu

Hello,

I have this PHP script that uses hard coded values in the dropdown. I've been trying to modify the script to grab values from the dB without success.

Script:
http://www.fornewbie.com/article/php/cr … xajax.html

From the script, if the user selects the value "air", the script needs to display all records associated with air from the dB.

Does anyone know how to populate the array with data from the dB?

$transports = array(
  'air'=>array('plane','helicopter','air-baloon',),
  'water'=>array('boat','watersky','submarine'),
  'land'=>array('motorcycle','car')
);

TIA!

Re: aJax PHP Dynamic Drop Down Menu

Hello all.  I am having the same issue and have searched the web for several days.  I am self-taught on PHP and know even less of JavaScript, but I'm trying to make this work.

My question is do we have to still use the array?  I mean, if xajax can add to any value in an element, why not just put the specific code into the js function?  I am trying to use concepts from the same example agent80 is using, but combine it with the ideas of a database backend as used in the barandair example made by Barry Andrew.

Here is the HTML portion (I hope):

[code]function getDests(dest) {
  url="barandair_d.php?d=" + dest;
  handleMessages(url, "dests");
  document.getElementById("origins").innerHTML = "

3 (edited by edrobinson 2007-08-06 9:13:26 PM)

Re: aJax PHP Dynamic Drop Down Menu

You should be able to write and register a php function that takes the value of the <select> as a parameter. and runs the query against the db.

Then you can build a table or whatever in a string and use the response object to insert it into the innerHTML of a <div> tag on the client.

function lookup($vlu)
{
  $resp = new xajaxResponse();
  $sql = "select blah from blah where key = '$vlu'";
  <run the query>
  if (anyrows returned)
  {
    $s = "<table>\n";
    foreach row
    {
      $s .= "<tr><td>".$row->blah."</td></tr>\n";
    }
    $s .= "</table>";
    $resp->Assign("divid", "innerHTML", $s);
  }
  else
    $resp->Alert("No matching records were located.");
  return $resp;
}

<select id="xxx" onclick="xajax_lookup(this.value);">
...
</select>

<div id="divid"></div>

Hope this helps.:)

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: aJax PHP Dynamic Drop Down Menu

I think I solved this one rather well...

Create your select in the HTML
    <select id="tableselect" onchange="xajax.call('setTablenames',{parameters:[this.options[this.selectedIndex].value]})">
        <option value="">Select a table</option>
    </select>

Then
<body onLoad="xajax.call('getTablenames')">
and then in your PHP script do a AJAX call to a javascript
$objResponse->script("addOption('tableselect',".$v.",".$v.");");

For the full code check out this post http://community.xajaxproject.org/viewtopic.php?id=5735

The idea came from http://wiki.xajaxproject.org/Create_Dep … with_Xajax

Rather tricky, but it works for me 100% smile

5 (edited by gajul 2007-11-05 1:36:51 AM)

Re: aJax PHP Dynamic Drop Down Menu

i have add the article how to fetch from database

http://www.fornewbie.com/php/create_aja … abase.html

sample :

http://www.fornewbie.com/dynDropDownDB.php

Re: aJax PHP Dynamic Drop Down Menu

gajul

I use your script in a state->city-> zipcode tri-drop down.

I noticed on states with a lot of cities I get a "Exception thrown and not caught" error.  Is this a AJAX bug?

Thanks

Im a noob with AJAX. 

TJ

Re: aJax PHP Dynamic Drop Down Menu

@tooljob
may be you can paste your code here..?
can not guess it is a bug.
or maybe problem in presentation. (' char, etc)

if cities in small data script can work ?

8 (edited by lukebrenner 2008-09-12 9:49:15 PM)

Re: aJax PHP Dynamic Drop Down Menu

Hi there, I have been struggeling lately to adapt the tutorialized script to pull data from my database, but to no avail.
It doesn't work. Therefore I am posting here my code so that someone could tell me what am I doing wrong.
So here it goes :

1. I have 2 tables in my database, table "province" and table "city".
2. Table province has 2 rows: "id" and "name"
3. Table city has 3 rows: "id", "fk_province_id" and "name"
4. I have a functions repository file called delegate.php that is referenced in every file on my site.
5. Obviously I want that when a dropdown # 1 (province) changes, the respective cities in that province show up in dropdown # 2

In my delegate.php file I have 2 functions that I reference in dropdown.php file:

// get provinces

function getProvinces(){
    $provinces = array();
    $con = getConnection();

    $query = "SELECT * FROM province";
    $result = executeSQL($query, $con);

    while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
        //get province
        $province = new Province($row['id'], $row['name']);
        $provinces[] = $province;
        
    }

    return  $provinces;
}

//get cities for province

function getCitiesForProvince($provinceId){
    $cities = array();
    $con = getConnection();

    $query = "SELECT * FROM city WHERE fk_province_id=$provinceId";
    $result = executeSQL($query, $con);
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
        $city = new City($row['id'], $row['name'], $row['fk_province_id']);
        $cities[] = $city;
    }

    return $cities;
}

And now here's the code of my dropdown.php file:

<?php
require('common/delegate.php');
session_start();


require('assets/js/xajax_core/xajax.inc.php');
$xajax = new xajax();
//$xajax->configure('debug',true);
 
class myXajaxResponse extends xajaxResponse {
 
  function addCreateOptions($sSelectId, $options) {
    $this->script("document.getElementById('".$sSelectId."').length=0");
    if (sizeof($options) >0) {
       foreach ($options as $option) {
         $this->script("addOption('".$sSelectId."','".$option."','".$option."');");
       }
     }
  }
}
      $provinces = getProvinces();
      $cities = getCitiesForProvince($provinces[0]->id);
 
      // adds an option to the select 
      function addCities($selectId, $provinces) {
        global $cities;
        $objResponse = new myXajaxResponse();
        $data = $cities[$provinces];
        $objResponse->addCreateOptions($selectId, $data);
//        return $objResponse->getXML();
                return $objResponse;
      }

      $xajax->registerFunction("addCities");
      $xajax->processRequest();
      ?>
      <?
      if (isset($_POST['Submit'])) {
        print_r($_POST);
      }
      ?>
      <html>
      <head>
      <title>AJAX Dynamic Drop Down Tutorial</title>
      <?
      $xajax->printJavascript("assets/js/");
      ?>
<script type="text/javascript">
  function addOption(selectId, val, txt) {
    var objOption = new Option(txt, val);
     document.getElementById(selectId).options.add(objOption);
   }
</script>
      </head>
      <body>
      <form name="form1" method="POST" action="">
      Province : 
      <select name="province" id="province" onchange="xajax_addCities('cities', document.form1.province.value)">
<? foreach ($provinces as $province) { ?>
        <option value="<?= $province->id?>"><?= $province->name?></option>
<? } ?>
      </select>
      City : 
      <select name="city" id="city">
<? foreach ($cities as $city) { ?>
        <option value="<?= $city->id?>"><?= $city->name?></option>
<? } ?>
      </select>

      <input type="submit" value="Submit" name="Submit" id="Submit">
      </form>
      </body>
      </html>

Output looks well but when I change a province, the cities dropdown doesn't change AT ALL.

I have enabled the xajax debugger and here's what I get the moment I change the province dropdown :

xajax debug output
Fri Sep 12 23:45:15 UTC+0300 2008
DONE [156ms]Fri Sep 12 23:45:15 UTC+0300 2008
ERROR: ExecuteCommand (#2, ):TypeError: Object doesn't support this property or methodFri Sep 12 23:45:15 UTC+0300 2008
ERROR: ExecuteCommand (#1, ):TypeError: Object doesn't support this property or methodFri Sep 12 23:45:15 UTC+0300 2008
ERROR: ExecuteCommand (#0, ):TypeError: Object doesn't support this property or methodFri Sep 12 23:45:15 UTC+0300 2008
RECEIVED [status: 200, size: 240 bytes, time: 78ms]:<?xml version="1.0" encoding="utf-8" ?><xjx><cmd cmd="js">Sdocument.getElementById('cities').length=0</cmd><cmd cmd="js">SaddOption('cities','6','6');</cmd><cmd cmd="js">SaddOption('cities','Aiudul de Sus','Aiudul de Sus');</cmd></xjx>Fri Sep 12 23:45:15 UTC+0300 2008
SENT [66 bytes]Fri Sep 12 23:45:15 UTC+0300 2008
SENDING REQUESTFri Sep 12 23:45:15 UTC+0300 2008
CALLING: xjxfun: addCitiesURI: http://localhost/v1/dropdown.phpFri Sep 12 23:45:15 UTC+0300 2008
POST: xjxfun=addCities&xjxr=1221252315703&xjxargs[]=Scities&xjxargs[]=S5Fri Sep 12 23:45:15 UTC+0300 2008
INITIALIZING REQUEST OBJECTFri Sep 12 23:45:15 UTC+0300 2008
PREPARING REQUESTFri Sep 12 23:45:15 UTC+0300 2008
PROCESSING PARAMETERS [2]Fri Sep 12 23:45:15 UTC+0300 2008
INITIALIZING REQUESTFri Sep 12 23:45:15 UTC+0300 2008
STARTING XAJAX REQUEST

Can somebody enlighten me PLEEEEEEASE of what the heck is going on smile ?

Thanks a zzzillion guys.

Luc