[ JS / CSS ] XMLHttp + Oveflow:auto hulp nodig

[Sc0tTy]

Goede middag ,

Ik ben bezig met een pagina waarmee je klanten kunt filteren.
Standaard word de pagina geladen met alle klanten in het systeem en dan kan er met een zoek oprdacht ( onKey word hij ververst ) via XMLHttp van een andere pagina alleen die klanten binnen gehaalt.

Nu zit ik met een probleem IE doet moeilijk wanneer er meer als 100 regels word geretourneerd , alles schiet dan namelijk naar beneden.
In opera heb ik geen last van dit probleem.
De code is ook niet fout , weet iemand een hack oid hier voor ?

Code JS XMLHttp handler

code:

    // Hiermee word informatie verwerkt voor de klanten lijst
    function klant_zoekklanthandler() {
        // Wanneer de pagina geladen is en status goed is
        if (http_thread.readyState == 4 && http_thread.status == 200) {
            
            // Kijken of pagina in text kan worden omgezet
            if (http_thread.responseText) {
                
                // Text opslaan in variabele
                var tmp = http_thread.responseText;
                
                // Kijken of er iets fout is gegaan
                if ( tmp.match( "ERROR" ) ) {
                    alert( tmp );
                } else {
                    document.getElementById( "klant_all" ).style.display = "none";
                    document.getElementById( "klant_search" ).style.display = "inline";
                    document.getElementById( "klant_search" ).innerHTML = tmp;
                }
            }
        }
    }

Voor :

Na ( een zoek opdracht ) :


PS : klant gevens heb ik weg gehaalt en als iemand nog meer code wil zien hoor ik het.

[beetle71]

mmm, ik vermoed dat je klant_search container een DIV is, en dan moet je de .style.display niet op inline zetten maar leeg maken. ....style.display='';

Overigens hoop ik dat je op je keyUp een setTimeout doet, (op bijv 500ms) die als ie nog niet uitgevoerd is, bij elke keyUp gereset wordt naar 0, anders is je serverload/traffic binnen no-time rampzalig...

[Sc0tTy]

dit heeft niet geholpen

wat ik ook merk is wanneer er meer resultaten zijn hij verder naar beneden schiet en minder resultaten hij minder ver schiet

[beetle71]

Post dan svp even het stuk HTML waarin die containers zitten en de bijbehorende css

[Sc0tTy]

ik pak wel even de code die all door php is ge evalueerd ::

HTML :

HTML:

<table class="content">
<tr>
    <td class="content-head">Klanten Lijst&nbsp;&nbsp;</td>
</tr>
<tr>
    <td class="content-content">
Klant : <b><a href="?id=14">Toevoegen</a></b>
<div class="content-goscroll">

<center>
<form name="klanten" action="">
<table class="show-product">
<tr>
    <td>
        <table class="show-product">
        <tr>
            <td align="center">
                <table class="show-product">
                <tr>
                    <td>
                        &nbsp;&nbsp;Klant Zoeken :<br>
                        <table class="show-table" cellspacing="5">
                        <tr>
                            <td class="show-product-text">Zoeken :</td>
                            <td>
                            <select class="show-zoek-persoon-drop" name="zoekklant_waarop" onChange="db_changeklantzoekwaarop( 'klanten' );">
                                <option value="achter" selected>Achternaam / Bedrijfsnaam</option>
                                <option value="pcode">Postcode</option>
                                <option value="adres">Straatnaam</option>
                                <option value="telnr">Telefoon nr.</option>
                            </select>
                            </td>
                            <td>
                            <div id="achter" style="display:inline;"><input onKeyUp="db_zoekklant( 'klanten' );" class="show-klant-achter" type="text" name="zoekklant_achter" value=""></div>
                            <div id="pcode" style="display:none;"><input onKeyUp="db_zoekklant( 'klanten' );" class="show-klant-pcode" type="text" name="zoekklant_pcode" value="">&nbsp;<input class="show-klant-huisnr" type="text" name="zoekklant_phuisnr" value=""></div>
                            <div id="adres" style="display:none;"><input onKeyUp="db_zoekklant( 'klanten' );" class="show-klant-straat" type="text" name="zoekklant_adres" value="">&nbsp;<input class="show-klant-huisnr" type="text" name="zoekklant_ahuisnr" value=""></div>
                            <div id="telnr" style="display:none;"><input onKeyUp="db_zoekklant( 'klanten' );" class="show-klant-tel" type="text" name="zoekklant_telnr" value=""></div>
                            </td>
                            <td><input class="show-submit-fixed" type="button" value="Zoek" onClick="db_zoekklant( 'klanten' );"></td>
                        </tr>
                        </table>
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;&nbsp;Klanten :<br>
                <div id="klant_all">
                    <table class="show-table" cellspacing="5" width="900">
                    <tr>
                        <td width="20">&nbsp;</td>
                        <td width="480" colspan="2">Naam</td>
                        <td width="20">&nbsp;</td>
                        <td width="100">Telefoon nr.</td>
                        <td width="20">&nbsp;</td>
                        <td width="100">Aantal Facturen</td>
                        <td width="20">&nbsp;</td>
                        <td width="42">&nbsp;</td>
                    </tr>
                    
<!-- HIER STAAN DE KLANTEN DIE HIJ STANDAARD INLAAD -->
            
                    </table>
                </div>
                <div id="klant_search" style="display:none;">

<!-- HIER STAAN DE KLANTEN DIE HIJ MET EEN FILTER INLAAD -->

        </div>
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>
</form>
</center>
    
</div>

    </td>
</tr>
</table>

CSS ::

Cascading Stylesheet:

.content-content {
    height: 678px;
    font-family: Verdana, Lucida, Arial;
    font-size: 12px;
    padding-right: 1px;
    padding-left: 1px;
    text-align: center; 
    vertical-align: top;
    background-color: #D8D8F0;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
}
.content-goscroll {
    height: 690px;
    width: 998px;
    overflow: auto;
    font-family: Verdana, Lucida, Arial;
    color: #000000;
    font-size: 12px;
    text-align: left;   
    text-decoration: none;
    scrollbar-face-color: #FFFFFF;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #1111A4;
    scrollbar-darkshadow-color: #1111A4;
    scrollbar-track-color: #D8D8F0;
    scrollbar-arrow-color: #1111A4;
}
.show-product {
    font-family: Verdana, Lucida, Arial;
    color: #000000;
    font-size: 12px;
    text-align: left;   
    vertical-align: middle;
    text-decoration: none;
    font-weight: bold;
}
.show-table {
    background-color: #FFFFFF;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
    font-style: normal;
    text-align: center;
}

JS ::

JavaScript:

function db_zoekklant( form ) {
    
    // http_thread aanmaken
    http_thread = null;
    
    // Hiermee word informatie verwerkt
    function fact_zoekklanthandler() {
        // Wanneer de pagina geladen is en status goed is
        if (http_thread.readyState == 4 && http_thread.status == 200) {
            
            // Kijken of pagina in text kan worden omgezet
            if (http_thread.responseText) {
                
                // Text opslaan in variabele
                var tmp = http_thread.responseText;
                
                // Kijken of er iets fout is gegaan
                if ( tmp.match( "ERROR" ) ) {
                    alert( tmp );
                } else {
                    document.getElementById( "klantsearchresult" ).innerHTML = tmp; 
                }
            }
        }
    }
    
    // Hiermee word informatie verwerkt voor de klanten lijst
    function klant_zoekklanthandler() {
        // Wanneer de pagina geladen is en status goed is
        if (http_thread.readyState == 4 && http_thread.status == 200) {
            
            // Kijken of pagina in text kan worden omgezet
            if (http_thread.responseText) {
                
                // Text opslaan in variabele
                var tmp = http_thread.responseText;
                
                // Kijken of er iets fout is gegaan
                if ( tmp.match( "ERROR" ) ) {
                    alert( tmp );
                } else {
                    document.getElementById( "klant_all" ).style.display = "none";
                    document.getElementById( "klant_search" ).style.display = "";
                    document.getElementById( "klant_search" ).innerHTML = tmp;
                    document.getElementById( "hierscrollik" ).style.display = "";
                }
            }
        }
    }
    
    // Kijken of alles wel is ingevuld
    var waarop = docform.zoekklant_waarop.value;
    if ( waarop ) {
    
        // Variabelen aanmaken
        var what = "";
        var what2 = "";
        
        // Zoek criteria opschrijven
        switch( waarop ) {
            case "achter"    : what = docform.zoekklant_achter.value; break;
            case "telnr"    : what = docform.zoekklant_telnr.value; break;
            case "pcode"    :
                what = docform.zoekklant_pcode.value;
                what2 = docform.zoekklant_phuisnr.value
                break;
            case "adres"    : 
                what = docform.zoekklant_adres.value;
                what2 = docform.zoekklant_ahuisnr.value;
                break;
        }
        
        // Kijken of er zoek criteria is ingevuld
        if ( what.length > 0 ) {
            
            // Create own thread
            http_thread = createRequestObject();
            
            // Connectie openen naar de zoek pagina : page-klantinfo.php
            http_thread.open( "GET" , "page-klantinfo.php?cmd=search&waarop=" + waarop + "&what=" + what + "&what2=" + what2 + "&display=" + form );
            http_thread.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
            
            // Wanneer de status verrandert de handler openen die de pagina moet verwerken
            if ( form == "addfactuur" ) {
                http_thread.onreadystatechange = fact_zoekklanthandler;
            } else {
                http_thread.onreadystatechange = klant_zoekklanthandler;
            }
            
            // Omdat het om text gaat hoeft er niets extras verzonden te worden
            http_thread.send(null);
        } else {
            if ( form == "klanten" ) {
                document.getElementById( "klant_all" ).style.display = "";
                document.getElementById( "klant_search" ).style.display = "none";
            }
        }
    }
}

[beetle71]

Mmm, ga misschien eerst maar eens alle onnodige table stuff eruit gooien en alleen div's, of stop de response direct in een TD, maar tables in divs in tables in tables enz is vragen om ellende... Je kunt het je zelf zo makkelijk maken met slecht een paar divjes en evt. een javascriptje...

[frickY]

Waar is je <tbody>?

[ Voor 92% gewijzigd door frickY op 17-03-2007 13:29 ]

[crisp]

frickY schreef op zaterdag 17 maart 2007 @ 13:28:
Waar is je <tbody>?

Ik denk dat dat niet zozeer het probleem is hier. Ik denk eerder dat IE niet lekker wilt reflowen met tables als je dynamisch content wijzigd in elementen daarbinnen. Kortom: ditchen die tabellen die je hier voor layout misbruikt.

Op de Ajax-code zelf valt echter veel meer aan te merken. Dit is een klassiek voorbeeld van poor design waarbij je zeker qua performance in de problemen gaat komen bij grootschaligere toepassing. Bij gebrek aan kennis krijgt dan meestal de techniek de schuld...

Where to start?

In de eerste plaats is het al helemaal niet handig om bij elk key-event een Ajax-request af te gaan vuren. Sommige mensen typen nu eenmaal snel en als je al een nieuw request gaat doen terwijl de vorige mogelijk nog niet eens verwerkt is dan ben je niet erg handig bezig
Verder is het ook helemaal niet logisch als je bijvoorbeeld eerst al alle klanten beginnend met een 'A' hebt binnengehaald vervolgens weer een request te gaan doen voor klanten beginnend met bijvoorbeeld 'An' - die resultaten kan je immers al uit het resultaat van je voorgaande request filteren!

Verder geef je niet expliciet aan of je hier met synchrone of asynchrone requests wilt werken - die (verplichte) 3e parameter voor de open() method laat je ongedefinieerd. In de praktijk doet IE dan een synchroon request en bijvoorbeeld Firefox een asynchroon request.
Vooral in het laatste geval kan je uiteindelijk lockups en errors krijgen op het moment dat je het request-object weer overschrijft voor een volgende request indien de voorgaande request nog niet was afgehandeld.

Dat brengt mij ook tot het volgende: waarom maak je elke keer een nieuw request-object aan en hergebruik je niet gewoon je bestaande object? Ook weer een punt waarop performance te winnen valt

Kortom: Ajax is lang niet altijd zo simpel als het lijkt

[Sc0tTy]

@ beetle71

mjah de lay-out ( hoofdpagina ) is al een jaar oud ( toen werkte ik nog niet met divjes , die moet een keer opgefrist worden inderdaad )

@frickY
tbody heb ik nog nooit gebruik van gemaakt , ik heb et hier http://www.w3schools.com/tags/tag_tbody.asp even snel doorgelezen maar ik zie geen de reden waarom dat beter zou zijn als een <td>

@crisp
Wanneer je snel nog een request opend op hetzelfde object , gaan er dingen door elkaar lopen wat fout gaat. Verder het filteren op 1 letter is een wens van een klant ik had persoonlijk liever 3 letters minimaal gehad. Het synchrone of asynchrone requests zal ik nog wel even wat over gaan lezen.

Ik denk zellf ook dat IE gewoon niet goed omgaat met het gebruik van tabellen + divjes, ik ga daarom ook even met de klant overleggen.

[crisp]

Sc0tTy schreef op zaterdag 17 maart 2007 @ 15:49:
@crisp
Wanneer je snel nog een request opend op hetzelfde object , gaan er dingen door elkaar lopen wat fout gaat.

Dat is ook deels mijn punt: je moet ueberhaupt geen nieuw request gaan aanmaken als de voorgaande nog niet eens afgehandeld is. In dit geval, het overschrijven van je request-object door een nieuwe instance, gaat het ook al fout in browsers die dit als een asynchroon request zullen behandelen...

Verder het filteren op 1 letter is een wens van een klant ik had persoonlijk liever 3 letters minimaal gehad.

Het filteren op 1 letter is geen probleem, eerder handig: als je alle resultaten voor die ene letter binnen hebt hoef je helemaal geen requests meer te doen voor alles wat daarna volgt; als je het resultaat van die eerste request bijvoorbeeld in een object of array cached kan je daar gewoon uit filteren - voorwaarde is dan natuurlijk wel dat je resultaat data in een formaat is wat makkelijk doorloopbaar is, dus geen kant-en-klare HTML maar bijvoorbeeld XML of JSON. De HTML kan je prima in je javascript zelf genereren.

Het synchrone of asynchrone requests zal ik nog wel even wat over gaan lezen.

Het is heel simpel, send() heeft 3 argumenten:

JavaScript:

XMLHttpRequestObjectInstance.send(method, url, async)

deze argumenten zijn alle drie verplicht. De laatste geeft aan of het een synchroon of asynchroon request moet zijn en kan 'false' of 'true' zijn. Weglaten heeft dus verschillende effecten in verschillende browsers.


Edit: nog een dingetje; je vergeet je query-parameters in je URL ook te url-encoden

[ Voor 10% gewijzigd door crisp op 17-03-2007 16:39 ]

[Sc0tTy]

Ja, het afwachten op requests werkt niet helemaal lekker ik had eerst een script die wachte totdat de readystate weer op 0 was ( om de seconde ) , maar toen kreeg ik een infinite loop , toen heb ik dit geprobeert en werkt perfect

Ik ga volgende week eerst de hoofdpagina is herschrijven en dan moet ik hopelijk geen gezeur meer hebben met IE .

Verder het cachen van gegevens is eigenlijk niet zo belangrijk, ik had hier wel al naar gekeken , maar vond het niet nodig. Het draait hier allemaal intern en er werkt max 3 man aan, waarvan er meestal 1 op de site zit. Dus zo'n dikke server load zal het niet krijgen en anders gooi ik een timeout op de onKey event.

Ik test de website met IE Opera ( gebruik ik persoonlijk ) en Firefox. Ik heb nog geen problemen gehad met de browsers en de XMLHttp requests , maar zal dit wel in mijn code op TRUE zetten. Om eventuele fouten te verhinderen.

Wanneer ik na het herschrijven van de website nogsteeds problemen hebt , plaats ik hier wel weer een bericht

Alvast bedankt