[AJAX] Berekening met PHP

[deCube]

Ik ben bezig met een nieuwe website, op deze website moeten een aantal berekeningen worden uitgevoerd. Alle berekeningen staan in "file.inc.php".

Als men in een inputveldje gegevens invult berekent ie direct een bepaalde output waarde en laat deze ook zien. Dit werkt redelijk. Echter als ik dan een nieuwe functie toevoeg werkt geen van beide meer. Ik krijg de volgende error:

code:

missing ) after argument list
berekening.js (line 44)
ajax.send('TA=1&var1=' + var1'&var2=' + var2);

Berekening.js:

JavaScript:

function makeInstance() {
    var http_request = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!http_request) {
        alert('Helaas....');
        return false;
    }

    return http_request;
}

ajax = makeInstance();

function functie1() {
    var var1= document.getElementById("var1").value;
    var output = "OB";
    
    ajax.onreadystatechange = handleResponse(output);
    ajax.open('POST', 'inc/file.inc.php', true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajax.send('OB=' + var1);
}

function functie2() {
    var var1 = document.getElementById("var1").value;
    var var2 = document.getElementById("var2").value;
    var output = "TA";
    
    ajax.onreadystatechange = handleResponse(output);
    ajax.open('POST', 'inc/file.inc.php', true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajax.send('TA=1&var1=' + var1'&var2=' + var2);
} 

function handleResponse(output) {
    if(ajax.readyState < 4) {
        document.getElementById(output).innerHTML = "Loading...";
    }
    
    if(ajax.readyState == 4) {
        if(ajax.status == 200) {
            document.getElementById(output).innerHTML = ajax.responseText;
        } else {
            document.getElementById(output).innerHTML = ajax.status;
        }
    }
}

Ook krijg ik af en toe deze error:

code:

uncaught exception: [Exception... "Component returned failure code: 0x804b000f [nsIXMLHttpRequest.setRequestHeader]" nsresult: "0x804b000f (<unknown>)" location: "JS frame :: http://site.nl/inc/berekening.js :: koopsom :: line 34" data: no]

Van de PHP weet ik 100% zeker dat het klopt... Alleen ik heb geen idee waar de fout zit in het javascript. De functie's worden zo aangeroepen:

HTML:

<input type="text" name="var1" id="var1" size="6" value="350000" onkeydown="javascript:functie1();" />

Wat ik nu dus wil vragen is het volgende:

1. Wat is er mis met "functie2"?
2. Wat betekent de "Component returned failure code: 0x804b000f" error?
3. Als je nu iets invoert berekend ie het pas na 2 tikken.. Welke "on......" moet ik gebruiken?

[DizzyWeb]

JavaScript:

ajax.send('TA=1&var1=' + var1 + '&var2=' + var2);

Misschien dat die extra + beter werkt?

[killercow]

jax.send('TA=1&var1=' + var1'&var2=' + var2);

voor die derde 3e comma hoort een + , en je browser meld jouw dit ook (soort van)

[ Voor 8% gewijzigd door killercow op 17-01-2007 16:43 ]

[deCube]

DizzyWeb schreef op woensdag 17 januari 2007 @ 16:42:

JavaScript:

ajax.send('TA=1&var1=' + var1 + '&var2=' + var2);

Misschien dat die extra + beter werkt?

killercow schreef op woensdag 17 januari 2007 @ 16:43:
[...]


voor die derde 3e comma hoort een + , en je browser meld jouw dit ook (soort van)

Ok, nu voel ik me best wel dom. Vrij logisch natuurlijk, het werkt nu inderdaad.

Nu de andere 2 vragen nog.

[crisp]

Je kan je XMLHttpRequest instance niet al hergebruiken op het moment dat een vorige request nog niet afgehandeld is.

[Swaptor]

Is het niet gewoon onKeyUp ipv onKeyDown, de eerste keer dat de key down is, staat er natuurlijk nog niets...

[tweakerbee]

En binnen elke functie dus even een Ajax instantie maken.

[deCube]

crisp schreef op woensdag 17 januari 2007 @ 16:53:
Je kan je XMLHttpRequest instance niet al hergebruiken op het moment dat een vorige request nog niet afgehandeld is.

Dus deze functie's pas uitvoeren als alle velden zijn ingevuld is beter?

Swaptor schreef op woensdag 17 januari 2007 @ 16:57:
Is het niet gewoon onKeyUp ipv onKeyDown, de eerste keer dat de key down is, staat er natuurlijk nog niets...

Dit heb ik ook geprobeerd, maar dan blijf je 1 achter lopen.

tweakerbee schreef op woensdag 17 januari 2007 @ 17:00:
En binnen elke functie dus even een Ajax instantie maken.

Hmmm, als ik de functie's als volgt doe:

JavaScript:

function functie1() {
    ajax = makeInstance();

    var var1= document.getElementById("var1").value;
    var output = "OB";
    
    ajax.onreadystatechange = handleResponse(output);
    ajax.open('POST', 'inc/file.inc.php', true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajax.send('OB=' + var1);
}

function functie2() {
    ajax = makeInstance();

    var var1 = document.getElementById("var1").value;
    var var2 = document.getElementById("var2").value;
    var output = "TA";
    
    ajax.onreadystatechange = handleResponse(output);
    ajax.open('POST', 'inc/file.inc.php', true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajax.send('TA=1&var1=' + var1'&var2=' + var2);
} 

Dan blijft ie op "Loading..." staan.

[ Voor 47% gewijzigd door deCube op 17-01-2007 17:09 ]

[.oisyn]

Waarschijnlijk omdat je 'ajax' steeds overschrijft elke keer als je functie1() of functie2() binnengaat?

[deCube]

.oisyn schreef op woensdag 17 januari 2007 @ 17:32:
Waarschijnlijk omdat je 'ajax' steeds overschrijft elke keer als je functie1() of functie2() binnengaat?

Hmmm, sorry ik ben een beginner wat JS betreft, hoe zouden die functie's er uit moeten zien?

[crisp]

tweakerbee schreef op woensdag 17 januari 2007 @ 17:00:
En binnen elke functie dus even een Ajax instantie maken.

Dat zou ik ook niet doen. Ik zou ten eerste een delay inbouwen voordat er een ajax-request wordt gegenereerd, en ook alleen dan wanneer de voorgaande request al helemaal is afgehandeld.
Op deze manier, in de onkeyup handler, is gewoon vragen om problemen.

deCube schreef op woensdag 17 januari 2007 @ 17:39:
[...]

Hmmm, sorry ik ben een beginner wat JS betreft, hoe zouden die functie's er uit moeten zien?

En nee, ik ga niet uitleggen hoe je dat precies kan oplossen. Als je daar zelf niet uitkomt dan is dit blijkbaar nog te hoog gegrepen voor je en kan je wellicht beter eerst met wat simpelers beginnen om javascript te leren.

[ Voor 33% gewijzigd door crisp op 17-01-2007 17:50 ]

[.oisyn]

Je code klopt trouwens sowieso niet. Het is (neem ik aan?) de bedoeling dat ajax.onreadystatechange naar je handle functie wijst. Wat jij nu doet is in funcie1() en functie2() die handlefunctie al aanroepen met een voorgedefinieerde output, om het resultaat daarvan (is er niet, je returnt niets in je handleResponse) aan de onreadystatechange toe te kennen.

[crisp]

.oisyn schreef op woensdag 17 januari 2007 @ 17:51:
Je code klopt trouwens sowieso niet. Het is (neem ik aan?) de bedoeling dat ajax.onreadystatechange naar je handle functie wijst. Wat jij nu doet is in funcie1() en functie2() die handlefunctie al aanroepen met een voorgedefinieerde output, om het resultaat daarvan (is er niet, je returnt niets in je handleResponse) aan de onreadystatechange toe te kennen.

Dat klopt inderdaad.

deCube: overigens zijn er wel tutorials te vinden over een dergelijke suggest-like ajax implementatie; Google's suggest is al vaak genoeg disected daarvoor.
Ook wij hebben dergelijke functionaliteit, o.a. voor het locatie-veld in het tweakers.net/jobs zoekformulier - de javascript daarvoor is hier te vinden - wellicht dat je daar nog wat inspiratie uit kan opdoen, maar ik zou toch aanraden eerst de basisprinicpes van javascript onder de knie te krijgen. Met gewoon lukraak wat voorbeelden copy/pasten kom je er niet...