[AJAX & JS] object probleem - Softwareontwikkeling

woensdag 26 juli 2006 23:51

Acties:

Verwijderd

Topicstarter

Hallo

Ik blijf een object verwacht probleem krijgen maar ik kom er niet uit waar het probleem kan zitten. Na mijn weten zijn mijn objecten en functions juist. Wie kan mij helpen met dit probleem?

Groeten,

Bram

http://www.benerep.net/bnr/test.php

dat is mijn testfile.

BRONCODE test.php:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST PAGE</title>
<script src="js/techniek.js"></script>
</head>
<body>
<table width="740" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="170" height="234" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="170" height="234" valign="top">Kies een Orde:<br />
<select name="orde" onchange="toonGenus(this.value)"> DEZE REGEL GEEFT DIE DE ERROR "object verwacht"
<option value="Hagedissen">Hagedissen </option>
<option value="Slangen">Slangen </option>
<option value="Schildpadden">Schildpadden </option>
<option value="Krokodillen">Krokodillen </option>
<option value="Giftig">Giftig </option>
</select>

<div id="genuslijst"><b>Genussen worden hier getoond</b></div><br />
<div id="soortlijst"><b>Soorten worden hier getoond</b></div><br />
<div id="ondersoortlijst"><b>Ondersoorten worden hier getoond</b></div><br />

</td>
</tr>
</table>
</td>
<td width="570">&nbsp;</td>
</tr>
</table>
</body>
</html>

BRONCODE techniek.js:

JavaScript:

 
// JavaScript Document
var xmlHttp

function toonGenus(orde)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser ondersteunt geen HTTP Request")
return
} 
var url="php/genuslijst.php"
url=url+"?orde="+orde
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function toonSoort(genus)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser ondersteunt geen HTTP Request")
return
} 
var url="php/soortlijst.php"
url=url+"?orde="+orde+"&genus="+genus
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedGenus 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function toonOndersoort(soort)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser ondersteunt geen HTTP Request")
return
} 
var url="php/ondersoortlijst.php"
url=url+"?orde="+orde+"&genus="+genus"&soort="+soort
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedSoort 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("genuslijst").innerHTML=xmlHttp.responseText 
} 
} 

function stateChangedGenus() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("soortlijst").innerHTML=xmlHttp.responseText 
} 
}

function stateChangedSoort() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("ondersoortlijst").innerHTML=xmlHttp.responseText 
} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

[ Voor 18% gewijzigd door Verwijderd op 27-07-2006 00:18 ]

woensdag 26 juli 2006 23:56

Acties:

Snake

Los Angeles, CA, USA

http://www.quirksmode.org/js/select.html

lees dit eens

dan is je probleem zo opgelost

Going for adventure, lots of sun and a convertible! | GMT-8

donderdag 27 juli 2006 00:03

Acties:

crisp

Devver

Pixelated

Gebruik een fatsoenlijke browser met javascript-console en ontdek dat dit een parse-error oplevert:

JavaScript:

1	url=url+"?orde="+orde+"&genus="+genus"$soort="+soort

verder verdient het aanbeveling JS-statements te scheiden met een punt-komma en code-tags te gebruiken hier op het forum

[ Voor 3% gewijzigd door crisp op 27-07-2006 00:04 ]

Intentionally left blank

donderdag 27 juli 2006 00:09

Acties:

Verwijderd

Topicstarter

ok tnx mijn JS is zwaar beroerd. wist dit dus niet... zat stiekem aan php te denken

Kan je me vertellen op welke manier ik toch die database gegevens mee kan geven? Want die heb ik namelijk wel nodig.
Bram

donderdag 27 juli 2006 01:09

Acties:

XWB

Devver

Ik geef even een voorbeeld met toonGenus()

JavaScript:

function GetXmlHttpObject()
{ 
    var objXMLHttp = false;
    
    if (window.XMLHttpRequest)
    {
        objXMLHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    if (objXMLHttp === false)
    {
        alert ("Browser ondersteunt geen HTTP Request");
    } 
    
    return objXMLHttp;
}

function emptyElement(element)
{
    while (element.hasChildNodes()) 
    {
        element.removeChild(element.firstChild);
    }
}

function toonGenus(orde)
{ 
    var xmlHttp = GetXmlHttpObject();
    var url = "genuslijst.php";
    url = url + "?orde=" + orde;
    url = url + "&amp;sid=" + Math.random();
    
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = function()
    {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
        { 
            var result =  xmlHttp.responseText.split("|");
            var element = document.getElementById("genuslijst");
            var selectElement = document.createElement("select");
            selectElement.multiple = "multiple";
            selectElement.style.width = 100 + "px";
            selectElement.style.height = 100 + "px";
            
            emptyElement(element);
            
            for (var i in result)
            {
                var option = document.createElement("option");
                option.value = result[i];
                option.appendChild(document.createTextNode(result[i]));
                selectElement.appendChild(option);
            }
            
            element.appendChild(selectElement);
        }
        else
        {
            alert("Er is iets fout gegaan.");
        }   
    } 
    xmlHttp.send(null);
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST PAGE</title>
</head>
<body>
<table width="740" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="170" height="234" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="170" height="234" valign="top">Kies een Orde:<br />
          <select name="orde" onchange="toonGenus(this.value)">
            <option value="Hagedissen">Hagedissen </option>
            <option value="Slangen">Slangen </option>
            <option value="Schildpadden">Schildpadden </option>

            <option value="Krokodillen">Krokodillen </option>
            <option value="Giftig">Giftig </option>
          </select>
          
          <div id="genuslijst"><b>Genussen worden hier getoond</b></div><br />
          <div id="soortlijst"><b>Soorten worden hier getoond</b></div><br />
          <div id="ondersoortlijst"><b>Ondersoorten worden hier getoond</b></div>
          </td>
      </tr>
    </table>
    </td>
    <td width="570">&nbsp;</td>
  </tr>
</table>
</body>
</html>

De melding "Browser ondersteunt geen HTTP Request" kan je gewoon in GetXmlHttpObject() kwijt. In genuslijst.php kan je met $_GET de waarden van orde en sid opvangen. Aan de hand daarvan moet jij een query opbouwen. De resultaten kan je gewoon als plain text terug zenden en telkens scheiden met een | (mag ook een ander teken zijn). Echter, van zodra je veel meer verschillende resultaten terug laat zenden kan je beter de resultaten in XML formaat terug zenden. Die kan je dan met responseXML opvragen. Verder, innerHTML is vies, gebruik liever het DOM. Wat ik in onreadystatechange doe is eerst de resultaten opvangen en splitsen op | (xmlHttp.responseText.split("|")). Hierdoor krijg ik een array met alle resultaten. Daarna is het een kwestie van met createElement de juiste elementen aan te maken en de array met de resultaten te doorlopen. Uiteindelijk alles appenden aan de div. emptyElement() is een functie om de div telkens weer te legen, omdat er anders na elke selectie een <select> zou bijkomen. Ohja, de variabele xmlHttp kan je maar beter lokaal ipv globaal houden. Je HTML code kan ook een oplapbeurt gebruiken, geen tabellen voor de opmaak enzo.

[ Voor 44% gewijzigd door XWB op 27-07-2006 01:13 ]

March of the Eagles

donderdag 27 juli 2006 01:45

Acties:

Verwijderd

Topicstarter

ok ik heb jou systeem geprobeerd maar ik krijg alert dat er iets fout is gegaan.

En ik moet mij verontschuldigen dat ik van JS eigenlijk bitter weinig af weet.

ik heb dit systeem overgenomen van
http://www.w3schools.com/ajax/ajax_database.asp

Dus ik heb alleen JS aangepast en niet geschreven.

Bram

donderdag 27 juli 2006 09:28

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 27 juli 2006 @ 01:45:
ok ik heb jou systeem geprobeerd maar ik krijg alert dat er iets fout is gegaan.

En ik moet mij verontschuldigen dat ik van JS eigenlijk bitter weinig af weet.

ik heb dit systeem overgenomen van
http://www.w3schools.com/ajax/ajax_database.asp

Dus ik heb alleen JS aangepast en niet geschreven.

Bram

Weer dat w3schools voorbeeld

Er zijn echt veel betere Ajax-voorbeelden te vinden; de code die daar op w3schools gepromoot wordt valt bij mij onder de noemer 'gepruts'

En tsja, als je geen kaas gegeten hebt van javascript in het algemeen dan kan ik alleen maar aanraden je daar meer in te verdiepen of voorlopig gewoon nog even niet zo nodig meedoen met de hele Ajax-hype... Uiteindelijk is het de bedoeling dat je er zelf iets van opsteekt, niet dat wij jouw script gaan fixen

Intentionally left blank

donderdag 27 juli 2006 11:05

Acties:

Verwijderd

Topicstarter

w3schools had net precies wat ik zocht. ik ben nog opzoek naar andere goeie voorbeelden.

En ik gebruik nu AJAX omdat dat de beste optie is voor een applicatie die ik wil maken voor mijn website.

Zo heb ik ook mijn PHP geleerd door er gewoon in te duiken.

Bram

donderdag 27 juli 2006 12:21

Acties:

XWB

Devver

Verwijderd schreef op donderdag 27 juli 2006 @ 01:45:
ok ik heb jou systeem geprobeerd maar ik krijg alert dat er iets fout is gegaan.

En ik moet mij verontschuldigen dat ik van JS eigenlijk bitter weinig af weet.

ik heb dit systeem overgenomen van
http://www.w3schools.com/ajax/ajax_database.asp

Dus ik heb alleen JS aangepast en niet geschreven.

Bram

Heb je de url wel aangepast?

Verder, ga eens debuggen, kijk wat soortlijst.php uitspuugt enzo.

March of the Eagles

donderdag 27 juli 2006 12:34

Acties:

Verwijderd

Topicstarter

soortlijst spuugt wel de <select> uit maar er worden geen variabelen mee gegeven voor de query die in soortlijst.php staat... ik heb ook getest. en de variabele $_GET(genus) zou mee gestuurd moeten worden maar die wordt dus niet meegestuurd....

Soortlijst.php wordt wel uitgevoerd maar HELAAS kan die niets nuttigs omdat het mee sturen van een variabele niet gebeurd.

Ik heb namelijk al aangepast dat als de query niets vindt dat "Geen resultaten" wordt mee gegeven als optie voor de <select> en hij pakt dan bij soortlijst.php wel de onchange() uitvoert maar natuurlijk ook weer geen variabele mee geeft.
Dus de kern van het probleem is de variabelen...

Dus ik had een idee dat ik mogelijk een externe .tmp file zou kunnen maken waar op ipnr. de orde, genus, soort en ondersoort zou worden opgeslagen en aangepast als andere keuzes worden gemaakt... Maar ja... hoe doe je dat??? Want dat zou dan ook weer bij sluiten van het venster verwijderd moeten worden.
En aangezien het mij nog steeds lijkt dat het zonder extern tmp bestand moet kunnen lijkt me dat een nutteloze optie.

Bram

Bram

donderdag 27 juli 2006 12:42

Acties:

XWB

Devver

Als je mijn voorbeeld gebruikt mag soortlijst.php juist geen <select> uitspugen, maar alleen de waarden van de options. De select maak ik nl met het DOM aan. Lees mijn post nog eens opnieuw

March of the Eagles

donderdag 27 juli 2006 12:42

Acties:

Verwijderd

Topicstarter

Mn hoofd knapt van schaamte....

had in de de php files echo "<option value'\"".$varb->soort."\">".$varb->soort; dus de ' veranderd in = en alles doet het gewoon netjes

DOM DOM DOM... ik zat maar in je JS te koekeloeren omdat ik daar weinig verstand van heb en dan is het geen een PHP fout!