Dropdowns vullen op basis selctie 1e dropdown

thapriest · 7 okt 2010

Hallo,

De vraag is misschien al wel een aantal keren gesteld, maar tot op heden heb ik nog niets(voor mij bruikbaars) gevonden.

Ik wil graag een dropdown box laten vullen met data uit een database, wanneer deze geselecteerd(gezet) is, dat dan de volgnde dropdown gevuld wordt op basis van die eerste.(Zonder een page refresh)

Situatie schets:

tabel landen:

1e dropdown zou alle landen moeten bevatten

tabel bezienswaardigheden:
2e dropdown, zou dan op basis van in 1e dropdown alle bezienswaardigheden in dropdown 2 moeten geven.(dus als in de tabel bezienswaardigheden het land dat geselcteerd is in dropdown 1 staat, die in de dropdown 2 zetten.

Nu weet ik dat dit in AJAX/PHP/SQL moet gebeuren, 2 Laatsgenoemde heb ik al heel veel (mede dankzij jullie forummers) over geleerd, 1st genoemde, echter geen kaas van gegeten.

Ik heb al een ander gezocht , en een aantal voorbeelden gepakt, maar ik kom er nog niet uit.

Kan iemand me een duwtje in de juiste richting geven, of weet iemand misschien een wat helderder tut'je dan die ik gevonden heb?

Frats · 7 okt 2010

Je hebt een klein stukje Javascript nodig, als eerste. Dat Javascriptje moet hangen aan een "onchange" van je dropdown box, en het enige wat het hoeft te doen is een AJAX call doen met de waarde van de dropdown box erin.

De AJAX call moet op de return een functie aanroepen die de waarde van de return gebruikt om de tweede dropdown te vullen. Zorg dus dat je PHP scriptje wat aangeroepen wordt de data in een duidelijk leesbaar format terugstuurt (bijv. in JSON, dat kun je vrij makkelijk uitlezen)

Zelf gebruik ik voor AJAX calls meestal de ingebouwde feature van JQuery of deze als ik geen JQuery gebruik op een pagina: http://code.google.com/p/miniajax/

Heb je al een AJAX voorbeeldje aan de praat gekregen? Ik heb een simpele Slideshow die werkt met miniajax, die kun je eventueel bekijken, staat hier:
http://www.ruigekonijnen.nl/temp/slideshow.zip

Het principe van AJAX is eigenlijk heel simpel; javascript roept een functie aan, die functie roept een PHP script aan, en als het PHP script klaar is met uitvoeren, roept de AJAX functie weer een andere javascript functie aan en geeft ie de PHP data mee terug.

Heb je al code om te laten zien zelf?

thapriest · 7 okt 2010

Na je eerste Alinae, ben ik je al biojna kwijt

?Het javascript, lijkt niet voor mij weggelegd

Ik ben op dit moment aan het stoeien met dit:

PHP:

<?php
 $hostname = "localhost";   
 $username = "root";   
 $password = "";
 ?>
 
 <?php   $dbh = mysql_connect($hostname, $username, $password)      or die("Unable to connect to MySQL");   
 $selected = mysql_select_db("villa",$dbh);   
 if( isset($_GET['ajax']) )   {     
 //In this if statement      
 switch($_GET['id'])      {         
 case "LBox2":            
 $query = sprintf("SELECT * FROM villa WHERE land=%d",$_GET['ajax']);         
 break;         
 case "LBox3":            
 $query = sprintf("SELECT * FROM offerte WHERE land=%d",$_GET['ajax']);         
 break;      
 }            
 $result = mysql_query($query) or die(mysql_error());      
 while ($row = mysql_fetch_assoc($result))      {         
 echo "<option value='{$row['id']}'>{$row['land']}</option>\n";      }      
 mysql_close($dbh);      exit; 
 //we're finished so exit..   
 }      
 if (!$result = mysql_query("SELECT * FROM land"))   {      
 echo "Database is down";   }   
 //for use with my FIRST list box   
 $List1 = "";   while ($row = mysql_fetch_assoc($result))   
 {
 
 $List1 .= "<option value='{$row['id']}'>{$row['land']}</option>\n";   
 }
 ?>
 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Simple Dymanic Drop Down</title>
 <script language="javascript"> 
 function ajaxFunction(id, Param)   {     
 //link to the PHP file your getting the data from      
 var loaderphp = "register.php";      
 //i have link to this file      
 var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";            
 //we don't need to change anymore of this script      
 var xmlHttp;      try       {         
 // Firefox, Opera 8.0+, Safari         
 xmlHttp=new XMLHttpRequest();       }catch(e){         
 // Internet Explorer         
 try         {            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");         }
 catch(e){            
 try            {               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            }
 catch(e){               
 alert("Your browser does not support AJAX!");               
 return false;            }         }      }            
 xmlHttp.onreadystatechange=function()      {         if(xmlHttp.readyState==4)           {              
 //the line below reset the third list box incase list 1 is changed              	
 var sSelect = document.getElementByid(id);				
 for(options in sSelect.options)	
 sSelect.remove(options);              	
 var opt = document.createElement("option");				
 sSelect.options.add(opt);				
 var data = xmlHttp.responseText;								
 results = data.split('\n');				
 for(r in results){					
 var d =  results[r];					
 match = d.match(/<option value='(.*?)'>([^<]*)<\/option>/);					
 if (match != null) {						
 var opt = document.createElement("option");						
 opt.value= match[1];						
 opt.text = match[2];						
 sSelect.options.add(opt);					}				}           }      }       
 xmlHttp.open("GET", loaderphp+"?id="+id+"&ajax="+Param,true);       
 xmlHttp.send(null);   }
 </script>
 </head>
 <body>
 
 <!-- OK a basic form-->
 <form method="post" enctype="multipart/form-data" name="myForm" target="_self">
 <table border="0">  <tr>    <td>      
 <!--      OK here we call the ajaxFuntion LBox2 refers to where the returned date will go      and the this.value will be the value of the select option      -->      
 <select name="list1" id="LBox1" onchange="ajaxFunction('LBox2', this.value);">         
 <option value=''></option>      <?php          echo $List1;      ?>      </select>   </td>    
 <td>      <select name="list2" id="LBox2" onchange="ajaxFunction('LBox3', this.value);">         
 <option value=''></option>            
 <!-- OK the id of this list box is LBox2 as refered to above -->      </select>   </td>  
 <td>      <select name="list3" id="LBox3">         <option value=''></option>            
 <!-- OK the id of this list box is LBox3 Same as above -->      </select>   
 </td>  </tr></table>  
<input type="submit" name="Submit" value="Submit" />
</form></body></html>

Het originele voorbeeld staat hier:
http://www.phpfreaks.com/forums/index.php?topic=155984.0

Maar krijg nu al een melding:
Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\ajax\ajaxtest.php on line 28 , dus dat ben ik ff aan t uitzoeken.

EDIT: dat was zoals gewoonlijk een typo mijnerzijds., maar ik krijg alleen de eerste dropdown maar gevuld

Ik had al wel iets werkends gevonden via w3schools, maar om het om te vormen ontbeert mij(denk ik) javascript kennis.

EDIT2:
var sSelect = document.getElementByID(ID); gewijzigd in: var sSelect = document.getElementById(ID);
Nuy vult hij de 2e wel aan , maar ik kirjg met alle selecties ook alle resultaten?

phobia · 7 okt 2010

probeer anders een met Jquery, is eigenlijk javascript maar simplere.
zijn ook talloze tut online

bv. http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Je moet alleen wel engels kunnen!

thapriest · 8 okt 2010

Daar heb ik ook even gekeken, maar daar vond ik ook niet echt wat ik zocht.

Ik heb op dit moment zo, en nu vult hij de 2e dropdown wel met het goede aantal records echter de tekst komt niet tevoorschijn.Dus ik heb gewoon een witte dropdown, met het juist aantal records daarin:

PHP:

<?php
 $hostname = "localhost";   
 $username = "root";   
 $password = "";
 ?>
 
 <?php  
    $dbh = mysql_connect($hostname, $username, $password)
      or die("Unable to connect to MySQL");
   $selected = mysql_select_db("villa",$dbh);
   if( isset($_GET['ajax']) )
   {
   echo $_GET['ajax'];
      //In this if statement
      switch($_GET['ID'])
      {
         case "LBox2":
            $query = sprintf("SELECT * FROM villa WHERE land='".$_GET['ajax']."' ");
         break;
         case "LBox3":
             $query = sprintf("SELECT * FROM villa WHERE land='".$_GET['ajax']."' ");
         break;
      }
      
      $result = mysql_query($query) or die(mysql_error());
      while ($row = mysql_fetch_assoc($result))
      {
         echo "<option value='{$row['ID']}'>{$row['Name']}</option>\n";
		 
      }
      mysql_close($dbh);
      exit; //we're finished so exit..
   }
   
   if (!$result = mysql_query("SELECT * FROM landen"))
   {
      echo "Database is down";


 }   
 
   //for use with my FIRST list box
   $List1 = "";
   while ($row = mysql_fetch_assoc($result))  
 {

 $List1 .= "<option value='{$row['land']}'>{$row['land']}</option>\n";   

 }
 
 ?>
 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>AJAX VOORBEELD!</title>
<script language="javascript">
   function ajaxFunction(ID, Param)
   {
      //link to the PHP file your getting the data from
      //var loaderphp = "register.php";
      //i have link to this file
      var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";
      
      //we don't need to change anymore of this script
      var xmlHttp;
      try
       {
         // Firefox, Opera 8.0+, Safari
         xmlHttp=new XMLHttpRequest();
       }catch(e){
         // Internet Explorer
         try
         {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
         }catch(e){
            try
            {
               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
               alert("Your browser does not support AJAX!");
               return false;
            }
         }
      }
      
      xmlHttp.onreadystatechange=function()
      {
         if(xmlHttp.readyState==4)
           {
              //the line below reset the third list box incase list 1 is changed
              	var sSelect = document.getElementById(ID);
				for(options in sSelect.options)	sSelect.remove(options);
              	var opt = document.createElement("option");
				sSelect.options.add(opt);
				var data = xmlHttp.responseText;
				
				results = data.split('\n');
				for(r in results){
					var d =  results[r];
					match = d.match(/<option value='(.*?)'>([^<]*)<\/option>/);
					if (match != null) {
						var opt = document.createElement("option");
						opt.value= match[1];
						opt.text = match[2];
						sSelect.options.add(opt);
					}
				}
           }
      }
       xmlHttp.open("GET", loaderphp+"?ID="+ID+"&ajax="+Param,true);
       xmlHttp.send(null);
   }
</script>
 </head>
 <body>
 
 <!-- OK a basic form-->
<form method="post" enctype="multipart/form-data" name="myForm" target="_self">
<table border="0">
  <tr>
    <td>
      <!--
      OK here we call the ajaxFuntion LBox2 refers to where the returned date will go
      and the this.value will be the value of the select option
      -->
      <select name="list1" id="LBox1" onchange="ajaxFunction('LBox2', this.value);">
         <option value=''></option>
      <?php 
         echo $List1;
      ?>
      </select>
   </td>
    <td>
      <select name="list2" id="LBox2" onchange="ajaxFunction('LBox3', this.value);">
         <option value=''></option>
            <!-- OK the ID of this list box is LBox2 as refered to above -->
      </select>
   </td>
   <td>
      <select name="list3" id="LBox3">
         <option value=''></option>
            <!-- OK the ID of this list box is LBox3 Same as above -->
      </select>
   </td>
  </tr>
</table>
  <input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>

Frats · 8 okt 2010

Probeer dit eens gewoon te vervangen door iets leesbaarders?

PHP:

 echo "<option value='{$row['ID']}'>{$row['Name']}</option>\n";

Naar:

PHP:

 echo "<option value='" . $row['ID'] . "'>" . $row['Name'] . "</option>\n";

Verder, als je het juiste aantal rijen krijgt haalt de query wel IETS op. Weet je zeker dat je de veldnamen goed hebt staat? Heten de velden echt "Name" en "ID" in de database?

thapriest · 8 okt 2010

Heten de velden echt "Name" en "ID" in de database?

OEPS

En natuurlijk, DANK JE WEL! ik ben er gister de hele dag mee bezig geweest

vervangen door de juiste namen, et voila it works...
Nu even bekijken hoe ik de derde dropdown er uit sloop, op zo'n manier, dat ik volgende keer als ik een derde nodig heb wel de derde kan toevoegen.

Probleempjhe nog, in IE cache'd hij mn resultaten onwillekeurig, daarom duurt het vrij lang als iok een waarde wijzig dat de 2e dropdown gevuld wordt?

Is daar een oplossing voor?

Frats · 8 okt 2010

cache? Als het goed is cachet ie dit soort dingen niet... bij iedere wijziging hoort ie opnieuw de AJAX call te maken en de nieuwe data in te vullen.

Heb je em ergens online staan?

thapriest · 8 okt 2010

Stonden leftovers van een testje, die veroorzaakten de problemen..

Nu heb ik hem dus los, dus zo als het script hier ook staat, aan de praat...

Ik wilde hem binnen het ModX framework gebruiken, en daar, je raadt het al doet ie het niet.

2e dropdown wordt niet gevuld, alleen de php code wordt geëxecute

ter info, ook het originele script werkt niet ...

Dropdowns vullen op basis selctie 1e dropdown

thapriest

Gebruiker

Frats

Terugkerende gebruiker

thapriest

Gebruiker

phobia

Terugkerende gebruiker

thapriest

Gebruiker

Frats

Terugkerende gebruiker

thapriest

Gebruiker

Frats

Terugkerende gebruiker

thapriest

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy