[Javascript/XML]inhoud selectbox variabel *

[Jochemmol]

Ik ben bezig met een formulier waarmee mensen artikelen kunnen bestellen. De gebruiker moet als eerste een artikel groep selecteren door middel van een selectbox.

Als de gebruiker een artikel groep heeft geselecteerd dan moet er onder een selectbox zichtbaar worden met alle artikellen uit de geselecteerde groep. de artikelen staan in een MySQL database en moeten uitgelezen worden met php.

Als de gebruiker op de selectbox klikt dan lukt het me wel om de selectbox daaronder wel zichtbaar te maken. Dit is niet zo moeilijk. Dit doe door een javascript functie aan te roepen bij "onchange". In de functie check ik de value en maak ik de selectbox visible.

document.formulier.tekeningen.style.visibility = 'visible';

Maar ik krijg het niet voor elkaar om in die select box de juiste data uit de database te zetten. Ik heb met het ActiveX component(Msxml2.XMLHTTP) geprobeert een php functie aan te roepen en de gegevens uit te lezen. Dan wilde ik de terug gegeven waarden in een selectbox schrijven. Alleen het lukt niet . Is dit wel een handige optie?

[faabman]

* faabman kijk in zijn glazen bol en komt er niet uit

Kun je misschien wat source posten? En daarmee doel ik dan op de XML output van je php functie en de javascripts waarmee je de select denkt te vullen...

edit:

Jochemmol schreef op zondag 05 juni 2005 @ 20:26:
Is dit wel een handige optie?

Het is zeker een optie die voor een verhoogde bruikbaarheid van je site zorgt (er vind immers geen zichtbare postback plaats)... Overigens kun je dit ook oplossen door alle onderliggende producten in js arrays mee te sturen en daarmee je tweede select te vullen, zie quirksmode voor een voorbeeld. Wanneer je veel producten hebt levert dit wel een zwaardere pagina op.

[ Voor 58% gewijzigd door faabman op 05-06-2005 21:08 ]

[Jochemmol]

sorry

Het aanroepen van de php functie do ik zo.

function artikelen()
{
name = document.getElementById('name').value;
xmlhttp.open("GET", "prijs.php?name="+name,true);//method, target, async (set always true!)
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
update()
}
}
}

In php voer ik een select query uit die alle artikelen selecteerd die de naam hebben die in de querystring word meegegeven.

Met het XML bestand kan ik zo de terug gegeven waarde in een div zetten.

prijzen= xmlhttp.responseText;
document.getElementById('prijs').innerHTML+=prijzen;

Maar nu wordt alle data in 1 keer geschreven in de div. Nu moet de data niet in een div geschreven worden maar in een selectbox. Maar het lukt me wel om die op ID te vullen maar niet als verschillende opties.

[faabman]

en nu nog [code] tags eromheen

Waar staat en wat doet de functie update??

[Creepy]

Je wilt dus op de clientkant de output van je PHP script gaan parsen? Waarom genereer je met een PHP niet meteen de selectbox?
Anyway, als je dit met javascript wilt gaan parsen dan geef ik het topic een schop richting W&G. Zie ook P&W FAQ - HTML / javascript /css, etc...
Ik heb ook meteen je topictitel ff bijgewerkt

[Jochemmol]

Bedankt.

in de functie update staat dit

code:

prijzen= xmlhttp.responseText;
document.getElementById('prijs').innerHTML+=prijzen;

sorry niet duidelijk aangegeven.

Ik kan wel met php meteen de option box genereren maar hoe krijg ik ooit de geselecteerde artikel groep mee naar de server behalve dan te posten. Ik kan met javascript wel

code:

document.formulier.submit();

Maar is dat handig?

[crisp]

innerHTML lijkt me niet het meest geschikt hiervoor, ik denk dat je eens moet kijken naar createElement('option') of de new Option() constructor. Feit is wel dat je dan op een of andere manier door het resultaat van je xmlHTTPrequest moet gaan lopen.
Je zou XML kunnen teruggeven en daar mbv DOM-methods doorheen kunnen lopen, of een JS-object teruggeven die je mbv eval() 'importeert', of op een andere manier(bv serializen en unserializen).
Er zijn in dit geval veel wegen die naar Rome leiden

[ Voor 13% gewijzigd door crisp op 05-06-2005 21:37 ]

[Jochemmol]

Misschien leuk om te vertellen hoe ik het heb opgelost misschien hebben sommige er iets aan.

Ik genereer met php een javascript functie.

Bij het laden van de pagina wordt een php script doorlopen en met dat php script lees ik de database uit en pars ik een Javascript 2D Array.

code:

Query = mysql_query("SELECT tblArtikelen.Naam FROM tblArtikelen WHERE tblArtikelen.Isverwijderd = '0'"); 
        $counter = 0;
        
            echo "<script language=\"javascript\">";
            echo "var arrKeuze = new Array();";
            echo "arrKeuze[0] = new Array();";
            echo "</script>";
            
        while ($obj = mysql_fetch_object($Query))
        {
            echo "<script language=\"javascript\">";
            echo "arrKeuze[0][".$counter."] =\"$obj->Naam\"";
            echo "</script>";   
            $counter = $counter + 1;
        }

Dit doe ik vaker omdat de artikelen uit meerdere databases komen maar ik laat het twee keer zien omdat ik dan kan aangeven hoe ik het verschil maak tussen de rijen in het array.

code:

$Query = mysql_query("SELECT tblArtikelen2.Naam FROM tblArtikelen2 WHERE tblArtikelen2 .Isverwijderd = '0'"); 
        $counter = 0;
            
            echo "<script language=\"javascript\">";
            echo "arrKeuze[1] = new Array();";
            echo "</script>";
            
        while ($obj = mysql_fetch_object($Query))
        {
            echo "<script language=\"javascript\">";
            echo "arrKeuze[1][".$counter."] =\"$obj->Naam\"";
            echo "</script>";
            $counter = $counter + 1;
        }

Ik maak hier een nieuwe rij aan. Nu heb ik een array met twee rijen met in iedere rij verschillende artikelen die uit de databases komen.

Op het moment dat de gebruiker in de eerste optionbox(keuze) een keuze maakt dan wordt er een Javascript functie aangeroepen die ook met php worde geparst. Dit is eigenlijk helemaal niet nodig bedenk ik mij achteraf. Maar maakt even niet uit.

In deze functie wordt de value van de eerste optionbox(keuze) uitgelezen. Daarna wordt deze vergeleken en aan de hand van die vergelijking wordt een variabele ingesteld. Deze variabele staat voor de rij in het array.

De functie ziet er zo uit

code:

    echo "<script language=\"javascript\">";
    echo "function optionbox()";
    echo "{";
        echo "var waardecheck;";
        echo "waardecheck = document.getElementById('keuze').value;";
            echo "for (var intY = 0; intY < document.formulier.type.length; intY++) {";
                echo "document.formulier.type.options[intY] = null;"; 
            echo "}";
        
        echo "if (waardecheck == 0) {";
            echo "var IntX = 0;";
            echo "for (var intI = 0; intI < arrKeuze[IntX].length; intI++) {";
                    echo "document.formulier.type[intI] = new Option(arrKeuze[IntX][intI]);"; 
            echo "}";
        echo "}";
        echo "else if (waardecheck == 1) {";
            echo "var IntX = 1;";
            echo "for (var intI = 0; intI < arrKeuze[IntX].length; intI++) {";
                    echo "document.formulier.type[intI] = new Option(arrKeuze[IntX][intI]);"; 
            echo "}";           
        echo "}";
    echo "document.formulier.type.style.visibility = 'visible';";   
    echo "}";   
    
    echo "</script>";

Als eerste wordt de optionbox helemaal NULL gemaakt. Dat gebeurt iedere keer als de gebruiker in de eerste optionbox(keuze) veranderd. Er wordt gekeken welke optie de gebruiker heeft geselecteerd en aan de hand daarvan wordt het array uitgelezen en steeds een option in de optionbox(type) aangemaakt. Dit gebeurt met een functie uit het javascript object option.

code:

document.formulier.type[intI] = new Option(arrKeuze[IntX][intI]);";

De variabele intI loopt op zolang de array niet aan het einde is.

Ik hoop dat andere hier wat aan hebben en commetaar is ook welkom

[Verwijderd]

Zit er goed uit maar een beetje te veel werk voor mij , kwam een tijdje geleden dit ajax scriptje tegen wat er handig blijkt te zijn.

http://twilightuniverse.com/2005/05/sack-of-ajax/

in je html

code:

<script>
function onchangeListbox(myvalue){
    var mydata = 'myvar=' + myvalue;
    ajax = new sack('mypage.php');
    ajax.element = 'myexamplediv';
    ajax.runAJAX(mydata);
}
</script>

De div die hij automatisch vult

code:

<div id="myexamplediv"></div>

en in mypage.php pagina moet je gewoon je, je gegenereerde listbox echoen en die wordt dan netje in de div geplemt. Dan moet je natuurlijk bij een onchange van je "groepen" list box de functie aanroepen met de juiste parameters maar dat spreek voor zich.

Maar zoals altijd er leiden meerdere wegen naar Rome.

[ Voor 8% gewijzigd door Verwijderd op 07-06-2005 09:52 ]

[Jochemmol]

Helaas werkt mijn manier in in FireFox. Hij pakt de style niet. Ik bedoel als ik een item kies in de optionbox wordt de nieuwe option box niet weergegeven. Ik snap er niks van. Ik heb even een alert in de functie gezet en ik zie dat de functie gewoon werkt.

Dus het zit hem in:

code:

document.formulier.type.style.visibility = 'visible';

Met style werkt niet.

Weet iemand wat hier aan de hand is!!

[ Voor 28% gewijzigd door Jochemmol op 07-06-2005 12:27 ]