Ajax GetElementById IE Error

[Verwijderd]

Heren,

Ik ben net begonnen met Ajax en wil graag een dynamisch menu maken. Een deel ervan is te zien op http://chamin.mediaheads.nl/babybase.php...de selectboxen moeten onchange gevuld worden. Nu gebeurd dit ook mooi in Firefox maar IE geeft de melding dat de getElementById null of geen object is. Het schijnt een bug te zijn van IE maar ik kan de workaround niet vinden. Hilfe bittehh

mijn ajax javascript:

code:

function xmlreq(req,div, phpurl)
{  
    div = div;
    section = div;
    xhr = req; 
    url = phpurl;
    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e) 
    {
        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP');    }
        catch (e2) 
        {
          try {  xhr = new XMLHttpRequest();     }
          catch (e3) {  xhr = false;   }
        }
     }
   xhr.onreadystatechange = statechange;
   xhr.open("GET", url,  true); 
   xhr.send(null); 
   function statechange()
    { 
         if(xhr.readyState  == 4)
         {      
                document.getElementById(""+section+"").innerHTML= xhr.responseText;
         }else{
            document.getElementById(""+section+"").innerHTML= "loading..."
            }
    }; 
}

[Verwijderd]

Gebruik prototype of een andere library, dat scheelt je heel wat gedoe.

[Verwijderd]

thnx maar ook andere suggesties?

[Verwijderd]

Nee, je moet gewoon niet moeilijk doen en een javascript library gebruiken die de standaard wat vervelende implementatie van XHR's wat eenvoudiger maakt. Mensen die vanaf scratch beginnen met deze stof lopen altijd tegen dezelfde problemen aan.

[BCC]

Prototype en Scriptaculous zijn je vriendjes. Je kan natuurlijk ook zelf alle cross browser ellende implementeren

[Verwijderd]

Verwijderd schreef op zondag 03 februari 2008 @ 15:58:
Nee, je moet gewoon niet moeilijk doen en een javascript library gebruiken die de standaard wat vervelende implementatie van XHR's wat eenvoudiger maakt. Mensen die vanaf scratch beginnen met deze stof lopen altijd tegen dezelfde problemen aan.

dan lijkt me een library gebruiken helemaal niet leerzaam

prototype is een vieze library, veel te bloated voor als je alleen wat httprequests wil doen. Bovendien vervuilt het je scripting omgeving aan alle kanten en levert beginners weer nieuwe problemen op daardoor ('hoe komt die "each" member in m'n array?')

@TS het httprequest object is niet de oorzaak van je probleem. Het lijkt me nuttiger te weten wat er in je section variabele staat. En hoe of dat inderdaad overeenkomt met een id in je document (en niet bijvoorbeeld ook met aan name oid)

[ Voor 15% gewijzigd door Verwijderd op 03-02-2008 16:15 ]

[Verwijderd]

Ik snap dat er hulpjes zijn en ik ben ook niet vies om ze te gebruiken...echter wat kennis van de materie vind ik niet verkeerd.

@mophor ik roep dus de select elementen aan die een id hebben met de waarde x+1, x+2 of x+3 (waar x een referentie waarde is voor de db). Verder komen deze waardes niet voor in name attributen van elementen. Ik heb wel geprobeerd om beide attributen id en name dezelfde waarde te geven om zo het probleem op te lossen maar dit lukte niet. Als laatste heb ik geprobeerd om alles in id's te houden en dmv split de te gebruiken variabele naar boven te halen. Dit werkt wederom alleen in FF.

Ik heb nu een alert toegevoegd van "section"...

[ Voor 19% gewijzigd door Verwijderd op 03-02-2008 16:35 ]

[crisp]

Verwijderd schreef op zondag 03 februari 2008 @ 16:26:
[...] ik roep dus de select elementen aan die een id hebben met de waarde 1, 2 of 3.
[...]

id's mogen niet puur numeriek zijn.

Verder valt er aan je 'implementatie' nog wel behoorlijk wat af te dingen. Waarom declareer je je variabelen niet in de functiescope maar hou je ze global? Wat is 'req' voor parameter? Waarom test je eerst op het proprietary ActiveXObject als je weet dat zelfs IE7 tegenwoordig een 'native' XHR implementatie heeft? Waarom ken je je onreadystatechange handler al toe voor de open() (in sommige browsers zal een 2e open op dezelfde XHR instance je handler overschrijven).

[Verwijderd]

@crisp: de dingen die je opsomt heb ik aan de hand van posts in het GOT forum geprobeerd..je wordt moedeloos op een gegeven moment het heeft overigens niets veranderd aan de werking..

in req sla ik de naam van de functie op die aangeroepen wordt was een hulpje...

[ Voor 18% gewijzigd door Verwijderd op 03-02-2008 16:42 ]

[Verwijderd]

Ik heb niet alle code doorgelezen, maar het lijkt erop dat het ID niet bestaat. Waarom dat alleen in IE zo is, weet ik ook niet.

[Johnny]

En waarom doe je dit:

JavaScript:

document.getElementById(""+section+"")

in plaats van:

JavaScript:

document.getElementById(section)

?

[crisp]

Als je nu eens begint door init(); te vervangen door window.onload=init;

Maar ergens moet ik Cheatah wel gelijk geven. Met dit soort copy-paste code leer je eigenlijk ook niet veel (nou ja, hooguit hoe het niet moet)

[ Voor 51% gewijzigd door crisp op 03-02-2008 16:47 ]

[Verwijderd]

@Johnny: ook dit had ik gelezen in een draadje op tweakers....het was eerst inderdaad ook zo. ik heb nu weer teruggezet: getElementById(section).

[Verwijderd]

Ik heb wat smith heeft gepost getest maar ik krijg wel alert terug wanneer ik

document.forms['testform'].elements[div].id opvraag

[f.v.b]

Het is ook een bug in Firefox. Kijk maar eens in de error console.

Je roept in de head van je pagina javascript functies aan die elementen in de body willen vullen. Omdat de head eerder geladen wordt dan de body, bestaan de elementen nog niet op het moment dat de javascript wordt uitgevoerd.

Waarschijnlijke oplossing: roep 'init();' pas aan het eind van de body aan. Of doe iets met window.onload.

[Verwijderd]

ik zie geen errors meer maar het heeft ook geen resultaat.

Ik heb in de dom inspector ook de elementen gecheckt en die hebben de juiste id's...

"ik begraip'r nix vahn!"

[f.v.b]

Probeer eens:

code:

if(xhr.readyState == 4)
{
   document.getElementById("menu").innerHTML= xhr.responseText;
} else {
   document.getElementById("menu").innerHTML= "loading...";
}

Als dit wel werkt dan leg ik wel uit waarom...

[Verwijderd]

Hij vult nu wel het hetgeen in (plain text) wat in de select zou komen te moeten staan...dus IE vindt het id toch niet?

leg deze n44b maar eens uit hoe dat zit

[ Voor 6% gewijzigd door Verwijderd op 03-02-2008 20:14 ]

[f.v.b]

Verwijderd schreef op zondag 03 februari 2008 @ 18:32:
Hij vult nu wel het hetgeen in (plain text) wat in de select zou komen te moeten staan...dus IE vindt het id toch niet?

Hmmm, deze zin begrijp ik niet. Definieer 'hij'. 'nu' en 'hetgeen'
Ik zie nu wat je bedoelt.

Na wat klikken in Firefox, zie ik dat je id's gebruikt in de vorm van '17+2'. Volgens mij mogen id's alleen letters, cijfers bevatten (en vast nog hyphen en/of underscore), en moeten ze met een letter beginnen.

Betekent het dat mijn bovenstaande suggestie iets verbeterd heeft? Als dat het geval is dan komt het doordat de variabele 'section' niet bekend is binnen de functie statechange. De manier waarop je de functie statechange hebt gedefinieerd (binnen de functie xmlreq waarin de variabele 'section' wel bekend is), zou het tegendeel doen vermoeden. Ik ken deze constructie niet goed genoeg om hier iets zinnigs over te durven zeggen.

Ik zie nu ook dat mijn eerdere suggestie niet gaat werken.

Nog even een tip: Mocht je nog niet veel ervaring met javascript hebben, begin dan niet direct met Ajax.

DOM, browsers en plain-old-javascript zijn al een uitdaging op zichzelf. Door er ook nog eens de dimensie tijd bij te betrekken maak je het jezelf wel heel erg moeilijk.

[ Voor 13% gewijzigd door f.v.b op 03-02-2008 22:38 ]

[Verwijderd]

dit is toch gewoon een nette closure?

[f.v.b]

Verwijderd schreef op zondag 03 februari 2008 @ 22:22:
dit is toch gewoon een nette closure?

ik ga maar eens wat googlen op closures. Zodra het kwartje een keer valt zijn ze eigenlijk heel erg logisch.

[Verwijderd]

Hmm damn, ik blijf zoeken naar de oplossing voor dit probleem. Mocht iemand het vinden...ik hoor het graag

thnx folks.

@ f.v.b. de materie is inderdaad niet ineens te doorgronden maar erg interessant...m.a.w. ik ga lekker koppig verder stoeien misschien nog tips voor een goede library?

[ Voor 8% gewijzigd door Verwijderd op 03-02-2008 23:34 ]

[H004]

Verwijderd schreef op zondag 03 februari 2008 @ 23:32:
misschien nog tips voor een goede library?

Mootools. Erg krachtig, makkelijk en volledig. En je kan zelf bepalen welke onderdelen van de library je ook daadwerkelijk wil gaan gebruiken/downloaden.

[Toolskyn]

Mootools, Prototype (en Scriptaculous daarbij) en jQuery zijn eigenlijk de meest gebruikte javascript frameworks. Allemaal hebben ze zo hun voordelen en nadelen, ik zou zeggen: kies degene die het makkelijkste voor je werkt en het beste past bij wat je wil.

[Verwijderd]

Ik krijg in FF dezelfde foutmelding.

Is het geen scope-probleem?

[f.v.b]

Verwijderd schreef op zondag 03 februari 2008 @ 23:32:
@ f.v.b. de materie is inderdaad niet ineens te doorgronden maar erg interessant...m.a.w. ik ga lekker koppig verder stoeien misschien nog tips voor een goede library?

Ik heb zelf een keer wat met Scriptaculous gedaan. Toen ben ik er ook met een debugger ingedoken. Ergens werd een exit() functie aangeroepen voor de init() functie. Nadat ik dat verholpen had, stopte mijn script met werken. Ik werd ook niet vrolijk van regels democode van 140 karakters lang. Voor mij was het toen exit() Scriptaculous.

Collega's van mij zijn razend enthousiast over Mootools. Stukken Ajax code die ik ooit eens geschreven had, waren door 5 regels code van Mootools te vervangen. Dat is makkelijker en moeilijker... Het vinden van de juiste 5 regels code blijft natuurlijk lastig.

Om terug te komen bij jouw probleem: Laat Ajax even voor wat het is en maak eerst je javascript werkend door de aanroepen van de functies achter buttons te hangen:

code:

  <input type="button" onclick="stap1();" value="Stap 1">
  <input type="button" onclick="stap2();" value="Stap 2">

Zorg er dan eerst voor dat die functies op alle browsers goed werken. Bepaal daarna of je alle benodigde informatie al direct in de pagina kan zetten in een javascript array, of dat je echt met Ajax moet werken.

Mocht verderop iets weer niet blijken te werken, probeer het probleem dan weer terug te brengen tot een heel erg simpele testcase. Het is vaak eenvoudiger om iets moeilijks wat niet werkt terug te brengen naar iets simpels wat niet werkt en dat dan op te lossen, dan om iets moeilijks wat niet werkt direct om te zetten naar iets moeilijks wat wel werkt.

In IE7 werkt je pagina overigens eens in de tien keer. Als ik bij de eerste javascript error, de Microsoft Script Debugger opstart, en vervolgens een alert(document.body) uitvoer, dan blijk de body nog niet (niet meer?) te bestaan. Laat ik vervolgens het script verder lopen dan krijg ik eens in de tien keer je menu's te zien. De overige negen keer krijg ik nog drie of vier errors en daarna is het afgelopen.

Het lijkt er dus echt op dat de <div id="menu"> nog niet bestaat op het moment dat de functie de eerste keer word aangeroepen. Verplaats je script naar het eind van de body en volgens mij heb je dan de eerste hobbel genomen. De menu's werken vervolgens nog steeds niet in IE, maar dat is ook heel goed zonder Ajax te debuggen. Zie mijn verhaal hierboven.