[JS]Scope probleem - Softwareontwikkeling

woensdag 1 augustus 2007 18:29

Acties:

Topicstarter

Ik heb ik javascript volgende functies en variabele declaratie gemaakt:

JavaScript:

<script language="javascript">
var fouten="";
var foutievedata=false;
    function valideerRegistreer(){
        //Controleren of de wachtwoorden gelijk zijn
       
        
        foutievedata=false;
        fouten ="Er zijn fouten opgetreden, velden met foutieve gegevens zijn gemarkeerd met een *<br />";
       
        if(((document.registreer.txtWW1.value!="")&&(document.registreer.txtWW2.value!=""))&&(document.registreer.txtWW1.value==document.registreer.txtWW2.value)){
            document.getElementById('ww1').innerHTML="";
            document.getElementById('ww2').innerHTML="";
        }else{
            foutievedata = true;
            document.getElementById('ww1').innerHTML="<font class='rood'>* </font>";
            document.getElementById('ww2').innerHTML="<font class='rood'>* </font>";
            fouten += "* De ingevulde wachtwoorden zijn leeg of komen niet overeen !<br />";
        
        }
        if(((document.registreer.txtEmail1.text!="")&&(document.registreer.txtEmail2.value!=""))&&(document.registreer.txtEmail1.value==document.registreer.txtEmail2.value)){
            document.getElementById('email1').innerHTML="";
            document.getElementById('email2').innerHTML="";
            
        }else{
            foutievedata=true;
            document.getElementById('email1').innerHTML="<font class='rood'>*</font>";
            document.getElementById('email2').innerHTML="<font class='rood'>*</font>";
            fouten += "* De ingevulde e-mail adressen zijn leeg of komen niet overeen !<br />";
        }
        if((document.registreer.txtGebruikersnaam.value=="")){
            foutievedata=true;
            document.getElementById('gebruikersnaam').innerHTML="<font class='rood'>*</font>";
            fouten += "* Je vulde geen gebruikersnaam in !<br />";
        }else{
            //controleren of nog niet in gebruik
            
            var uitTeVoeren="ajax/registreer.php?control=gebruikersnaam+&value="+document.registreer.txtGebruikersnaam.value+"&email="+document.registreer.txtEmail1.value+"";
            voerPaginaUitreg(uitTeVoeren,"registreer","gebruikersnaam");
        
        }
        //postcode controleren
        if(document.registreer.txtPCIntern.value==undefined){
            foutievedata=true;
            document.getElementById('postcode').innerHTML="<font class='rood'>*</font>";
            fouten += "* Ongeldige postcode !<br />";
        }
        

      
     
         if(foutievedata){
            document.getElementById('fouten').innerHTML="<font class='rood'>"+fouten+"</font>";
         }else{
            document.getElementById('fouten').innerHTML="";
            var uitTeVoeren="ajax/registreer.php?control=voltooi&geb="+document.registreer.txtGebruikersnaam.value+"&email="+document.registreer.txtEmail1.value+"&wachtwoord="+document.registreer.txtWW1.value+"&pc="+document.registreer.txtPCIntern.value+"";
            
            voerPaginaUitreg(uitTeVoeren,"registreer","voltooi");
         }
        
        
        
    }
    function voerPaginaUitreg(pagina,oproepnaam,divfout){
     
        var XMLHTTPObject =  new XMLHttpRequest();
        
        XMLHTTPObject.open('GET', pagina, true);
        XMLHTTPObject.setRequestHeader("Cache-Control", "no-cache");
        XMLHTTPObject.setRequestHeader("X_USERAGENT", oproepnaam);
        
        XMLHTTPObject.send(null);
        
        XMLHTTPObject.onreadystatechange=function() {
            if (XMLHTTPObject.readyState==4) {
                
                terug = XMLHTTPObject.responseText;
                
                if(divfout!='voltooi'){
            
                    if(parseInt(terug) >= 1){
                         
                         foutievedata=;
                         
                         document.getElementById(divfout).innerHTML = "<font class='rood'>*</font>";
                         if(document.getElementById('fouten').innerHTML==""){
                            document.getElementById('fouten').innerHTML+="<font class='rood'>Er zijn fouten opgetreden, velden met foutieve gegevens zijn gemarkeerd met een *<br />* De ingevulde gebruikersnaam en / of e-mail adres is reeds in gebruik !</font><br />";
                         }else{
                            document.getElementById('fouten').innerHTML+="<font class='rood'>* De ingevulde gebruikersnaam en / of e-mail adres is reeds in gebruik !<br /></font>";
                         }
                    }else{
                        document.getElementById(divfout).innerHTML ="";
                    
                    }
                }else{
                    document.getElementById('inhoud').innerHTML="<table width='100%'><tr><td align='center'><font class='normaalgrijs'>Uw account is met succes geregistreerd!<br />We hebben een mail gestuurd met daarin de nodige gegevens om je account te activeren.</font></td></tr></table>";
                }
                
                
            }
        }
    }

</script>

De bedoeling is om hier een registratie formulier te gaan valideren adhv van oa ajax functie..

De variabelen fouten en foutievedata heb ik globaal gedeclareerd, met de bedoeling om er vanuit al mijn functies aan te kunnen, nu vanuit de functie valideerRegistreer() roep ik op een moment voerPaginaUitreg(uitTeVoeren,"registreer","gebruikersnaam"); op, en deze functie voert uiteindellijk ajax uit en gaat het resultaat vergelijken, wanneer dit resultaat >=1 dan moet de var. foutievedata op true worden gezet en dit wordt niet gedaan, ik heb al meermaals een alert gedaan van resultaat en deze is effecttief >=1 en hij komt ook in de if lus, het zit hem in het zetten van de variabele waarden wat niet lukt...

Wat doe ik verkeerd want ik zie het niet meer

woensdag 1 augustus 2007 20:28

Acties:

Verwijderd

Het probleem is veroorzaakt door een JavaScript constructie genaamd closures. Doe in plaats van dit:

JavaScript:

XMLHTTPObject.onreadystatechange=function() {
    if (XMLHTTPObject.readyState==4) { 
        ...
    }
}

dit:

JavaScript:

function callback() {
    if (this.readyState==4) { 
        ... // vervang XMLHTTPObject door this
    }
}

XMLHTTPObject.onreadystatechange = callback;

woensdag 1 augustus 2007 21:57

Acties:

bibawa

Topicstarter

Ik heb het nu zo gedaan:

JavaScript:

...
function callback() {
            
            if (this.readyState==4) {
                alert("hier divfout=> "+divfout);
                terug = this.responseText;
                
                if(divfout!='voltooi'){
                        
                    if(parseInt(terug) >= 1){
                         
                         foutievedata=true;
                         
                         document.getElementById(divfout).innerHTML = "<font class='rood'>*</font>";
                         if(document.getElementById('fouten').innerHTML==""){
                            document.getElementById('fouten').innerHTML+="<font class='rood'>Er zijn fouten opgetreden, velden met foutieve gegevens zijn gemarkeerd met een *<br />* De ingevulde gebruikersnaam en / of e-mail adres is reeds in gebruik !</font><br />";
                         }else{
                            document.getElementById('fouten').innerHTML+="<font class='rood'>* De ingevulde gebruikersnaam en / of e-mail adres is reeds in gebruik !<br /></font>";
                         }
                    }else{
                        document.getElementById(divfout).innerHTML ="";
                    
                    }
                }else{
                    document.getElementById('inhoud').innerHTML="<table width='100%'><tr><td align='center'><font class='normaalgrijs'>Uw account is met succes geregistreerd!<br />We hebben een mail gestuurd met daarin de nodige gegevens om je account te activeren.</font></td></tr></table>";
                }
                
                
            }
        }
    function voerPaginaUitreg(pagina,oproepnaam,divfout){
     
        var XMLHTTPObject =  new XMLHttpRequest();
        
        XMLHTTPObject.open('GET', pagina, true);
        XMLHTTPObject.setRequestHeader("Cache-Control", "no-cache");
        XMLHTTPObject.setRequestHeader("X_USERAGENT", oproepnaam);
        
        XMLHTTPObject.send(null);
        
                
    
        XMLHTTPObject.onreadystatechange=callback;
        
    }
...

Alleen kan ik in callback niet aan XMLHTTPObject

woensdag 1 augustus 2007 22:34

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 01 augustus 2007 @ 20:28:
Het probleem is veroorzaakt door een JavaScript constructie genaamd closures. Doe in plaats van dit:
JavaScript:
1
2
3
4
5
XMLHTTPObject.onreadystatechange=function() {
    if (XMLHTTPObject.readyState==4) { 
        ...
    }
}
dit:
JavaScript:
1
2
3
4
5
6
7
function callback() {
    if (this.readyState==4) { 
        ... // vervang XMLHTTPObject door this
    }
}

XMLHTTPObject.onreadystatechange = callback;

Dat werkt ja, maar momenteel alleen in Opera

http://therealcrisp.xs4al...-and-the-scope-of-events/

Intentionally left blank

woensdag 1 augustus 2007 22:40

Acties:

bibawa

Topicstarter

dacht al zoiets dat het niet geheel compatibel was, want het doet niet veel

zijn er dan geen andere oplossingen

Het rare is eigenllijk, dat ik wanneer ik alerts plaats in mijn code er geen probleem meer is en hij het geheel mooi uitvoert, maar ja alert horen er niet

[ Voor 39% gewijzigd door bibawa op 01-08-2007 22:50 ]

woensdag 1 augustus 2007 22:54

Acties:

crisp

Devver

Pixelated

bibawa schreef op woensdag 01 augustus 2007 @ 22:40:
dacht al zoiets dat het niet geheel compatibel was, want het doet niet veel

zijn er dan geen andere oplossingen

Het rare is eigenllijk, dat ik wanneer ik alerts plaats in mijn code er geen probleem meer is en hij het geheel mooi uitvoert, maar ja alert horen er niet

Scope binding is geen enkel probleem, daar kan je apply of call voor gebruiken, maar dat is hier het probleem niet. Je probeert hier in een synchrone executie-thread het resultaat van een asynchroon request te gebruiken en dat kan niet

Dat het met een alert wel werkt komt omdat dan even de synchrone executie-thread onderbreekt zodat het asynchroon request ondertussen uitgevoerd kan worden.

2 mogelijke oplossingen: een synchroon request gebruiken, of ervoor zorgen dat het laatste deel uit valideerRegister() waarbij je het uiteindelijke resultaat van de variabele foutievedata gebruikt pas wordt uitgevoerd nadat ook je asynchrone request is uitgevoerd.

Intentionally left blank