[AJAX] Werkt niet in IE, wel in FF

[Verwijderd]

Geachte lezer,


Waarschijnlijk een veel gestelde vraag, maar ik kon niets op het forum vinden. En van google werd ik ook niet veel wijzer.

Het is namelijk zo dat ik een website maak voor een bedrijf. Deze website moet ervoor zorgen dat het bedrijf er handleidingen aan toe kan voegen. Ze willen niet dat er dubbele handleidingen op de site komen, en daarom laat ik via AJAX, php zoeken naar handleidingen zodra er informatie in de invoervelden wordt gestopt.

Dus, zodra iemand het merk van het apparaat invult, gaat er een request naar zoek.php, en deze geeft dan een aantal resultaten weer van vergelijkbare merken die al in de DB staan.

Dit werkt allemaal perfect in Firefox, maar helaas gebeurd er niets in IE. Hieronder staat het script, iemand een suggestie?

code:

<script language="javascript" type="text/javascript">
<!--
   var request = false;
   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = false;
       }  
     }
   }

   if (!request)
     alert("Fout bij initialisatie - Geen AJAX ondersteuning");

   function getHandleiding() {
     var merk = document.getElementById("merk").value;
     var type = document.getElementById("type").value;
     var url = "zoek.php?merk=" + escape(merk) + "&type=" + escape(type);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText;
         document.getElementById("zoek").innerHTML = response;
       } else
         alert("status is " + request.status);
     }
     else
     {
        document.getElementById("zoek").innerHTML = "<br><div align=\"center\">Een ogenblik geduld alstublieft...<br><img src=\"../../../img/voortgang.gif\"></div>";
     }
   }
-->
</script>

Verder zijn er nog de invoervelden:

code:

<input name="type" type="text" id="type" onKeyUp="getHandleiding();">
enz.

Wat ik wel weet is dat de request gewoon helemaal niet bij "zoek.php" aankomt, omdat hij tijdens het wachten op de 200 code van HTML het onderste stuk code weer moet geven, met een progressbar erin...dit doet hij bij FF wel, en niet bij IE. Er wordt gaat dus niets naar "zoek.php" toe als ik IE gebruik.

Iemand een idee waarom dit gebeurd? Alvast bedankt!

[ Voor 11% gewijzigd door Verwijderd op 16-04-2007 15:49 ]

[Marcj]

Volgens mij mis je nu een } na regel 36. Weet niet of dat het probleem kan zijn?

[soulrider]

Marcj schreef op maandag 16 april 2007 @ 15:52:
Volgens mij mis je nu een } na regel 36. Weet niet of dat het probleem kan zijn?

waarom zou die gesloten moeten worden als er bij die else geen { staat ?

code:

else
         alert("status is " + request.status);

de code staat over 2 regels voor leesbaarheid maar had net zo goed op 1 regel gekunnen
of er moet het volgende van gemaakt moeten worden

code:

else {
         alert("status is " + request.status);
}

aan TS:
je progress bar geeft ie weer zolang ie wacht op readystate ==4, niet terwijl ie wacht op readystatus = 200
zodra die state = 4 is, gaat ie de status checken en verdwijnt de statusbar normaal gezien

zodra die state = 4 wordt krijg je of een "html-injectie" in je pagina, of op die plaats een melding "status is ..."
even je eigen code goed snappen

[ Voor 25% gewijzigd door soulrider op 16-04-2007 16:02 . Reden: qwerty <> azerty ]

[Icelus]

Bevat ‘request’ een geldige waarde op regel 18?
Is ActiveX ingeschakeld in IE?
Welke versie IE gebruikt je?

[Verwijderd]

Icelus schreef op maandag 16 april 2007 @ 15:58:
Bevat ‘request’ een geldige waarde op regel 18?
Is ActiveX ingeschakeld in IE?
Welke versie IE gebruikt je?

1. Geen idee, maar het werkt in Firefox...dus ik ga ervan uit dat dit wel zo is.
2. Ja, heb ik zojuist gedaan en er zijn geen veranderingen
3. IE 7, maar heb het ook getest op IE 6.0

Ik heb de code zojuist even opgeschoond, het ziet er nu beter uit:

code:

<script language="javascript" type="text/javascript">
<!--
   var request = false;
   try 
   {
     request = new XMLHttpRequest();
   } 
   catch (trymicrosoft) 
   {
     try 
     {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } 
     catch (othermicrosoft) 
     {
       try 
       {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } 
       catch (failed) 
       {
         request = false;
       }  
     }
   }

   if(!request)
   {
     alert("Fout bij initialisatie - Geen AJAX ondersteuning");
   }

   function getHandleiding() 
   {
     var merk = document.getElementById("merk").value;
     var type = document.getElementById("type").value;
     var url = "zoek.php?merk=" + escape(merk) + "&type=" + escape(type);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() 
   {
     if (request.readyState == 4) 
     {
       if (request.status == 200) 
       {
         var response = request.responseText;
         document.getElementById("zoek").innerHTML = response;
       } 
       else
       {
         alert("status is " + request.status);
       }
     }
     else
     {
        document.getElementById("zoek").innerHTML = "<br><div align=\"center\">Een ogenblik geduld alstublieft...<br><img src=\"../../../img/voortgang.gif\"></div>";
     }
   }
-->
</script>

Edit:
Ik heb net gekeken, en dit zijn de verschillen in de request variabele.
- Firefox "[object XMLhttpRequest]"
- IE7 "[object]"

Waaruit ik dus haal dat deze variabele leeg schijnt te zijn in IE?

[ Voor 5% gewijzigd door Verwijderd op 16-04-2007 16:14 ]

[Marcj]

_{Sorry voor mijn eerdere opmerking, ik ben zo gewent dat overal accolades staan}

Probeer eens na regel 36 (van je nieuwe code) eens een alert(request) en een alert(url). Bevatten die daar geldige waardes?

[Janoz]

Verwijderd schreef op maandag 16 april 2007 @ 16:06:
1. Geen idee, maar het werkt in Firefox...dus ik ga ervan uit dat dit wel zo is.

Assumptions are the mother of all fuckups . Juist het stuk voor regel 18 wordt afhankelijk van de gebruikte browser verschillend doorlopen. Request is in FF op regel 18 dus per definitie anders dan de request in IE.

[Janoz]

Daarnaast hoort Javascript thuis in WEB en niet in PRG. Ik verplaats hem even.

[Verwijderd]

Ik heb net gekeken, en dit zijn de verschillen in de request variabele.
- Firefox "[object XMLhttpRequest]"
- IE7 "[object]"

En de waarde in de URL variabele klopt, hierin staat gewoon "zoek.php?waardes"

[Marcj]

Ik heb jou code hier net geprobeert met IE 6 (uiteraard met een andere URL, maar je zegt dat die klopt), en hier werkt het perfect. Dus ik denk dat je ergens anders iets fout doet...

[ Voor 7% gewijzigd door Marcj op 16-04-2007 16:33 ]

[Verwijderd]

Hmm, dat is raar....aangezien hij in FF wel goed werkt. Maargoed, hier is het volledige script. Misschien dat jullie het zien, ik ben er al 100 keer doorgekomen, en ook Dreamweaver kan niets vinden.

PHP:

<html>
<head>
    <title>Handleiding toevoegen</title>
    <style>
    body, text{
        font-family:arial;
    }
    </style>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
   var request = false;
   try 
   {
     request = new XMLHttpRequest();
   } 
   catch (trymicrosoft) 
   {
     try 
     {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } 
     catch (othermicrosoft) 
     {
       try 
       {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } 
       catch (failed) 
       {
         request = false;
       }  
     }
   }

   if(!request)
   {
     alert("Fout bij initialisatie - Geen AJAX ondersteuning");
   }

   function getHandleiding() 
   {
     var merk = document.getElementById("merk").value;
     var type = document.getElementById("type").value;
     var url = "zoek.php?merk=" + escape(merk) + "&type=" + escape(type);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() 
   {
     if (request.readyState == 4) 
     {
       if (request.status == 200) 
       {
         var response = request.responseText;
         document.getElementById("zoek").innerHTML = response;
       } 
       else
       {
         alert("status is " + request.status);
       }
     }
     else
     {
        document.getElementById("zoek").innerHTML = "<br><div align=\"center\">Een ogenblik geduld alstublieft...<br><img src=\"../../../img/voortgang.gif\"></div>";
     }
   }
-->
</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <form name="form2" method="post" action="">
  <tr>
    <td width="465" height="19" align="right" valign="middle">Merk installatie</td>
    <td width="50" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="485" valign="middle">
      <select name="merk" id="merk" onChange="getHandleiding();">
      <?PHP
      $sql = mysql_query("SELECT DISTINCT `merk` FROM `installaties` ");
      while($merk = mysql_fetch_array($sql))
      {
        echo "<option>".$merk["merk"]."</option>";
      }
      ?>
      </select>
    </td>
  </tr>
  <tr>
    <td height="19" align="right" valign="middle">Typenummer installatie </td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle">
      <input name="type" type="text" id="type" onKeyUp="getHandleiding();">
    </td>
  </tr>
  <tr>
    <td height="19" align="right" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="22" align="right" valign="middle">Soort handleiding </td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle">
      <select name="type_hand" id="type_hand">
        <option value="1">Gebruikershandleiding</option>
        <option value="2">Technische handleiding</option>
        </select>
    </td>
  </tr>
  <tr>
    <td height="22" align="right" valign="middle">Versie van de handleiding </td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle">
      <input name="versie" type="text" id="versie">
    </td>
  </tr> 
  <tr>
    <td height="19" align="right" valign="middle">Bestand</td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle"><input type="file" name="bestand" id="bestand">&nbsp;</td>
  </tr>  
  <tr>
    <td height="19" align="right" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="24" colspan="3" align="center" valign="middle">
      <input type="submit" name="Submit" value="Handleiding toevoegen">
      <input type="reset" name="Submit2" value="Opnieuw">
      <input type="button" name="Submit3" value="Terug" onClick="history.back();">
    </form></td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<div id="zoek"></div>
</table>

En dan hier de zoek.php

PHP:

<?PHP
if(isset($_SERVER['QUERY_STRING']))
{
    if(isset($_GET['merk']) && isset($_GET['type']) && $_GET['type'] != "")
    {
        $merk = mysql_real_escape_string($_GET["merk"]);
        $type = mysql_real_escape_string($_GET["type"]);
        $inst = mysql_query("SELECT * FROM `installaties` WHERE `merk`='$merk' AND `type` LIKE '%$type%'");
        if(mysql_num_rows($inst) > 0)
        {
            echo"
            <table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
              <tr>
                <td width=\"9\" rowspan=\"2\" valign=\"top\" bgcolor=\"#DE0O29\">&nbsp;</td>
                <td height=\"19\" width=\"95%\" colspan=\"2\" valign=\"top\" bgcolor=\"#DE0O29\"><strong><font color=\"#FFFFFF\">Vergelijkbare handleidingen die al aanwezig zijn: </font></strong></td>
              </tr></table>
              <table>";
            while($installatie = mysql_fetch_array($inst))
            {
                $hand_sql = mysql_query("SELECT `installatie`, `soort`, `versie` FROM handleidingen WHERE installatie='".$installatie['id']."'");   
                if(mysql_num_rows($hand_sql) > 0)
                {
                        while($handleiding = mysql_fetch_array($hand_sql))
                        {
                            if($handleiding["soort"]==1){$soort="Gebruikershandleiding";}else{$soort="Technische handleiding";}
                            echo"
                              <tr>
                                <td height=\"19\" valign=\"top\" bgcolor=\"#E5E5E7\">&nbsp;</td>
                                <td valign=\"top\">&nbsp;</td>
                                <td valign=\"top\">".$installatie['merk']." ".$installatie['type']." - $soort - Versie: ".$handleiding['versie']."</td>
                              </tr>";
                        }
                    }
                }
            }
        }
    }
    echo"</table>";
?>

[Marcj]

Ik zie het al, dit is een fout in IE. Als je een div leeg laat dan zal IE hem blijkbaar verwijderen en kun je daar dus later geen HTML in gooien. Probeer maar eens de <div id="zoek"> te vullen met wat tekst. Dan zul je zien dat hij wel werkt.

[Verwijderd]

Ah, oke

Ik kan er nu niet bij, het is nog een lokale server op het werk...komt later online.

[crisp]

Ik denk niet dat het komt door wat Marcj beweerd aangezien IE wel degelijk lege div's rendered en de innerHTML daarvan laat aanpassen.

Ik vermoed dat het puur komt door je implementatie; elke key-press een request af gaan vuren is immers niet zo'n heel erg handige methode: je genereert veels te veel requests en daarbij is browser-behavior ongedefinieerd op het moment dat je een nieuwe open() doet op een request-object dat z'n vorige requests nog niet eens volledig afgehandeld heeft.

Daarbij is het ook redelijk zinloos om als je eerst een request hebt gedaan voor bijvoorbeeld alle handleidingen die 'a' bevatten vervolgens een nieuw request te gaan doen voor handleidingen die 'ab' bevatten - die kan je immers al uit je eerdere respons filteren. Je zal dan natuurlijk wel moeten zorgen dat je de data in een beetje handiger formaat dan pre-made HTML verstuurd

Last but not least: kijk ook eens naar cacheing - of eigenlijk het voorkomen van cacheing.

Overigens is dit niet de eerste keer dat ik dit verhaal tiep in dit forum...

[soulrider]

volgens mij zit de fout in de request.send(null);

als ik een eigen stukje code bekijk die ik zelf ergens van't net heb:
(en ga gebruiken in een ajax enabled stukje web)

code:

 if(window.XMLHttpRequest){
  request = new XMLHttpRequest();
  request.onreadystatechange = processStateChange;
  request.open("GET",URl,true);
  request.send(null);
 } else if(window.ActiveXObject) {
  request = new ActiveXObject("Microsoft.XMLHTTP");
  if (request) {
   request.onreadystatechange = processStateChange;
   request.open("GET",URL, true);
   request.send();

code mist enkele gesloten haken op't einde maar ik heb niet de volledige functie hier hene gezet enkel het stuk met verschil in ...
zie ik dat bij niet IE: een send(null) wordt gebruikt en bij IE een send()
mogelijk zit daar het verschil ?
(code hierboven is een klein stukje van code beschikbaar op gratis en vrij toegangbare ajax tutorials op 't net - via ibm kwam deze dacht ik)

(en lege div's spelen idd geen enkele rol - geef ze maar eens een achtergrond kleur en breedte en hoogte via css en je zult zien da ze bij elke recente browser netjes worden weergegeven - ook al staat er geen tekst in)

@cripst hieronder:
thanx voor de aanvulling, ik ben er ook nog niet lang meebezig en zelf nog aan't spelen met het idee of ajax wel de goede manier is voor hetgeen ik ermee wil doen. lijkt idd nettere code en makkelijker bruikbaar. en ondertss weet ik dat het weinig verschil maakt

[ Voor 30% gewijzigd door soulrider op 16-04-2007 23:33 . Reden: beetje aanvulling ]

[crisp]

soulrider schreef op maandag 16 april 2007 @ 23:17:
volgens mij zit de fout in de request.send(null);

Nope, die null is correct en zorgt echt niet voor problemen in IE.

Overigens, voor het instantieren van een XMLHttpRequest object is dit naar mijn mening de netste methode:

JavaScript:

if (!window.XMLHttpRequest)
{
    window.XMLHttpRequest = function()
    {
        // http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
        var types = [
            'MSXML2.XMLHTTP.6.0',
            'MSXML2.XMLHTTP.3.0'
        ];

        for (var i = 0; i < types.length; i++)
        {
            try
            {
                return new ActiveXObject(types[i]);
            }
            catch(e) {}
        }

        return undefined;
    }
}

en vervolgens kan je overal gewoon netjes

JavaScript:

var foo = new XMLHttpRequest();

doen

[Marcj]

crisp: ik heb het hier geprobeerd en zag hetzelfde probleem als hem. Echter toen ik wat willekeurige tekst invoerde ("test") werkte het wel. Echt heel erg vaag. Alles werkte perfect, maar de innerHTML werd gewoonweg niet geupdate wanneer de div leeg was. Waar het aan ligt mag Joost weten (misschien dat jij een andere verklaring hebt).

[crisp]

Marcj schreef op dinsdag 17 april 2007 @ 00:04:
crisp: ik heb het hier geprobeerd en zag hetzelfde probleem als hem. Echter toen ik wat willekeurige tekst invoerde ("test") werkte het wel. Echt heel erg vaag. Alles werkte perfect, maar de innerHTML werd gewoonweg niet geupdate wanneer de div leeg was. Waar het aan ligt mag Joost weten (misschien dat jij een andere verklaring hebt).

Misschien lag het aan de snelheid van je typen

[Verwijderd]

Oke, ik heb nu al het bovenstaande geprobeerd, en vooralsnog zonder resultaten helaas.

Ik heb de methode van crisp nog niet geprobeerd, omdat ik niet helemaal weet hoe ik dit moet implementeren in mijn code. Dit is mijn eerste AJAX, en eigenlijk (Op een paar stukken na) mijn eerste JS.

Als ik zoals Marcj zei, het woord "test" invul in de div, wordt deze inderdaad overschreven door IE als ik wat intype, maar hij wordt als het ware gewoon weggehaald. Hij maakt van de div een lege div.

En dan misschien nog een lichtpuntje, zoals ik al eerder vermeldde zitten er verschillen in de request variabele bij beide browsers. Bij firefox staat hier "XMLHttpRequest" en bij IE staat hier niets in...het lijkt me dat het ook daaraan kan liggen toch?

Edit
Ik heb dus een aantal dingen geprobeerd, en ik weet niet wat het veranderde. Maar ik zie nu dus wel het laadscherm zodra ik wat intype. Dus hij krijgt wel de readystate 4 terug, samen met de HTML code 200 van "zoek.php"

[ Voor 13% gewijzigd door Verwijderd op 17-04-2007 08:24 ]

[crisp]

Mmmz:

HTML:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<div id="zoek"></div>
</table>

Dat is natuurlijk invalid HTML; een <table> mag niet direct een <div> bevatten dus toch best kans dat IE daardoor die <div> compleet ignored. (Er mankeert overigens nog wel meer aan je HTML, haal het eens door een validator. Verder misbruik je tables voor layout.)

Toch blijf ik erbij dat je de techniek compleet verkeerd toepast:
1) Voorkom dat je teveel (onnodige) requests doet
2) Voorkom dat je je request-object gaat hergebruiken zolang het voorgaande request nog niet is afgehandeld
3) Gebruik een betere methode om je data te verpakken zoals JSON of XML, dat maakt je applicatie robuuster (scheiding opmaak en content) en flexibeler
4) Zoek eens naar een goede Ajax clientside framework. Tutorials op het web zijn leuk en aardig maar 99% is echt crap.

[ Voor 55% gewijzigd door crisp op 17-04-2007 09:59 ]

[Verwijderd]

De Dreamweaver validator vindt niks dat niet goed is, maar ik zal eens naar een andere validator kijken...
Edit
Heb even gekeken, en er werden inderdaad nogal wat fouten gevonden. Ik heb er inmiddels nog 14 over. Mijn "Toevoegen.php" ziet er nu zo uit:

code:

<!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>
    <title>Handleiding toevoegen</title>
    <style type="text/css">
    body, text{
        font-family:arial;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
   var request = false;
   try 
   {
     request = new XMLHttpRequest();
   } 
   catch (trymicrosoft) 
   {
     try 
     {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } 
     catch (othermicrosoft) 
     {
       try 
       {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } 
       catch (failed) 
       {
         request = false;
       }  
     }
   }

   if(!request)
   {
     alert("Fout bij initialisatie - Geen AJAX ondersteuning");
   }

   function getHandleiding() 
   {
     var merk = document.getElementById("merk").value;
     var type = document.getElementById("type").value;
     var url = "zoek.php?merk=" + escape(merk) + "&type=" + escape(type);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() 
   {
     if (request.readyState == 4) 
     {
       if (request.status == 200) 
       {
         var response = request.responseText;
         document.getElementById("zoek").innerHTML = response;
       } 
       else
       {
         alert("status is " + request.status);
       }
     }
     else
     {
        document.getElementById("zoek").innerHTML = "<br><div align=\"center\">Een ogenblik geduld alstublieft...<br><img src=\"../../../img/voortgang.gif\"></div>";
     }
   }
-->
</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="465" height="19" align="right" valign="middle">Merk installatie</td>
    <td width="50" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="485" valign="middle"><form name="form2" method="post" action="">
      <select name="merk" id="merk" onChange="getHandleiding();">
      <?PHP
      $sql = mysql_query("SELECT DISTINCT `merk` FROM `installaties` ");
      while($merk = mysql_fetch_array($sql))
      {
        echo "<option>".$merk["merk"]."</option>";
      }
      ?>
      </select>
    </td>
  </tr>
  <tr>
    <td height="19" align="right" valign="middle">Typenummer installatie </td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle">
      <input type="text" name="type" id="type" onChange="getHandleiding();" >
    </td>
  </tr>
  <tr>
    <td height="19" align="right" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="22" align="right" valign="middle">Soort handleiding </td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle">
      <select name="type_hand" id="type_hand">
        <option value="1">Gebruikershandleiding</option>
        <option value="2">Technische handleiding</option>
        </select>
    </td>
  </tr>
  <tr>
    <td height="22" align="right" valign="middle">Versie van de handleiding </td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle">
      <input type="text" name="versie" id="versie" >
    </td>
  </tr> 
  <tr>
    <td height="19" align="right" valign="middle">Bestand</td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle"><input type="file" name="bestand" id="bestand">&nbsp;</td>
  </tr>  
  <tr>
    <td height="19" align="right" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="24" colspan="3" align="center" valign="middle">
      <input type="submit" name="Submit" value="Handleiding toevoegen">
      <input type="reset" name="Submit2" value="Opnieuw">
      <input type="button" name="Submit3" value="Terug" onClick="history.back();">
    </form></td>
  </tr>
</table>
<div id="zoek"></div>

Mijn "zoek.php" is nog altijd hetzelfde

1, 2) Ik heb de "onKeyUp" inmiddels vervangen met "onChange". Zo wordt er pas een request gedaan als er daadwerkelijk iets volledig is ingevuld.

3) Ik zal er naar kijken, maar op een later stadium...eigenlijk wil ik dit eerst klaar hebben voordat ik dit ga veranderen.

4) Ik weet er alles van, het duurde dan ook vrij lang voordat ik doorhad hoe ik AJAX aan de praat kreeg. Inmiddels gevonden bij een pagina van IBM

Mogelijk belangrijk
Als ik op regel 38 "alert(request);" toevoeg, zijn er duidelijke verschillen tussen IE en FF, en ik denk nog altijd dat hier het probleem ligt. Als ik de pagina dan open in Firefox krijg ik een melding met daarin "[object XMLHttpRequest]". Als ik de pagina open in IE7 krijg ik de melding "[object]". Waaruit ik concludeer dat de 'request' variabele bij IE7 dus leeg is.

[ Voor 94% gewijzigd door Verwijderd op 17-04-2007 14:12 ]

[crisp]

Verwijderd schreef op dinsdag 17 april 2007 @ 13:42:
4) Ik weet er alles van, het duurde dan ook vrij lang voordat ik doorhad hoe ik AJAX aan de praat kreeg. Inmiddels gevonden bij een pagina van IBM

Als deze opzet daarop gebaseerd is dan was dat artikel van IBM ook niet echt geweldig blijkbaar

Mogelijk belangrijk
Als ik op regel 38 "alert(request);" toevoeg, zijn er duidelijke verschillen tussen IE en FF, en ik denk nog altijd dat hier het probleem ligt. Als ik de pagina dan open in Firefox krijg ik een melding met daarin "[object XMLHttpRequest]". Als ik de pagina open in IE7 krijg ik de melding "[object]". Waaruit ik concludeer dat de 'request' variabele bij IE7 dus leeg is.

Als een variabele leeg is dan krijg je een lege alert. IE toont gewoonweg niet de constructor-naam van een object als je een object alert.

[soulrider]

crisp schreef op dinsdag 17 april 2007 @ 15:41:
[...]

Als deze opzet daarop gebaseerd is dan was dat artikel van IBM ook niet echt geweldig blijkbaar

(waarschuwing: 't volgende komt mss "trollerig" over)
en staat toch "inmiddels gevonden" dus dat is pas na openen van deze topic en dus na het eerste ontwerp van zijn pagina's

maar de tutorial van ibm is vrij compleet als ie compleet gelezen wordt en voldoende mee gespeeld wordt om alles netjes te begrijpen

@Ts echo die request.responseText eens zodra je die hebt voordat je die in var's steekt en gaat echo'en op die manier.

Daar ik begrijp is het trouwens geen repsonseText maar eerder een responseHTML.
wellicht zit het daar ergens. (je stuurt hem toch html-code terug ipv tekst ? en ja IE valt daarover, zoals ik zelf gemerkt heb als ik zoiets probeer met enkel maar javascript die de 'nieuwe html-code' moet aanleveren)

probeer ev. eens het volgende:
vervang

code:

     else
     {
         document.getElementById("zoek").innerHTML = "<br><div align=\"center\">Een ogenblik geduld alstublieft...<br><img src=\"../../../img/voortgang.gif\"></div>";
     }

door

code:

     else
     {
         var tekst = "<br><div align=\"center\">Een ogenblik geduld alstublieft...<br><img src=\"../../../img/voortgang.gif\"></div>";
         document.getElementById("zoek").innerHTML = tekst;
     }

soms wilt het wel eens misgaan met die html-code die hij moet leveren
(en hierdoor kan je ook testen met tekst zonder html-tags - dus zonder div's, br's, ...)
toont ie dat laatste wel zit het daar ergens in)

(ik heb namelijk voor het namaken van een menu iets soortgelijks gedaan - private webpagina's enkel voor mezelf en een beperkte groep ex-collega's

code:

        [...]
    titel = "Digibox<br />\n"
    info = "Hernummer hier zenders, wijzig de taal- en beeldinstellingen, raadpleeg de technische gegevens van de Digibox, enz.\n"
    tekst = titel + info
    break
}

var y = document.getElementById("logo")

y.innerHTML = tekst

voordat IE en FF het correct deden, reden onbekend, maar nu werkt het zo dus zo blijft het.
en de Belgen onder ons herkennen hierin mss een klein beetje van het menu van de digibox/ -corder van Telenet - dat was ook het doel, dat menu in html ;-)

[ Voor 41% gewijzigd door soulrider op 17-04-2007 21:19 . Reden: kleine '...' in mijn voorbeeld code ]

[crisp]

soulrider schreef op dinsdag 17 april 2007 @ 21:08:
[...]


(waarschuwing: 't volgende komt mss "trollerig" over)
en staat toch "inmiddels gevonden" dus dat is pas na openen van deze topic en dus na het eerste ontwerp van zijn pagina's

maar de tutorial van ibm is vrij compleet als ie compleet gelezen wordt en voldoende mee gespeeld wordt om alles netjes te begrijpen

Heb je misschien een linkje daarnaar? Ik kan me herinneren dat ik een tijd terug eens een behoorlijk epistel met opmerkingen en verbeteringen heb doorgestuurd naar IBM mbt een dergelijk artikel - uiteraard nooit meer iets van gehoord...

Daar ik begrijp is het trouwens geen repsonseText maar eerder een responseHTML.

responseHTML bestaat niet, responseXML wel maar dat is hier zeker niet ter zake...

[DeepFreeze.NL]

Misschien dat je wat hebt aan het AJAX script wat ik gebruik. Net gepost :)

[soulrider]

crisp schreef op dinsdag 17 april 2007 @ 21:42:
[...]
Heb je misschien een linkje daarnaar? Ik kan me herinneren dat ik een tijd terug eens een behoorlijk epistel met opmerkingen en verbeteringen heb doorgestuurd naar IBM mbt een dergelijk artikel - uiteraard nooit meer iets van gehoord...

linkje naar part 1
(van de 6 dacht ik - en dan heb je er nog x-tal aanvullingen, voorbeeld toepassingen, ...)

http://www-128.ibm.com/de...ibrary/wa-ajaxintro1.html
(google: ibm, ajax : hit # 1)

[...]

responseHTML bestaat niet, responseXML wel maar dat is hier zeker niet ter zake...

was aan't twijfelen en op't werk had ik niet echt tijd het op te zoeken / uit te testen.
maar idd responseXML is het niet dus responseText moet het wel gedaan krijgen

@TS uwe toevoegen.php wordt toch netjes afgesloten met :

code:

 </body>
</html>

eh, want dat is niet meer zichtbaar in je code.
(maar IE gaat hier niet over vallen, FF en anderen eerder wel)

maar je kan best de gegenereerde html-code eerst validated maken bij w3c, en dan als test je zoek.php eerst wat test laten teruggeven na een pauze van bv 15sec
(zodat je die balk enzo ziet verschijnen)
en dan gaan testen met html-code "in de pijpleiding te steken".
(kwestie van basis in orde te hebben voordat je er extra's bijneemt - nu is het wat debuggen zonder echt weet wat wel en wat niet in orde is)

[ Voor 26% gewijzigd door soulrider op 17-04-2007 22:46 . Reden: + @TS ... ]

[crisp]

soulrider schreef op dinsdag 17 april 2007 @ 22:35:
[...]

linkje naar part 1
(van de 6 dacht ik - en dan heb je er nog x-tal aanvullingen, voorbeeld toepassingen, ...)

http://www-128.ibm.com/de...ibrary/wa-ajaxintro1.html
(google: ibm, ajax : hit # 1)

Thanks. En inderdaad, die tutorial rammelt aan alle kanten, dus ik zou er niet alteveel waarde aan hechten

Anyway, ik was zelf wat code aan het opschonen en heb een simpele 'suggest'-like voorbeeld online gezet: http://therealcrisp.xs4all.nl/meuk/suggest.html

Ja, dit draait op mijn eigen general purpose library en mijn eigen ajax library, maar dat is bij elkaar uncompressed nog geen 20KB. Ik geef hier geen garanties of support op, dus als je het niet begrijpt heb je pech

[Verwijderd]

Beste mensen, wederom bedankt voor alle reacties.

@soulrider: Helaas heeft die vervanging mij niet geholpen.
Ik heb wel de responseText in een alert gezet, en hier zaten ook duidelijke verschillen in. Bij firefox gaf hij hier inderdaad de inhoud terug, met tables en al. Maar IE7 geeft hier weer "<br><br></table>" (terwijl ik dit nergens terug kan vinden in mijn code, ik heb zelfs alle HTML uit de code gehaald bij "zoek.php", en nog gaf hij hier </table> etc.). In IE6 geeft hij helemaal niks weer.

@crisp: Als er zo veel troep en onzin op internet staat betreft AJAX, misschien is het dan een idee dat jij een betere, Nederlandse tut schrijft? En het lijkt erop dat ik pech heb Ik snap niet al te veel van de code die je als voorbeeld gaf.

@DeepFreeze: Ik heb die van W3S een paar maand geleden geprobeerd, maar dat ging jammerlijk mis, ik vond het geen beste tut.

[ Voor 30% gewijzigd door Verwijderd op 18-04-2007 09:33 ]

[crisp]

Verwijderd schreef op woensdag 18 april 2007 @ 09:25:
@crisp: Als er zo veel troep en onzin op internet staat betreft AJAX, misschien is het dan een idee dat jij een betere, Nederlandse tut schrijft? En het lijkt erop dat ik pech heb Ik snap niet al te veel van de code die je als voorbeeld gaf.

Een Ajax-tutorial heb je niet zoveel aan als je geen diepere kennis hebt van javascript, BOM (browser object model) en DOM (document object model) in het algemeen. Zeker als je gaat werken met events en dergelijke komt er vaak nog een hoop bij kijken.

In feite is iets als suggest-functionaliteit toch nog vrij complex als je het echt goed wilt doen...