[JS/AJAX] Progress bar wordt getoond, maar verdwijnt niet.

[Verwijderd]

Hallo,

Ik ben in Javascript via de YUI library een remote call aan het uitvoeren. Hiervoor gebruik ik de volgende code.

JavaScript:

    function replace_html(id, content) {
        document.getElementById(id).innerHTML = content;
    }   
    
    function success_handler(o) {
        document.getElementById('leverancier').innerHTML = document.getElementById('leverancierselectbox').options[selectedIndex].value;
        replace_html('productbyleverancier', o.responseText);
    }
    
    function hideSelectBox() {
        document.getElementById('leverancierselectbox').disabled=true;
    }
    
    function sendProductByLeverancierRequest(leverancierID) {
        show_progressbar('productbyleverancier', 'Product lijst aan het binnenhalen...');
        hideSelectBox();
        var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
        YAHOO.util.Connect.asyncRequest('GET', 'ajaxproductlist.jsp?leverancierid=' + leverancierID, callback);
    }

Via HTML roep ik sendProductByLeverancierRequest() functie aan, met een onchange attribuut op een select element aan:

JavaScript:

<select id="leverancierselectbox" name="leverancierid" tabindex="10" onchange="javascript:sendProductByLeverancierRequest(this.options[this.selectedIndex].value)">

hideSelectBox() wordt uitgevoerd. De progressbar wordt getoond, maar blijft er staan in afwachting tot de ajax call is uitgevoerd. De progressbar verdwijnt echter niet en de data die door het script ajaxproductlist.jsp geleverd wordt, wordt niet getoond.

Als ik het scriptje manueel aanroep (ajaxproductlist.jsp?leverancierid=x) geeft hij mij mooi de data voor een bepaald ID.

Ik denk dat het probleem zich situeert op het innerHTML niveau. Ik heb ook al geprobeerd om een dom element te creëren in plaats van de reeds bestaande HTML te replacen (productbyleverancier), maar dat hielp ook niet.

<div id="productbyleverancier"></div> staat onder de select box.

Dat is zowat het probleem omschreven. Hopelijk kan er iemand mij een oplossing bieden of alleszins op weg helpen. Alvast bedankt!

[ Voor 6% gewijzigd door Verwijderd op 21-05-2008 18:17 ]

[Bozozo]

Ik gok dat selectedIndex geen globale variabele is, en dat je bedoelt document.getElementById('leverancierselectbox').selectedIndex.

Verder zie ik nergens een stukje code (in de succes handler) dat de progressbar zou moeten verwijderen...

[Verwijderd]

Bozozo schreef op woensdag 21 mei 2008 @ 18:28:
Ik gok dat selectedIndex geen globale variabele is, en dat je bedoelt document.getElementById('leverancierselectbox').selectedIndex.

Verder zie ik nergens een stukje code (in de succes handler) dat de progressbar zou moeten verwijderen...

In IE krijg ik de opmerking dat selectedIndex niet gedefinieerd is, ook als ik document.getElementById('leverancierselectbox').selectedIndex toepas.

Ik test vooral met FF 3 RC 1, maar daar werkt Firebug niet en webdeveloper wel, maar de balk wordt niet weergegeven.

[Bozozo]

Dan bestaat leverancierselectbox waarschijnlijk nog niet als je de functie aanroept, of er gaat iets anders fout. Met een paar alerts kun je dat eenvoudig controleren natuurlijk.

[Verwijderd]

Probleem opgelost, het lag inderdaad aan de scope van selectedIndex. Bedankt!