login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Via selectbox database (ID) gegevens oproepen zonder pagina refresh (Opgelost)

Offline Ruultje - 16/01/2011 22:03
Avatar van RuultjeNieuw lid Ik heb een onChange selectbox. Nu wil ik, wanneer ik iets selecteer, de gegevens zien van het geselecteerde vanuit de database. Dit wil ik zonder pagina refresh. Hij moet wanneer ik iets selecteer dus de gegevens uit de database kunnen lezen.

Nu lukt dit alleen niet. De 'output' wordt op de pagina gewoon weergegeven. Maar via de database ziet hij niks. Wanneer ik de query echo geeft hij wel de juiste query aan. Maar de resultaten waar ik heen vraag geeft hij niet weer.

Ik heb hieronder (dit is een voorbeeld) de files neergezet. Ik zou dus willen dat hij mij de database gegevens toont van de geselecteerde ID's. Die bij de ID horen.

Javascript
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. 	function onSelectChange() {
  3. 		var dropdown = document.getElementById("personen");
  4. 		var index = dropdown.selectedIndex;
  5. 		var ddVal = dropdown.options[index].value;
  6. 		var ddText = dropdown.options[index].text;
  7.  
  8. 		if(ddVal != 0) {
  9. 			output = "Naam persoon " + ddText;
  10. 			naampers = ddVal;
  11. 		}
  12.  
  13. 		document.getElementById("output").innerHTML = output;
  14. 		document.getElementById("naampers").innerHTML = naampers;
  15. 	}
  16. 	</script>


Select Box
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <select id="personen" onChange="onSelectChange();" class="choice">
  2. <option value="">Select Persoon</option>	
  3. <?php
  4. $sql_usrang = "SELECT persoon_id, persoon_naam FROM personen
  5. GROUP BY persoon_id";
  6. $result_usrang = mysql_query($sql_usrang) or die (mysql_error());
  7. while ($row_usrang = mysql_fetch_array($result_usrang))
  8. {
  9. ?>
  10. 		<option value="<?php echo $row_usrang['persoon_id']; ?>"><?php echo $row_usrang['persoon_naam']; ?></option>					
  11.  
  12. <?php
  13. }
  14. ?>
  15. </select>


De output waarde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. $output = "<span id=naampers>  </span>";


Dit is de SQL
sql code - Bekijk de code zonder highlighting - Klap code in 
  1. $sql_output = "SELECT persoon_leeftijd FROM personen WHERE persoon_id = '$output'";


Dit geeft hij wel aan. Maar zo gauw ik vraag naar leeftijd ziet hij deze niet. Wanneer ik kijk naar het aantal resultaten (mysql_num_rows) geeft hij ook 0 aan.

sql code - Bekijk de code zonder highlighting - Klap code in 
  1. SELECT persoon_leeftijd FROM personen WHERE persoon_id = '3'


Hopelijk is duidelijk wat ik bedoel.

Ik denk dat de <span> voor problemen zorgt.

11 antwoorden

Gesponsorde links
Offline valles10 - 16/01/2011 22:15
Avatar van valles10 HTML interesse kijk eens naar http://api.jquery.com/category/ajax/
Offline Beirensg - 17/01/2011 11:51
Avatar van Beirensg HTML beginner Als ik het goed begrijp wil je via php gegevens opzoeken indien de gebruiker een keuze heeft gemaakt (via de selectbox); en dit zonder refresh van de pagina.

Dit is (zonder ajax) niet mogelijk. php is immers serverside-coding; hetgeen betekent dat php uitgevoerd wordt op de server zelf. Indien de gebruiker een pagina opvraagt moet alle info (dewelke zonder refresh beschikbaar moet zijn) al in de pagina zitten.

Een oplossing is alle info voorladen in (bvb) een verschillende spans. En je maakt de juiste span pas zichtbaar indien een keuze is gemaakt. Dit kan natuurlijk grote pagina's opleveren.
Anders moet je naar AJAX gaan.
Offline Ruultje - 17/01/2011 17:25 (laatste wijziging 18/01/2011 18:11)
Avatar van Ruultje Nieuw lid Dankjewel! Zal eens gaan kijken bij Ajax. Had ik al een beetje naar gekeken maar hoopte alsnog dat het via PHP zou kunnen. Grote pagina's heb ik liever niet. Ik zal eens kijken naar de link.

Met AJAX werkt het. Ik zit nu alleen met één probleem. Hij ververst de hele content. Nu werk ik met een paginasysteem. Mijn hele pagina wordt dus nogmaals getoond. Ik heb daardoor een dubbele header, dubbel menu etc. dat lijkt mij niet de bedoeling.

Kan ik alleen zonder paginasysteem de pagina juist herladen? Hij doet voor de rest alles juist. Ik heb dit.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.         var url = "index.php?content=personen&id="; // The server-side script
  3.        function handleHttpResponse() {   
  4.         if (http.readyState == 4) {
  5.               if(http.status==200) {
  6.                   var results=http.responseText;
  7.               document.getElementById('divCustomerInfo').innerHTML = results;
  8.               }
  9.               }
  10.         }
  11.  
  12.         function requestCustomerInfo() {     
  13.             var sId = document.getElementById("txtCustomerId").value;
  14.             http.open("GET", url + escape(sId), true);
  15.             http.onreadystatechange = handleHttpResponse;
  16.             http.send(null);
  17.         }
  18. function getHTTPObject() {
  19.   var xmlhttp;
  20.  
  21.   if(window.XMLHttpRequest){
  22.     xmlhttp = new XMLHttpRequest();
  23.   }
  24.   else if (window.ActiveXObject){
  25.     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  26.     if (!xmlhttp){
  27.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  28.     }
  29.  
  30. }
  31.   return xmlhttp;
  32.  
  33.  
  34. }
  35. var http = getHTTPObject(); // We create the HTTP Object
  36. </script>
Offline Beirensg - 18/01/2011 18:42
Avatar van Beirensg HTML beginner Kan je index.php eens posten. Ik heb een vermoeden wat je verkeerd doet maar ik ben niet zeker.
Offline Ruultje - 18/01/2011 19:02
Avatar van Ruultje Nieuw lid Index.php heeft alleen include bestanden:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. // Database Connectie
  3. include("connect/config.php");
  4. // Header
  5. include("templates/website/header.php");
  6. // Menu 
  7. include("templates/website/menu.php");
  8. // Paginasysteem 
  9. include("main.php");
  10. // Footer
  11. include("templates/website/footer.php");
  12. ?>



Dit is die pagina (personen) waarop de content geladen moet worden.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form action="index.php?content=personen" method="post">
  2.   <table class="pers">
  3.     <tr>
  4.       <td class="persoonhead"> Persoon </td>
  5.       <td class="persoontext"><select id="txtCustomerId" onChange="requestCustomerInfo();" class="choice">
  6.           <option value="">Selecteer Persoon</option>
  7.           <?php
  8. $sql_usrang = "SELECT persoon_id, persoon_naam FROM personen";
  9. $result_usrang = mysql_query($sql_usrang) or die (mysql_error());
  10. while ($row_usrang = mysql_fetch_array($result_usrang))
  11. {
  12. ?>
  13.           <option value="<?php echo $row_usrang['persoon_id']; ?>"><?php echo $row_usrang['persoon_naam']; ?></option>
  14.           <?php
  15. }
  16. ?>
  17.         </select>
  18.     </p>
  19.     <div id="divCustomerInfo"></div>
  20.  
  21.     <?php echo $sID ?>
  22.  
  23.     <?php
  24. 	$sqltest = "SELECT persoon_leeftijd FROM personen WHERE persoon_id = '$sID'";
  25. 	$resulttest = mysql_query($sqltest);
  26. 	$rowtest = mysql_fetch_array($resulttest);
  27. 	echo $rowtest['persoon_leeftijd'];
  28. 	?>
  29.     <input type="text" value="<?php echo $sID; ?>" />
  30.         </td>
  31.     </tr>
  32.     <?php
  33. }
  34. ?>
  35.   </table>
  36. </form>
Offline Beirensg - 18/01/2011 19:17
Avatar van Beirensg HTML beginner Volgens mij ben je er bijna, je zit verkeerd door index.php aan te roepen in je ajax.

Deze zal (hetgene blijkt uit je uitleg) de gevraagde gegevens retourneren, maar nog veel meer. Namelijk alles wat index.php weergeeft (al die includes), wordt ook terug (via AJAX) aan de server gegeven. En dit alles plaats je in de div.

Hetgeen je het beste doet is de verwerking van de request laten afhandelen door een apart script (apart php.bestandje), deze zal dan instaan om de personen-details op te vragen. Na verwerking zal dit script enkel en alleen de juiste gegevens teruggeven. En deze kan je plaatsen in de div#divcustomerinfo.

dus in je java-script moet je de url veranderen naar bvb:


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var url = "person.php?id="; //content=personen is niet echt nodig


en in person.php voer je de sql uit en je retourneert de data.

Dit zou moeten werken, en nog relatief snel (zeker sneller dan de hele pagina nog eens opvragen  )
Offline Ruultje - 18/01/2011 20:20
Avatar van Ruultje Nieuw lid Ik was er al bang voor ;)

Dankjewel. Is gelukt. Zat alleen nog met andere data via de gekozen ID te tonen.

Ik heb deze nu ook in die DIV gezet. Dit lijkt mij het juiste?
Offline Beirensg - 19/01/2011 09:26
Avatar van Beirensg HTML beginner Ik veronderstel dat het nu werkt, of was je vorige reactie een vraag. Want dan begrijp ik het probleem niet echt goed. 
Offline Ruultje - 20/01/2011 19:02
Avatar van Ruultje Nieuw lid Beide eigenlijk ;)

Het werkt in ieder geval. Zal het neerzetten als opgelost. Ben alleen nog aan het bedenken of het mogelijk is dat sommigen delen niet worden ververst (die dus gewoon blijven staan zoals een paar seconde daarvoor is worden ingevuld.)

Maar goed probleem is opgelost, dat is nu het belangrijkste ;)
Offline Beirensg - 20/01/2011 19:16
Avatar van Beirensg HTML beginner Je vraagt je dus af waarom sommige elementen een paar seconden blijven staan, vooraleer ze gerefreshed worden.
Dit is eigenlijk inherent aan ajax. AJAX (voluit Asynchronous Javascript And XML) voert eigenlijk een vraag uit naar de server, dit zonder de werking van de site te versturen. De gebruiker van de site kan dus nog vele andere dingen tijdens de vraag van AJAX (asynchroon). Dit in tegenstelling tot een refresh van de pagina, waar de gebruiker niets meer kan doen tot de pagina geladen is.
Juist hierdoor zal de content even blijven staan, de tijd dat de server erover doet om het antwoord op te zoeken en terug te zenden.

Je kan dit zichtbaar maken voor de gebruiker door een klein gif-je te laden op de plaats waar de content zal komen. Je doet dit best voor de AJAX-request gemaakt wordt, deze gif zal automatisch verdwijnen als het antwoord terugkomt aangezien je het antwoord op dezelfde plaats terugzet. Dus ik zou je code zo aanpassen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function requestCustomerInfo() {
  2.     document.getElementById("divCustomerInfo").innerHTML="<strong>Loading Data</strong></br><img src=\"pics/loading_anim.gif\"/>";     
  3.     var sId = document.getElementById("txtCustomerId").value;
  4.     http.open("GET", url + escape(sId), true);
  5.     http.onreadystatechange = handleHttpResponse;
  6.     http.send(null);
  7. }


met loading_anim.gif bvb een klein gif-je dat ronddraait (altijd mooi) 
Offline Ruultje - 20/01/2011 20:35
Avatar van Ruultje Nieuw lid Wederom bedankt. zal dit gaan toepassen. Ziet ook leuker uit (vind ik persoonlijk).
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.224s