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.
var xmlHttp
//functie die het naar de php pagina verstuurd
function showProduct(str){
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null){
alert ("Browser ondersteunt niet het XMLHTTP object.")
return
}
//een querystring aanmaken
var queryString = "productid="+str;
xmlHttp.open('POST', 'get_product.php', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(queryString);
}
//weergeven van productinformatie in de div
function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("productinfo").innerHTML = xmlHttp.responseText;
}
}
//aanmaken xmlhttpobject
function GetXmlHttpObject(){
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
var xmlHttp
//functie die het naar de php pagina verstuurd
function showProduct(str){
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null){
alert ("Browser ondersteunt niet het XMLHTTP object.")
var xmlHttp = GetXmlHttpObject();
//functie die het naar de php pagina verstuurd
function showProduct(str){
//een querystring aanmaken
var queryString = "productid="+str;
xmlHttp.open('POST', 'get_product.php', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(queryString);
}
//weergeven van productinformatie in de div
function stateChanged(){
if (xmlHttp.readyState==4 && http.status == 200)
{
document.getElementById("productinfo").innerHTML = xmlHttp.responseText;
}
}
//aanmaken xmlhttpobject
function GetXmlHttpObject(){
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
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.
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...
var xmlHttp = GetXmlHttpObject();
//functie die het naar de php pagina verstuurd
function showProduct(str){
if(xmlHttp==null){
alert ("Browser ondersteunt niet het XMLHTTP object.")
return
}
//Open PHP script for requests
xmlHttp.open('get', 'getproduct.php?productid='+str);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
//weergeven van productinformatie in de div
function stateChanged(){
if (xmlHttp.readyState == 4 && xmlHttp.status==200)
{
var response = xmlHttp.responseText;
if (response){
var ajaxDisplay = document.getElementById("txtHint");
ajaxDisplay.innerHTML = "";
ajaxDisplay.innerHTML = response;
}
}
}
//aanmaken xmlhttpobject
function GetXmlHttpObject(){
var objXMLHttp=null
if (window.XMLHttpRequest){
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject){
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
var xmlHttp = GetXmlHttpObject();
//functie die het naar de php pagina verstuurd
function showProduct(str){
if(xmlHttp==null){
alert ("Browser ondersteunt niet het XMLHTTP object.")
Analog - 25/10/2006 10:58 (laatste wijziging 25/10/2006 11:01)
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.
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.
var xmlHttp = GetXmlHttpObject();
//functie die het naar de php pagina verstuurd
function showProduct(str){
if(xmlHttp==null){
alert ("Browser ondersteunt niet het XMLHTTP object.")
return
}
//Open PHP script for requests
xmlHttp.open('get', 'getproduct.php?productid='+str);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
//weergeven van productinformatie in de div
function stateChanged()
{
var response = xmlHttp.responseText;
if (response){
var ajaxDisplay = document.getElementById("txtHint");
ajaxDisplay.innerHTML = "";
ajaxDisplay.innerHTML = response;
}
}
}
//aanmaken xmlhttpobject
function GetXmlHttpObject(){
var objXMLHttp=null
if (window.XMLHttpRequest){
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject){
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
var xmlHttp = GetXmlHttpObject();
//functie die het naar de php pagina verstuurd
function showProduct(str){
if(xmlHttp==null){
alert ("Browser ondersteunt niet het XMLHTTP object.")
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.