Ga naar inhoud

automatische selectielijsten met AJAX / waarom werkt dit niet?

Fred__
 Delen

Aanbevolen berichten

Fred__ Groentje

Fred__

Geplaatst:
Geplaatst: (aangepast)

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

aangepast door Fred__
leroy Mentor

leroy

Geplaatst:
Geplaatst:

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__ Groentje

Fred__

Geplaatst:
  • Auteur
Geplaatst:
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__ Groentje

Fred__

Geplaatst:
  • Auteur
Geplaatst:
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.

  • 1 maand later...
Fred__ Groentje

Fred__

Geplaatst:
  • Auteur
Geplaatst:

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.

  • 4 weken later...
leroy Mentor

leroy

Geplaatst:
Geplaatst:

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

  • 3 weken later...
Fred__ Groentje

Fred__

Geplaatst:
  • Auteur
Geplaatst:
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.

  • 4 weken later...
leroy Mentor

leroy

Geplaatst:
Geplaatst:

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

 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.