Waarde aan dropdown toevoegen met jQuery

In deze jQuery tutorial zal ik proberen uit te leggen hoe je een waarde aan een select element kunt toevoegen. Ik ga hier ook een klein stukje AJAX in verwerken, zodat de toegevoegde waarde ook op de server bekend is, en deze meteen als waarde in het select element ingevuld wordt. Dit heeft als handigheid dat wanneer je tijdens het invullen van een formulier een waarde kan toevoegen zonder het hele formulier te vernieuwen, waardoor je alles weer opnieuw moet invullen. Dit verrijkt dus de gebruikers ervaring van de applicatie. Ik ga hierbij gebruik maken van de ingebouwde AJAX functie, de javascript functie prompt en change.

Element toevoegen aan een dropdown

Het toevoegen van een waarde aan een select element kun je doen door de HTML van het element te bewerken, en hierbij een nieuwe waarde toe te voegen:

Optie toevoegen (kijk na het klikken bij de opties, voorbeeld 6 is toegevoegd)

Deze optie voeg ik op de volgende manier toe:

  1. // Selecteer de huidige inhoud van de dropdown
  2. $selectInhoud = $("select").html();
  3.  
  4. // Voeg een nieuwe optie toe
  5. $selectInhoud += '<option value="voorbeeld6">Voorbeeld 6</option>';
  6.  
  7. // Vervang de oude opties door de nieuwe opties
  8. $("select").html( $selectInhoud );

De waarde toevoegen doe ik door middel van een prompt. Deze optie zit al vanaf het begin in javascript, maar wordt steeds minder gebruikt. Het is ook mogelijk om een regulier invoer veld te gebruiken, maar een prompt is in dit voorbeeld makkelijker. Een prompt werkt als volgt:

  1. $naam = prompt('Wat is uw naam?', 'Type hier uw naam');

Klik hier voor het voorbeeld

Deze $naam variabele kun je vervolgens weer gebruiken in andere functie. Ook kun je kijken of er niet op annuleren geklikt is door de variabele te vergelijken met null:

  1. if( $naam == null ) {
  2.   alert('U heeft niks ingevuld!');
  3. }

De waarde versturen via AJAX

Nu we weten hoe een prompt werkt kan dit gecombineerd worden met een AJAX aanroep. Ik maak nu een voorbeeld waarbij een auteur toegevoegd kan worden aan de dropdown. Het PHP bestand ziet er als voorbeeld zo uit:

  1. <?php
  2. /* Laat het script 2 seconden wachten, zodoende is het makkelijker
  3. om te testen wat het script doet wanneer er gewacht moet worden */
  4. sleep(2);
  5.  
  6. /* Geef een willekeurg getal tussen de 0 en 99 terug. In een liveomgeving
  7. zal dit het ID van de laatst toegevoegde waarde in de database zijn */
  8. echo rand(0, 99);
  9. ?>

De AJAX aanroep ziet er als volgt uit:

  1. $auteur_naam = prompt('Wat is de naam van de auteur?');
  2. $.ajax({
  3.         type: 'GET',
  4.         url: 'http://www.noobtutorials.nl/voorbeelden/auteur_toevoegen.php',
  5.         data: 'auteur=' + $auteur_naam,
  6.         beforeSend: function () {
  7.                 $("select[name=voorbeeld2]").after('<img src="http://www.noobtutorials.nl/voorbeelden/loader.gif" alt="laden" id="loader" />');
  8.         },
  9.         success: function (data) {
  10.                 $("img#loader").remove();
  11.                 $output = $("select[name=voorbeeld2]").html();
  12.                        
  13.                 $output += '<option value="' + data + '" selected="selected">' + $auteur_naam + '</option>';
  14.                 $("select[name=voorbeeld2]").html( $output );
  15.         }
  16. });

In dit voorbeeld maak ik gebruik van de functie beforeSend. Deze functie wordt uitgevoerd voordat het AJAX verzoek wordt gedaan. Hier plaats ik dan ook een laad icoontje zodat duidelijk is dat het systeem bezig is (Tip: Op www.ajaxload.info kun je eenvoudig dit soort icoontjes maken). Ook voeg ik in dit voorbeeld selected=\"selected\" toe aan het toegevoegde option element. Dit zorgt ervoor dat deze meteen geselecteerd is wanneer die toegevoegd wordt, wat duidelijkheid naar de gebruiker verschaft. Het resultaat is dit:

Optie toevoegen

De volgende stap is het afvangen wanneer er op annuleren of escape is gedrukt. Nu wordt de optie nog steeds toegevoegd op de server, wat niet de bedoeling is. Zoals hierboven uitgelegd is het eenvoudig om te controleren of de waarde is verstuurd:

  1. $auteur_naam = prompt('Wat is de naam van de auteur?');
  2.  
  3. if($auteur_naam != null) {
  4.         $.ajax({
  5.                 type: 'GET',
  6.                 url: 'http://www.noobtutorials.nl/voorbeelden/auteur_toevoegen.php',
  7.                 data: 'auteur=' + $auteur_naam,
  8.                 beforeSend: function () {
  9.                         $("select[name=voorbeeld2]").after('<img src="http://www.noobtutorials.nl/voorbeelden/loader.gif" alt="laden" id="loader" />');
  10.                 },
  11.                 success: function (data) {
  12.                         $("img#loader").remove();
  13.                         $output = $("select[name=voorbeeld2]").html();
  14.                        
  15.                         $output += '<option value="' + data + '" selected="selected">' + $auteur_naam + '</option>';
  16.                         $("select[name=voorbeeld2]").html( $output );
  17.                 }
  18.         });
  19. }

Op deze manier wordt de AJAX aanroep niet uitgevoerd wanneer dit niet nodig is

De nieuwe waarde in de database opslaan

Nu alles aan de voorkant werkend is, moeten wij ervoor zorgen dat deze ingevoerde waarde ook daadwerkelijk aan de database toegevoegd wordt. Dat kan eenvoudig door de opgegeven waarde als $_GET aan te roepen. Dat werkt als volgt:

  1. if(isset($_GET['auteur']) && !empty($_GET['auteur'])) {
  2.         $sql = sprintf("insert into auteurs (auteur) values ('%s')",
  3.                 mysql_real_escape_string($auteur)
  4.         );
  5.         mysql_query($sql) or die (mysql_error());
  6.         echo mysql_insert_id();
  7. }

De functie mysql_insert_id() geeft het laatst toegevoegd ID in de database terug. Deze waarde wordt in de AJAX functie als waarde in de dropdown geplaatst. Zodoende kunnen deze waardes weer aan elkaar gekoppeld worden wanneer deze uit de database gehaald worden.

Maar wat nu wanneer javascript uitgeschakeld is?

Dit is iets waarmee ook rekening gehouden moet worden, want anders staan er links met een beschrijving die vervolgens niks doen. Dit kan op verschillende manieren gedaan worden:

  • Maak de link van te voren aan, maar wanneer javascript aan staat ervoor zorgen dat de javascript functie wordt uitgevoerd en er niet wordt doorverwezen
  • Voeg de link met behulp van jQuery toe
De 2e optie vergt het minste werk omdat bij de eerste optie een aparte pagina aangemaakt moet worden waar de waarde alsnog ingevoerd dient te worden. Om ervoor te zorgen dat er wel op een link geklikt kan worden, maar de pagina niet geopend wordt kan er gebruik gemaakt worden van return false. Dat ziet er als volgt uit:

Klik hier voor het voorbeeld

De bijbehorende code ziet er als volgt uit:

  1. $("a.antiClick").click( function () {
  2.         $("body").animate({opacity: 0}, 1000, function () {
  3.                 alert("Er is op de link geklikt");
  4.                 $("body").animate({opacity: 1}, 1000); 
  5.         });
  6.        
  7.         return false;
  8. });

Om de link toe te voegen met behulp van jQuery maak ik gebruik van after. Hiermee kan een tekst of een HTML code achter het geselecteerde element plaatsen. Het is hierbij wel belangrijk om de link achter een element toe te voegen vóórdat er functies nieuwe events op de link geplaatst kunnen worden. De code ziet er als volgt uit:

Voorbeeld element

In javascript ziet dat er als volgt uit:

  1. $("span.afterVoorbeeld").after("<a href='http://www.noobtutorials.nl'>Dit is de voorbeeld link</a>");

Slot

Het is belangrijk om het voor je gebruikers zo makkelijk te mogelijk te maken. Zodoende zullen je gebruikers blijven terug keren, en minder fout maken mits allemaal goed opgezet. Hierbij is het ook belangrijk om de gebruiker niet te veel info voor te schotelen wanneer dat niet nodig, en goed te informeren. Wanneer een pagina zwaar op javascript leunt, moet er ook een goede/duidelijke melding zijn dat javascript benodigd is. Dit om te voorkomen dat de gebruikers de pagina niet snappen en naar een andere pagina gaan.

Als bijlage heb ik een werkend voorbeeld toegevoegd.

BijlageGrootte
waarde-aan-drop-down-toevoegen.zip29.49 KB