login  Naam:   Wachtwoord: 
Registreer je!
 Forum

AJAX en database

Offline yanny - 22/10/2006 16:30 (laatste wijziging 22/10/2006 16:31)
Avatar van yannyNieuw lid Hallo,

Een product moet weergegeven worden in een div op dezelfde pagina wanneer iemand het productid invoert in het tekstveld. Het probleem is dus dat het niet wilt gaan werken. Ik hoop dat iemand met kennis van AJAX mij kan helpen.

Hieronder de codes:

Een basis html pagina
  1. <html>
  2. <head>
  3. <script src="selectproduct.js"></script>
  4. </head>
  5. <body>
  6. <p>
  7. <b><a href="overzicht_product.php">Overzicht</a></b><b>&nbsp;|&nbsp;</b>
  8. <a href="product_wijzigen.php">Product wijzigen</a><b>&nbsp;|&nbsp;</b>
  9. <a href="#">Product toevoegen</a><b>&nbsp;|&nbsp;</b>
  10. <a href="#">Product verwijderen</a>
  11. </p>
  12. <form>
  13. Typ het productnummer in:
  14. <input type="text" name="productnummer" onchange="showProduct()">
  15. </form>
  16. <p><div id="productinfo"><b>Hier komt product info.</b></div></p>
  17. </body>
  18. </html>


selectproduct.js
  1. var xmlHttp
  2. //functie die het naar de php pagina verstuurd
  3. function showProduct(str){
  4. xmlHttp=GetXmlHttpObject()
  5. if(xmlHttp==null){
  6. alert ("Browser ondersteunt niet het XMLHTTP object.")
  7. return
  8. }
  9. //een querystring aanmaken
  10. var queryString = "productid="+str;
  11. xmlHttp.open('POST', 'get_product.php', true);
  12. xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  13. xmlHttp.send(queryString);
  14. }
  15.  
  16. //weergeven van productinformatie in de div
  17. function stateChanged(){
  18. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  19. {
  20. document.getElementById("productinfo").innerHTML = xmlHttp.responseText;
  21. }
  22. }
  23.  
  24. //aanmaken xmlhttpobject
  25. function GetXmlHttpObject(){
  26. var objXMLHttp=null
  27. if (window.XMLHttpRequest)
  28. {
  29. objXMLHttp=new XMLHttpRequest()
  30. }
  31. else if (window.ActiveXObject)
  32. {
  33. objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  34. }
  35. return objXMLHttp
  36. }


Get_product.php om informatie uit de database te halen
  1. <?php
  2. include ("config.php");
  3. $productid = $_POST['productid'];
  4. //$productid = "1";
  5. $opdracht = "SELECT * FROM product WHERE productid = '$productid'";
  6. $result = mysql_query($opdracht);
  7. echo "<table>";
  8. echo "<form method='post' action='#'>";
  9. while ($Rij = mysql_fetch_array($result))
  10. {
  11. echo ("<tr><td>Productid:</td><td><input type='text' value='$Rij[productid]' name='productid'></td></tr>\n");
  12. echo ("<tr><td>Productnaam:</td><td><input type='text' value='$Rij[productnaam]' name='productnaam'></td></tr>\n");
  13. echo ("<tr><td>Categorieid:</td><td><input type='text' value='$Rij[categorieid]' name='categorieid'></td></tr>\n");
  14. echo ("<tr><td>Voorraad:</td><td><input type='text' value='$Rij[voorraad]' name='vooraad'></td></tr>\n");
  15. echo ("<tr><td>Prijs:</td><td><input type='text' value='$Rij[prijs]' name='prijs'></td></tr>\n");
  16. echo ("<tr><td>Leverancierid:</td><td><input type='text' value='$Rij[leverancierid]' name='leverancierid'></td></tr>\n");
  17. echo ("<tr><td>Beschrijving:</td><td><input type='text' value='$Rij[beschrijving]' name='beschrijving'></td></tr>\n");
  18. echo ("<tr><td>Afbeelding:</td><td><input type='text' value='$Rij[afbeelding]' name='afbeelding'></td></tr>\n");
  19. echo ("<tr><td>&nbsp;</td><td><input type='submit' value='opslaan'></td></tr>");
  20. }
  21. echo "</form>";
  22. echo "</table>";
  23. mysql_close ($Verbinding);
  24. ?>


De PHP script werkt (dit heb ik uitgetest door productid=1 te zetten).

11 antwoorden

Gesponsorde links
Offline Ibrahim - 22/10/2006 16:37
Avatar van Ibrahim PHP expert volgens mij moet je onkeyup doen, probeer eens dat 
Offline Stijn - 22/10/2006 17:07 (laatste wijziging 22/10/2006 17:09)
Avatar van Stijn PHP expert in je JS code op line 4
xmlHttp=GetXmlHttpObject()

dat gaat niet werken ( `;` vergeten ) en bij je responseText zal hij nog minder werken omdat die niet global staat.
  1. var xmlHttp = GetXmlHttpObject();
  2. //functie die het naar de php pagina verstuurd
  3. function showProduct(str){
  4. //een querystring aanmaken
  5. var queryString = "productid="+str;
  6. xmlHttp.open('POST', 'get_product.php', true);
  7. xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  8. xmlHttp.send(queryString);
  9. }
  10.  
  11. //weergeven van productinformatie in de div
  12. function stateChanged(){
  13. if (xmlHttp.readyState==4 && http.status == 200)
  14. {
  15. document.getElementById("productinfo").innerHTML = xmlHttp.responseText;
  16. }
  17. }
  18.  
  19. //aanmaken xmlhttpobject
  20. function GetXmlHttpObject(){
  21. var objXMLHttp=null;
  22. if (window.XMLHttpRequest)
  23. {
  24. objXMLHttp=new XMLHttpRequest();
  25. }
  26. else if (window.ActiveXObject)
  27. {
  28. objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  29. }
  30. return objXMLHttp;
  31. }


stijn

ps: kijk anders in je JS console van firefox

[edit]

in je php code zou ik dit erbij plaatsen:
  1. <?
  2. ...
  3. $opdracht = "SELECT * FROM product WHERE productid = '$productid'";
  4. $result = mysql_query($opdracht) or die( mysql_error() );
  5. ...
  6. ?>


ook twijfel ik over het bestaan van de readyState=="complete"
Offline yanny - 24/10/2006 07:55
Avatar van yanny Nieuw lid Ik heb het aangepast, maar het werkt nog steeds niet. Ik heb in de Javascript console gekeken maar er was geen relevante fout. Er stond alleen: Fout tijdens het parsen van waarde voor eigenschap 'background-image'. Declaratie genegeerd.
Offline Ruud - 24/10/2006 09:48
Avatar van Ruud HTML interesse Gebruik prototype, dat gaat zoveel makkelijker, veel sneller klaar en geen gezeik met fouten in je code. http://www.scri...-prototype 
Offline yanny - 24/10/2006 10:01 (laatste wijziging 24/10/2006 10:03)
Avatar van yanny Nieuw lid Ik wil het zonder prototype gebruiken, om beter AJAX te beheersen  

Ik heb iets aan de codes veranderd, als ik nu iets intyp dan krijg je het woord gelukt! in de DIV te zien. Dus AJAX verloopt soepeltjes. Alleen het probleem is dat hij niet de formulier laat zien met gegevens uit de database van product. Als je het in PHP afzonderlijk uittest doet hij namelijk wel. Ik ben nu al heel dicht bij het probleem. Dan vraag ik mezelf ook af of de DIV tag meerdere regels kan weergeven, want hij geeft nu alleen de eerste echo regel. Maar op w3schools tutorial AJAX kan dat namelijk wel...  

Hier de nieuwe versie codes:

~HTML formulier~
  1. <html>
  2. <head>
  3. <script src="selectproduct.js"></script>
  4. </head>
  5. <body>
  6. <p>
  7. <b><a href="overzicht_product.php">Overzicht</a></b><b>&nbsp;|&nbsp;</b>
  8. <a href="product_wijzigen.php">Product wijzigen</a><b>&nbsp;|&nbsp;</b>
  9. <a href="#">Product toevoegen</a><b>&nbsp;|&nbsp;</b>
  10. <a href="#">Product verwijderen</a>
  11. </p>
  12. <form name="form1" method="post" action="getproduct.php">
  13. Typ het productnummer in:
  14. <input type="text" name="productid" id="productid" onKeyUp="showProduct()">
  15. <input type="submit" name="submit" value="wijzigen">
  16. </form>
  17. <p><div id="txtHint"><b></b></div></p>
  18. </body>
  19. </html>


~selectproduct.js~
  1. var xmlHttp = GetXmlHttpObject();
  2. //functie die het naar de php pagina verstuurd
  3. function showProduct(str){
  4. if(xmlHttp==null){
  5. alert ("Browser ondersteunt niet het XMLHTTP object.")
  6. return
  7. }
  8. //Open PHP script for requests
  9. xmlHttp.open('get', 'getproduct.php?productid='+str);
  10. xmlHttp.onreadystatechange = stateChanged;
  11. xmlHttp.send(null);
  12. }
  13.  
  14. //weergeven van productinformatie in de div
  15. function stateChanged(){
  16. if (xmlHttp.readyState == 4 && xmlHttp.status==200)
  17. {
  18. var response = xmlHttp.responseText;
  19. if (response){
  20. var ajaxDisplay = document.getElementById("txtHint");
  21. ajaxDisplay.innerHTML = "";
  22. ajaxDisplay.innerHTML = response;
  23. }
  24. }
  25. }
  26.  
  27. //aanmaken xmlhttpobject
  28. function GetXmlHttpObject(){
  29. var objXMLHttp=null
  30. if (window.XMLHttpRequest){
  31. objXMLHttp=new XMLHttpRequest()
  32. }
  33. else if (window.ActiveXObject){
  34. objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  35. }
  36. return objXMLHttp
  37. }


~PHP bestand die het verwerkt~
  1. <?php
  2. include ("config.php");
  3. $productid = $_REQUEST['productid'];
  4. // $productid = "1";
  5. $opdracht = "SELECT * FROM product WHERE productid = '$productid'";
  6. $result = mysql_query($opdracht)or die( mysql_error());
  7. if ($result){
  8. echo "gelukt!";
  9. echo "<table>";
  10. echo "<form>";
  11. while ($Rij = mysql_fetch_assoc($result)){
  12. echo ("<tr><td>Productid:</td><td><input type='text' value='$Rij[productid]' name='productid'></td></tr>");
  13. echo ("<tr><td>Productnaam:</td><td><input type='text' value='$Rij[productnaam]' name='productnaam'></td></tr>");
  14. echo ("<tr><td>Categorieid:</td><td><input type='text' value='$Rij[categorieid]' name='categorieid'></td></tr>\n");
  15. echo ("<tr><td>Voorraad:</td><td><input type='text' value='$Rij[voorraad]' name='vooraad'></td></tr>\n");
  16. echo ("<tr><td>Prijs:</td><td><input type='text' value='$Rij[prijs]' name='prijs'></td></tr>\n");
  17. echo ("<tr><td>Leverancierid:</td><td><input type='text' value='$Rij[leverancierid]' name='leverancierid'></td></tr>\n");
  18. echo ("<tr><td>Beschrijving:</td><td><input type='text' value='$Rij[beschrijving]' name='beschrijving'></td></tr>\n");
  19. echo ("<tr><td>Afbeelding:</td><td><input type='text' value='$Rij[afbeelding]' name='afbeelding'></td></tr>\n");
  20. echo ("<tr><td>&nbsp;</td><td><input type='submit' value='opslaan'></td></tr>");
  21. }
  22. echo "</form>";
  23. echo "</table>";
  24. }
  25. else{
  26. echo "something wrong";
  27. }
  28. mysql_close ($Verbinding);
  29. ?>
Offline Analog - 25/10/2006 10:58 (laatste wijziging 25/10/2006 11:01)
Avatar van Analog HTML interesse Misschien even in de source van je pagina kijken of er iets in staat.
Als daar wel <table><form> staat dan zit de error in de while loop.
Misschien mysql_fetch_array gebruiken maar ik weet niet of dat iets uitmaakt.
Offline yanny - 25/10/2006 16:36
Avatar van yanny Nieuw lid Status: OPGELOST!!  

Ik heb onKeyUp="showProduct()" veranderd in onKeyUp="showProduct(this.value)" en ik heb iets nieuws bijgeleerd. In een DIV geeft AJAX alleen de eerste beste echo weer. Dus heb ik heel de tabel en formulier met velden in een echo gestopt, en hij doet!! Ik heb weer hoop, ik wou het bijna opgeven.  

Hieronder de werkende scripts:

~ HTML formulier ~
  1. <html>
  2. <head>
  3. <script src="selectproduct.js"></script>
  4. </head>
  5. <body>
  6. <p>
  7. <b><a href="overzicht_product.php">Overzicht</a></b><b>&nbsp;|&nbsp;</b>
  8. <a href="product_wijzigen.php">Product wijzigen</a><b>&nbsp;|&nbsp;</b>
  9. <a href="product_toevoegen.php">Product toevoegen</a><b>&nbsp;|&nbsp;</b>
  10. <a href="product_verwijderen.php">Product verwijderen</a>
  11. </p>
  12. <form name="form1" method="post" action="getproduct.php">
  13. Typ het productnummer in:
  14. <input type="text" name="productid" id="productid" onKeyUp="showProduct(this.value)">
  15. <input type="submit" name="submit" value="wijzigen">
  16. </form>
  17. <p><div id="txtHint">&nbsp;</div></p>
  18. </body>
  19. </html>


~selectproduct.js~
  1. var xmlHttp = GetXmlHttpObject();
  2. //functie die het naar de php pagina verstuurd
  3. function showProduct(str){
  4. if(xmlHttp==null){
  5. alert ("Browser ondersteunt niet het XMLHTTP object.")
  6. return
  7. }
  8. //Open PHP script for requests
  9. xmlHttp.open('get', 'getproduct.php?productid='+str);
  10. xmlHttp.onreadystatechange = stateChanged;
  11. xmlHttp.send(null);
  12.  
  13. //weergeven van productinformatie in de div
  14. function stateChanged()
  15. {
  16. var response = xmlHttp.responseText;
  17. if (response){
  18. var ajaxDisplay = document.getElementById("txtHint");
  19. ajaxDisplay.innerHTML = "";
  20. ajaxDisplay.innerHTML = response;
  21. }
  22. }
  23. }
  24. //aanmaken xmlhttpobject
  25. function GetXmlHttpObject(){
  26. var objXMLHttp=null
  27. if (window.XMLHttpRequest){
  28. objXMLHttp=new XMLHttpRequest()
  29. }
  30. else if (window.ActiveXObject){
  31. objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  32. }
  33. return objXMLHttp
  34. }


~PHP bestand die het verwerkt ~
  1. <?php
  2. include ("config.php");
  3. $productid = $_GET['productid'];
  4. //$productid = "1";
  5. $opdracht = "SELECT * FROM product WHERE productid = '$productid'";
  6. $result = mysql_query($opdracht)or die( mysql_error());
  7. if ($result){
  8. while ($Rij = mysql_fetch_assoc($result)){
  9. $productnaam = $Rij[productnaam];
  10. $categorieid = $Rij[categorieid];
  11. $voorraad = $Rij[voorraad];
  12. $prijs = $Rij[prijs];
  13. $leverancierid = $Rij[leverancierid];
  14. $beschrijving = $Rij[beschrijving];
  15. $afbeelding = $Rij[afbeelding];
  16. }
  17. echo "<form><table>
  18. <tr><td>Productnaam:</td><td><input type='text' value='$productnaam' name='productnaam'></td></tr>
  19. <tr><td>Categorieid:</td><td><input type='text' value='$categorieid' name='categorieid'></td></tr>
  20. <tr><td>Voorraad:</td><td><input type='text' value='$voorraad' name='voorraad'></td></tr>
  21. <tr><td>Prijs:</td><td><input type='text' value='$prijs' name='prijs'></td></tr>
  22. <tr><td>Leverancierid:</td><td><input type='text' value='$leverancierid' name='leverancierid'></td></tr>
  23. <tr><td>Beschrijving:</td><td><input type='text' value='$beschrijving' name='beschrijving'></td></tr>
  24. <tr><td>Afbeelding:</td><td><input type='text' value='$afbeelding' name='afbeelding'></td></tr>
  25. <tr><td>&nbsp;</td><td><input type='submit' value='opslaan'></td></tr>
  26. </form></table>
  27. ";
  28. }
  29.  
  30. else{
  31. echo "something wrong";
  32. }
  33. mysql_close ($Verbinding);
  34. ?>
Offline Stijn - 26/10/2006 11:31
Avatar van Stijn PHP expert congratz  
Offline Ibrahim - 26/10/2006 23:56
Avatar van Ibrahim PHP expert dus AJAX zal dit niet weergeven?

  1. <?php
  2.  
  3. if(....)
  4. {
  5. ?>
  6. <table>
  7. <tr>
  8. <td>Test</td>
  9. </tr>
  10. </table>
  11. <?php
  12. }?>
Offline yanny - 27/10/2006 15:42
Avatar van yanny Nieuw lid Nee klopt, dat zal die niet weergeven. Alles moet dus echt in één echo zitten. Wanneer je een tweede echo maakt geeft AJAX het niet weer, alleen de eerste.  
Offline bosgroen - 27/10/2006 16:29
Avatar van bosgroen Gouden medaille

PHP interesse
kvind dat maar bizar van die 1 echo; kheb dat probleem zelf ook nog nooit tegegekomen, raar.

Overigens, ajaxDisplay.innerHTML = ""; is overbodig
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.302s