[JS] foutmeldingen bij het gebruik van Ajax*

[Verwijderd]

Ben al heel de morgen bezig met een cross browser probleem in een script.

Het betreft dus een redelijk uitgebreid zoek script waarbij d.m.v. AJAX de uitklapmenu's dynamisch geladen worden zonder refresh.

In Firefox werkt het script perfect maar in IE6 geeft hij een fout. Het lijkt een beetje op het probleem wat deze persoon beschrijft:
klik

Eerst kreeg ik heel de tijd foutmeldingen over getElementById op lijn 9, nu ergens in de functie createGebieden() de foutmelding: 'obj.options.length' is leeg of geen object

Gedeelte van het script waar het om gaat:

JavaScript: 10

   var ajax = new sack();

   function getCityList(sel)
   {
      var lid = document.mainform.lid.options[document.mainform.lid.selectedIndex].value;
      
      document.mainform.gebied.disabled=false;
      var gebied = document.getElementById("gebied");
      gebied.length = 0;
      document.mainform.gebied.disabled=true;

      var landid = lid;
      ajax.requestFile = 'getGebieden.php?landid='+landid;
      ajax.onCompletion = createGebieden;
      ajax.runAJAX();
   }

   
   function createGebieden()
   {
        var obj = document.getElementById('gebied');
        eval(ajax.response);  
      
        if (document.mainform.gebied.value=='')
        {    
            obj.options[obj.options.length] = new Option('Alle gebieden','');
        }  
        
   }

Heb echt al vanalles geprobeerd, het moet iets kleins zijn aangezien het in FF wel werkt maar ik vindt het niet. Mijn excuses voor de onoverzichtelijke code, door al dat getest wordt het er niet beter op.

[ Voor 2% gewijzigd door Verwijderd op 07-02-2007 16:59 . Reden: Functie createPeriodes vervangen door createGebieden..... ]

[BtM909]

Aangezien je geen kant en klare testcase oplepelt, wat roep je in welke volgorde aan en waar gaat het dan mis?

---

En probeer volgende keer een iets beschrijvendere topictitel te verzinnen. Simpelweg alle mogelijke talen in je topictitel + probleem zegt ook niks over je werkelijke probleem he

[ Voor 46% gewijzigd door BtM909 op 07-02-2007 14:17 ]

[Verwijderd]

Ik selecteer het uitklapmenu Land (name=lid id=lid), die value zet hij in de variabele lid.

De variabele lid wordt naar getGebieden.php gestuurd, deze voert een query uit met als resultaat:

PHP: getGebieden.php

echo "obj.options[obj.options.length] = new Option('$gebied','$gid');\n";

Vervolgens gaat de functie createGebieden() aan de slag.

[ Voor 9% gewijzigd door Verwijderd op 07-02-2007 14:19 ]

[crisp]

eval wordt in de global context uitgevoerd. In die context is je variabele 'obj' natuurlijk niet bekend - die is immers local binnen de context van createGebieden.

Verder vind ik dit ook wel een smerige manier van data verwerken; als je je PHP nou gewoon een (bijvoorbeeld) JSON-serialized object laat teruggeven met daarin enkel je data en het toevoegen van de optie gewoon in je functie zelf afhandeld dan heb je al een veel betere en flexibelere opzet

[Verwijderd]

crisp schreef op woensdag 07 februari 2007 @ 17:42:
eval wordt in de global context uitgevoerd. In die context is je variabele 'obj' natuurlijk niet bekend - die is immers local binnen de context van createGebieden.

Verder vind ik dit ook wel een smerige manier van data verwerken; als je je PHP nou gewoon een (bijvoorbeeld) JSON-serialized object laat teruggeven met daarin enkel je data en het toevoegen van de optie gewoon in je functie zelf afhandeld dan heb je al een veel betere en flexibelere opzet

Beste crisp, bedankt voor de reactie. Dat het een smerige manier is kan zijn, maar bij gebrek aan beter... Om nu op de JSON tour te gaan...het script werkt in Firefox, dus een kleine aanpassing en in IE werkt het ook en dan is het script klaar.

Is er geen manier om ervoor te zorgen dat de variabele 'obj' ook in de global contect bekend is?

[ Voor 8% gewijzigd door Verwijderd op 08-02-2007 10:25 ]

[crisp]

De JSON-tour is niet zo ingewikkeld hoor. Als je clientside nou gewoon deze JS gebruikt en serverside het volgende doet:

PHP:

echo <<<JSON
{
  "gebied": "$gebied",
  "gid": "$gid"
}
JSON;

dan kan je vervolgens in je applicatie dit doen:

JavaScript:

var obj = document.getElementById('gebied');
var nieuwgebied = ajax.response.parseJSON();
obj.options[obj.options.length] = new Option(nieuwgebied.gebied, nieuwgebied.guid);

[Blaise]

obj declaren in je global omgeving?

JavaScript:

var obj = '';

[crisp]

Blaise schreef op donderdag 08 februari 2007 @ 10:59:
obj declaren in je global omgeving?

JavaScript:

var obj = '';

bah, waarom de global namespace onnodig vervuilen?

[Blaise]

Omdat dit dan werkt

Is er geen manier om ervoor te zorgen dat de variabele 'obj' ook in de global contect bekend is?

[crisp]

Blaise schreef op donderdag 08 februari 2007 @ 11:00:
Omdat dit dan werkt


[...]

pfft, getroost ik me daarvoor de moeite om een beter alternatief aan te dragen dan deze vieze manier van werken?

[Blaise]

Ja dat is het nadeel van zulke oplossingen, die vergen meer typwerk en dan ben je soms net te laat

Overigens vind ik het bij xmlhttprequests makkelijker werken om Javascript te generaten met een serverside script en die uit te voeren met eval(), dan om voor elke request een datahandler te bouwen. Bij grotere sites is zoiets als JSON handig voor het overzicht en onderhoud, maar voor sites die beperkt gebruik maakt van xmlhttprequests, voor relatief eenvoudige dingen, voldoet een eval oplossing.

[WormLord]

crisp schreef op donderdag 08 februari 2007 @ 11:04:
[...]

pfft, getroost ik me daarvoor de moeite om een beter alternatief aan te dragen dan deze vieze manier van werken?

Gelukkig wel, zodat anderen die dit topic lezen dan zien hoe het op een nette manier kan .

[BtM909]

Blaise schreef op donderdag 08 februari 2007 @ 12:11:
Overigens vind ik het bij xmlhttprequests makkelijker werken om Javascript te generaten met een serverside script en die uit te voeren met eval(), dan om voor elke request een datahandler te bouwen. Bij grotere sites is zoiets als JSON handig voor het overzicht en onderhoud, maar voor sites die beperkt gebruik maakt van xmlhttprequests, voor relatief eenvoudige dingen, voldoet een eval oplossing.

MAar als je zo'n datahandlers bouwt, dan gebruik je hem toch juist voor al je afhandeling?

[Blaise]

Ja, uiteraard, ik bedoelde als keuze voor een project of website, dus niet dat je twee verschillende manieren gebruikt.

[crisp]

Blaise schreef op donderdag 08 februari 2007 @ 12:11:
Ja dat is het nadeel van zulke oplossingen, die vergen meer typwerk en dan ben je soms net te laat

Overigens vind ik het bij xmlhttprequests makkelijker werken om Javascript te generaten met een serverside script en die uit te voeren met eval(), dan om voor elke request een datahandler te bouwen. Bij grotere sites is zoiets als JSON handig voor het overzicht en onderhoud, maar voor sites die beperkt gebruik maakt van xmlhttprequests, voor relatief eenvoudige dingen, voldoet een eval oplossing.

Makkelijker, maybe. Onderhoudbaar, zeker niet. Je gaat immers logica op 2 verschillende punten implementeren. Een data-handler op basis van JSON is helemaal niet zo complex zoals ik zojuist al heb laten zien. Good practices moet je juist ook voor relatief eenvoudige zaken gewoon toepassen imo...

Een dergelijke eval() oplossing is in mijn ogen gewoon een oplossing die ontstaat uit onwetendheid en onervarenheid (en slechte voorbeelden ). Dat goedpraten door te zeggen dat het wel 'voldoet' getuigd niet echt van een wil om het goed te doen. En als het 'voldoet' voor eenvoudige zaken dan zijn mensen snel genegen om het ook voor complexere zaken te gaan gebruiken (meestal weet men ook niet beter) om vervolgens vroeg of laat keihard tegen een muur op te lopen...

Goed voorbeeld doet gewoon goed volgen, en zachte heelmeesters... nou ja, je kent het wel


Overigens is scope hier toch niet het probleem. Deze simpele testcase werkt bij mij ook in IE gewoon goed:

HTML:

<select id="bla">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<script type="text/javascript">

function foo()
{
    var obj = document.getElementById('bla');
    eval("obj.options[obj.options.length] = new Option('4', '4');");
}

foo();
</script>

[ Voor 35% gewijzigd door crisp op 08-02-2007 23:57 ]