login  Naam:   Wachtwoord: 
Registreer je!
 Forum

ajax: xmlhttprequest divid meegeven

Offline smoos - 11/02/2006 11:34 (laatste wijziging 11/02/2006 11:36)
Avatar van smoosPHP gevorderde Ik gebruik het script van nemesiskoen (AJAX: XMLHttpRequest, zijn tutorial) ik zou nu graag het div id mee willen geven zodat ik het script voor meerdere divs kan gebruiken. ik weet echter niet precies hoe het moet.

dit is het gebruikte script:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2.  
  3. function createRequestObject()
  4. {
  5.   var req;
  6.   if(window.XMLHttpRequest)
  7.   {
  8.     req = new XMLHttpRequest();
  9.   } 
  10.   else if(window.ActiveXObject)
  11.   {
  12.     req = new ActiveXObject("Microsoft.XMLHTTP");
  13.   }
  14.   else
  15.   {
  16.     req = NULL;
  17.     alert('Probleem met het aanmaken van hetXMLHttpRequest object');
  18.   }
  19.   return req;
  20. }
  21.  
  22. var http = createRequestObject();
  23.  
  24. function sendRequestSearch(iets) 
  25. {
  26.   http.open('get', 'rprijs.php?zoek='+iets);
  27.   http.onreadystatechange = handleResponseSearch;
  28.   http.send(null);
  29. }
  30.  
  31. function handleResponseSearch()
  32. {
  33.   if(http.readyState == 4 && http.status == 200)
  34.   {
  35.     if(http.responseText)
  36.     {
  37.       document.getElementById("zoek_resultaten").innerHTML = http.responseText;
  38.     } 
  39.     else 
  40.     {
  41.       document.getElementById("zoek_resultaten").innerHTML = " &nbsp; ";
  42.     }
  43.   } 
  44.   else 
  45.   {
  46.     document.getElementById("zoek_resultaten").innerHTML = " &nbsp; ";
  47.   }
  48. }
  49. </script>
  50.  
  51. // hier roep ik hem op
  52. <select onchange="sendRequestSearch(this.value);" name="amount" id="amount" class="dropdown">
  53.  
  54. // en hier de div waar het in komt.
  55. <div align="center" id="zoek_resultaten"> </div>

dit werkt allemaal.
maar nu wil ik dus dat ik het div id moet opgeven
ik heb nu dit:
(bovenste functie staat hier niet bij want die blijft hetzelfde)
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2.  
  3. var http = createRequestObject();
  4.  
  5. function sendRequestSearch(divid, iets) 
  6. {
  7.   http.open('get', 'rprijs.php?zoek='+iets);
  8.   http.onreadystatechange = handleResponseSearch(divid);
  9.   http.send(null);
  10. }
  11.  
  12. function handleResponseSearch(divid)
  13. {
  14.   if(http.readyState == 4 && http.status == 200)
  15.   {
  16.     if(http.responseText)
  17.     {
  18.       document.getElementById(divid).innerHTML = http.responseText;
  19.     } 
  20.     else 
  21.     {
  22.       document.getElementById(divid).innerHTML = " &nbsp; ";
  23.     }
  24.   } 
  25.   else 
  26.   {
  27.     document.getElementById(divid).innerHTML = " &nbsp; ";
  28.   }
  29. }
  30. </script>
  31.  
  32. // hier roep ik hem op
  33. <select onchange="sendRequestSearch('test', this.value);" name="amount" id="amount" class="dropdown">
  34.  
  35. // en hier de div waar het in komt.
  36. <div align="center" id="test"> </div>

maar dit werkt niet
weet iemand hoe het wel werkt?

7 antwoorden

Gesponsorde links
Offline nemesiskoen - 11/02/2006 13:07 (laatste wijziging 11/02/2006 16:20)
Avatar van nemesiskoen Gouden medaille

PHP expert		 Heb een beetje liggen 'kloten' en het is gelukt om er iets van te maken. Zo kan je dus dynamisch meerdere gegevens sturen naar een pagina naar keuze waarvan de inhoud in een div naar keuze komt te staan.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2.  
  3. 	function createRequestObject() {
  4.  
  5. 	   var req;
  6.  
  7. 	   if(window.XMLHttpRequest){
  8. 		  req = new XMLHttpRequest();
  9. 	   } else if(window.ActiveXObject) {
  10. 		  req = new ActiveXObject("Microsoft.XMLHTTP");
  11. 	   } else {
  12. 		  req = NULL;
  13. 		  alert('Probleem met het aanmaken van hetXMLHttpRequest object');
  14. 	   }
  15.  
  16. 	   return req;
  17.  
  18. 	}
  19.  
  20.     var http = createRequestObject();
  21.  
  22.     /* BEGIN IE BUG FIX */
  23.  
  24.     var aDiv = new aDiv();
  25.  
  26.     function setDiv(theDiv) {
  27.  
  28. 		this.theDiv = theDiv;
  29.  
  30. 	}
  31.  
  32. 	function getCurrentDiv() {
  33.  
  34. 		if(this.theDiv != "")	
  35. 			return this.theDiv;
  36. 		else
  37. 			alert('Geen div geset');
  38.  
  39. 	}
  40.  
  41.     function aDiv(theDiv) {
  42.  
  43. 		this.theDiv = theDiv || '';
  44. 		this.set = setDiv;
  45. 		this.getCurrent = getCurrentDiv;
  46.  
  47. 	}
  48.  
  49.     /* EIND IE BUG FIX */
  50.  
  51.     function sendRequest(theDiv, page, gets, values) {
  52.  
  53.        if(gets.length != values.length) {
  54.           alert('sendRequest: arg3 and arg4 != length');
  55.        } else {
  56.  
  57. 		   var pageString = page +'?';
  58.  
  59. 		   aDiv.set(theDiv);
  60. 		   for (i = 0; i < gets.length; i++) {
  61. 			  pageString += gets[i] +'='+ values[i] +'&';
  62. 		   }
  63. 		   http.open('get', pageString);
  64. 		   http.onreadystatechange = handleResponse;
  65. 		   http.send(null);
  66.  
  67. 	  }
  68.  
  69.     }
  70.     function handleResponse() {
  71.  
  72.        if(http.readyState == 4 && http.status == 200){
  73.           if(http.responseText) {
  74.              document.getElementById(aDiv.getCurrent()).innerHTML = http.responseText;
  75.           } else {
  76.              document.getElementById(aDiv.getCurrent()).innerHTML = " &nbsp; ";
  77.           }
  78.  
  79.        } else {
  80.           document.getElementById(aDiv.getCurrent()).innerHTML = " &nbsp; ";
  81.        }
  82.  
  83.     }
  84.  
  85. </script>
  86. <table width="100%">
  87. 	<tr>
  88. 		<td valign="top" width="301">
  89. 			<input type="text" size="50" name="zoek" onkeyup="sendRequest('zoek_resultaten', 'search.php', Array('zoek'), Array(this.value));" />
  90. 		</td>
  91. 		<td valign="top">
  92. 			<div id="zoek_resultaten" style="border:1px solid #000000"></div>
  93. 		</td>
  94. 	</tr>
  95. </table>
Offline smoos - 12/02/2006 00:50 (laatste wijziging 19/02/2006 12:57)
Avatar van smoos PHP gevorderde weer bedankt 

Edit:
Ik wil hier nog iets op weten,

Als er een nieuwe reqeust word gedaan, dan wordt de div leeg, en even later als de request klaar is wordt hij weer gevult met nieuwe informatie.

Ik wou weten of het mogenlijk is dat de div zijn gegevens houd tot de nieuwe gegevens klaar zijn. dus dat hij niet tijdelijk leeg is.

alvast bedankt 
Offline nemesiskoen - 19/02/2006 15:28 (laatste wijziging 19/02/2006 15:34)
Avatar van nemesiskoen Gouden medaille

PHP expert		 Ja dit is mogelijk. De regels verwijderen waar de DIV wordt 'geleegd'.


Voorbeeld:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function handleResponse() {
  2.  
  3.        if(http.readyState == 4 && http.status == 200){
  4.           if(http.responseText) {
  5.              document.getElementById(aDiv.getCurrent()).innerHTML = http.responseText;
  6.              oude_data = http.responseText;
  7.           } 
  8.  
  9.        } 
  10.  
  11.     }

Je merkt het verschil bijna niet maar ik heb het getest met een vertraging en dan zie je duidelijk dat de data blijft staan.
Offline smoos - 19/02/2006 21:37 (laatste wijziging 19/02/2006 21:40)
Avatar van smoos PHP gevorderde Super man 

In FF werkt dit heel goed maar in IE zie ik dat de pagina opgebouwd wordt.... Snap je waarom?
Offline nemesiskoen - 20/02/2006 17:46
Avatar van nemesiskoen Gouden medaille

PHP expert		 Omdat IE anders omspringt met standaarden en javascript en het VBS-based is. En omdat ActiveX (volgens mij) niet 100% gelijk is aan httpRequestObject, dus je zal moeten wachten tot de nieuwe IE (die ondersteuning van httpRequestObject zal bieden).
Offline smoos - 20/02/2006 17:57
Avatar van smoos PHP gevorderde oke bedankt 
Offline pascalaldo - 09/03/2006 15:20
Avatar van pascalaldo Nieuw lid Ik heb de code een beetje aangepast en kreeg dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var url = "XXXX.php?XXX="; // The server-side script
  2. var exit = '0';
  3. function handleHttpResponse() {
  4.   if (http.readyState == 4) {
  5.   }
  6. }
  7. function offlineunload() {
  8. 	if(exit == '0'){
  9. 		document.getElementById('poppetje').src="XXX/XXX.XXX";
  10.   var mode = "standaard";
  11.   http.open("GET", url + escape(mode), true);
  12.   http.onreadystatechange = handleHttpResponse;
  13.   http.send(null);
  14.   		document.getElementById('XXXX').src="XXX/XXX.XXX";
  15. 	}
  16. }
  17. function getHTTPObject() {
  18.   var xmlhttp;
  19.   /*@cc_on
  20.   @if (@_jscript_version >= 5)
  21.     try {
  22.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  23.     } catch (e) {
  24.       try {
  25.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  26.       } catch (E) {
  27.         xmlhttp = false;
  28.       }
  29.     }
  30.   @else
  31.   xmlhttp = false;
  32.   @end @*/
  33.   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  34.     try {
  35.       xmlhttp = new XMLHttpRequest();
  36.     } catch (e) {
  37.       xmlhttp = false;
  38.     }
  39.   }
  40.   return xmlhttp;
  41. }
  42. var http = getHTTPObject(); // We create the HTTP Object

maar ik heb een probleempje, het doet het niet in firefox. Hebben jullie daar een oplossing voor.

Firefox zegt dat http niet bestaat bij 'http.readyState'.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.227s