automatische selectielijsten met AJAX / waarom werkt dit niet?

Fred__ · 26 mei 2011

Hallo,

Ik probeer een webpagina met twee "dropdown lists" te maken zodat de tweede "dropdown list", na een selectie in de eerste "dropdown list", automatisch en zonder de pagina te verversen wordt gevuld met de relevante opties.

Ik ben al een eind op weg maar het werkt niet. De eerste "dropdown list" wordt gevuld met merken uit een database. De tweede "dropdown lists" zou, na het maken van een selectie, gevuld moeten worden met de diverse typen van het geselecteerde merk. Maar de tweede "dropdown list" blijft leeg.

Wie weet waarom het niet werkt?

Bedankt voor het lezen!

Met vriendelijke groeten,

Fred.


<?php
/*  Program name: ap_selectplane.php
*  Description:  Program builds a selection list
*                from the database.
*/
?>

<html>
<head>
<title>Select airplane</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

<script language="javascript" type="text/javascript">
   //Browser Support Code
   function ajaxFunction(){
       var ajaxRequest;  // The variable that makes Ajax possible!

       try{
           // Opera 8.0+, Firefox, Safari
           ajaxRequest = new XMLHttpRequest();
       }catch(e){
           // Internet Explorer Browsers
           try{
               ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
           }catch(e){
               try{
                   ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
               }catch(e){
                   // Something went wrong
                   alert("Your browser doesn't support XMLHttpRequest!");
                   return false;
               }
           }
       }

       return ajaxRequest;
   }

   function updateTypes(){
       var ajaxRequest = ajaxFunction();
       ajaxRequest.onreadystatechange = function(){
           if(ajaxRequest.readyState == 4){
               document.Type.innerHTML = ajaxRequest.responseText;
               document.Type.disabled = false;
           }
       }

       var value = document.Manufacturer.options[document.Manufacturer.selectedIndex].value;
       if(value != ""){
           ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
           ajaxRequest.send('manufacturer='+document.Manufacturer.options[document.Manufacturer.selectedIndex].value);
           ajaxRequest.open("POST", "ap_selecttype.php", true);
           ajaxRequest.send(null);
       }
   }
</script>



</head>
<body>

<br><br>
      U N D E R     C O N S T R U C T I O N
<br><br><br><br>

<br>
<br>

<select name="Manufacturer" onChange="updateTypes();">
<option value="">- Select Manufacturer -</option>
<?php
$db_host = "localhost";
$db_database = "************";
$db_username = "************";
$db_password = "************";

$dbcnx = mysql_connect($db_host,$db_username,$db_password);

mysql_select_db($db_database);

$result = mysql_query("SELECT DISTINCT merk FROM airplanes ORDER BY merk") or die(mysql_error());
while($row = mysql_fetch_array($result)){
 echo "<option value=\"".$row['merk']."\">".$row['merk']."</option>\n";
}
?>
</select>

» » » » »

<select name="Type" disabled="disabled"></select>

</body>
</html>


<option value="">- Select Type -</option>
<?php
$db_host = "localhost";
$db_database = "************";
$db_username = "************";
$db_password = "************";

$dbcnx = mysql_connect($db_host,$db_username,$db_password);

mysql_select_db($db_database);

$result = mysql_query("SELECT DISTINCT type FROM airplanes WHERE merk = '".mysql_real_escape_string($_POST['manufacturer'])."'") or die(mysql_error());
while($row = mysql_fetch_array($result)){
       echo "<option value=\"\">".$row['type']."</option>\n";
}
?>

code_upd.rar

3 juni 2011 aangepast door Fred__

leroy · 26 mei 2011

Ik denk dat het te maken heeft met dat je in je AJAX code een POST doet naar "ap_selecttype.php". En in je php-code staat: $_GET['manufacturer'].

GET en POST zijn niet hetzelfde. Probeer in je php code "$_GET['manufacturer']" eens te vervangen door: "$_POST['manufacturer']" (zonder de dubbele quotes natuurlijk).

Als het goed is moet dat het zijn, mocht het niet werken laat het even weten dan ga ik je code.rar eens goed doorlezen.

Groeten,

Leroy

Fred__ · 27 mei 2011

Ik denk dat het te maken heeft met dat je in je AJAX code een POST doet naar "ap_selecttype.php". En in je php-code staat: $_GET['manufacturer'].
GET en POST zijn niet hetzelfde. Probeer in je php code "$_GET['manufacturer']" eens te vervangen door: "$_POST['manufacturer']" (zonder de dubbele quotes natuurlijk).

Als het goed is moet dat het zijn, mocht het niet werken laat het even weten dan ga ik je code.rar eens goed doorlezen.

Groeten,

Leroy

Beste Leroy,

Hartelijk bedankt voor de reactie.

Ik heb "GET" vervangen door "POST" maar dat maakt nog geen verschil.

Opnieuw hartelijk bedankt voor de reactie en de moeite.

Met vriendelijke groeten,

Fred.

Fred__ · 3 juni 2011

Ik denk dat het te maken heeft met dat je in je AJAX code een POST doet naar "ap_selecttype.php". En in je php-code staat: $_GET['manufacturer'].
GET en POST zijn niet hetzelfde. Probeer in je php code "$_GET['manufacturer']" eens te vervangen door: "$_POST['manufacturer']" (zonder de dubbele quotes natuurlijk).

Als het goed is moet dat het zijn, mocht het niet werken laat het even weten dan ga ik je code.rar eens goed doorlezen.

Groeten,

Leroy

Beste Leroy,

Ik heb "GET" vervangen door "POST". Ook in "code_upd.rar".

Helaas slaag ik er niet in om het probleem te vinden.

Zou je zo vriendelijk willen zijn om er nog eens naar te kijken?

Met vriendelijke groeten,

Fred.

Fred__ · 4 juli 2011

Beste Leroy,

Ik heb "GET" vervangen door "POST". Ook in "code_upd.rar".

Helaas slaag ik er niet in om het probleem te vinden.

Zou je zo vriendelijk willen zijn om er nog eens naar te kijken?

Met vriendelijke groeten,

Fred.

leroy · 26 juli 2011

Sorry voor de late reactie.

Zou je eens kunnen kijken als je de website in IE opent. Welke foutmelding je dan linksonderin in de statusbalk krijgt?

Er zou als het goed is een uitroepteken bij komen te staan. Dubbelklik hier op, en je ziet de foutcode.

Ik zou wel aanraden omdat je niet zo heel veel van AJAX weet iets van JQuery te gebruiken. Dit is heel simpel AJAX code aansturen.

Het zal dan een stuk makkelijker zijn om te doen wat je precies wilt.

Groeten,

Leroy

Fred__ · 15 augustus 2011

Sorry voor de late reactie.
Zou je eens kunnen kijken als je de website in IE opent. Welke foutmelding je dan linksonderin in de statusbalk krijgt?

Er zou als het goed is een uitroepteken bij komen te staan. Dubbelklik hier op, en je ziet de foutcode.

Ik zou wel aanraden omdat je niet zo heel veel van AJAX weet iets van JQuery te gebruiken. Dit is heel simpel AJAX code aansturen.

Het zal dan een stuk makkelijker zijn om te doen wat je precies wilt.

Groeten,

Leroy

Hallo Leroy,

Sorry voor de late reactie; mijn primaire computer ging enkele weken geleden plotseling kapot en het kostte me (door drie defecte moederborden en andere tegenslagen) veel tijd om de machine te repareren en alles opnieuw te installeren.

Bedankt voor de reactie.

Ook als ik de pagina in IE open krijg ik géén foutmelding. De pagina doet "niks".

Zou je zo vriendelijk willen zijn om er nog eens naar te kijken?

Met vriendelijke groeten,

Fred.

leroy · 12 september 2011

In internet explorer zou je in de statusbalk onderin toch echt een foutmelding moeten krijgen bij een javascript/AJAX probleem.

Misschien toch eens kijken naar JQuery. In AJAX ben ik niet super in en gebruik ik liever JQuery.

In JQuery zou je het op de volgende manier kunnen maken.

$('select[name="Manufacturer"]').change(function(){
   $('select[name="Type"]).fadeOut('fast', function(){
       $.post("ap_selecttype.php", { manufacturer: "$('option:selected', this).attr('value')" }, function(data) {
           $('select[name="Type"]).html(data).fadeIn('fast');
       });
   });
});

Ik weet niet of het 100% zal werken, met misschien wat extra dingen toevoegen of verwijderen.

JQuery is vrij makkelijk, je moet alleen wel eerst de JQuery library toevoegen aan je pagina voor dat je JQuery kan gebruiken.

Je gaat er hetzelfde mee om als met JavaScript.

Dit voorbeeld wat ik gaf heeft ook een mooi fading effect. Bij het klikken op een nieuw item wordt de selectbox uitgefade vervangen met nieuwe inhoud en terug ingefade.

Op de website van JQuery zelf staan ook een heleboel voorbeelden hoe je bepaalde dingen kunt gebruiken en toepassen.

Groeten,

Leroy

Fred__ · 14 september 2011

Hallo Leroy,

Bedankt voor de reactie.

Ik zal deze mogelijkheid proberen en je het resultaat laten weten.

Met vriendelijke groeten,

Fred.

Inloggen

automatische selectielijsten met AJAX / waarom werkt dit niet?

Aanbevolen berichten

Fred__

Link naar reactie

Delen op andere sites

leroy

Link naar reactie

Delen op andere sites

Fred__

Link naar reactie

Delen op andere sites

Fred__

Link naar reactie

Delen op andere sites

Fred__

Link naar reactie

Delen op andere sites

leroy

Link naar reactie

Delen op andere sites

Fred__

Link naar reactie

Delen op andere sites

leroy

Link naar reactie

Delen op andere sites

Fred__

Link naar reactie

Delen op andere sites

Welkom op PC Helpforum

Leden statistieken

OVER ONS

SITEMAP

Home

Info

Handleidingen & Tips

Activiteit

Belangrijke informatie