Auswahlliste (mein latein am ende)

[Aldimaster]

Hi ich begrüße erstmal alle fleißigen Helfer, bin jetzt zu eurem Forum umgestiegen da mein altes leider nicht so viele Profis in HTML und Co. enthält und hoffe hier in nächster Zeit viele hilfreiche Antworten auf meine evt. Probleme zu bekommen.

So und nun zu meinem Problem^^

Versuche gerade eine Liste zu erstellen leider habe ich sowas noch nie gemacht und mir mal Quellcodes gesucht aber kein passendes gefunden. Doch dann fiel mir Nvidia ein. Bei der auswahl des Treibers genau das wollte ich. Nun habe ich mir mal die Seite gespeichert und den Quellcode angesehen worauf ich nach 1 std. probieren kein Plan hab wie das funzt XD

Und zwar brauche ich nur die ersten 2 zeilen laut Nvidia Produkttyp und Produktserie ich nenne sie Spielgenre und Game. Jetzt will ich es bei mir so haben wenn ich zb bei Spielgenre Ego-Shooter wähle das in der 2.Liste dann die auswahl aller Ego-Shooter Games stehen die ich eingetragen habe oder wenn ich Strategie wähle das er mir in der 2.Liste alle Strategiespiele auflistet die ich eingeschrieben habe zb Anno oder Civilization (Bei Nvidia halt zb Geforce und dann halt die ganzen Geforce Reihen) stehen.
Wenn ich mich nicht täusche ist das ganze mit nem Javascript verknüpft.

Hier der Quellcode: (Original)

<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tbody><tr>
<td align="right" width="150">Produkttyp]:</td>
<td width="200">
<select id="selProductSeriesType" name="selProductSeriesType" class="NDLSelectBox2" style="width: 200px;" onchange="javascript: changeProductSeriesType(this.value);">
<option value="1" selected="selected">GeForce</option>
<option value="6">ION</option>
<option value="3">Quadro</option>
<option value="5">3D Vision</option>
<option value="2">nForce</option>
<option value="7">Tesla</option>
<option value="4">Legacy</option>
</select> </td> </tr>
<tr>
<td align="right" width="150">Produktserie:</td>
<td width="200">
<select id="selProductSeries" name="selProductSeries" class="NDLSelectBox2" style="width: 200px;" onchange="javascript: changeProductSeries(this.value);">
<option selected="selected" requiresproduct="True" value="52">GeForce 200 Series</option><option requiresproduct="False" value="62">GeForce 200M Series (Notebooks)</option><option requiresproduct="False" value="59">GeForce 100 Series</option><option requiresproduct="False" value="61">GeForce 100M Series (Notebooks)</option><option requiresproduct="False" value="51">GeForce 9 Series</option><option requiresproduct="False" value="53">GeForce 9M Series (Notebooks)</option><option requiresproduct="False" value="1">GeForce 8 Series</option><option requiresproduct="False" value="54">GeForce 8M Series (Notebooks)</option><option requiresproduct="False" value="2">GeForce 7 Series</option><option requiresproduct="False" value="55">GeForce Go 7 Series (Notebooks)</option><option requiresproduct="False" value="3">GeForce 6 Series</option><option requiresproduct="False" value="4">GeForce 5 FX Series</option><option requiresproduct="False" value="18">GeForce 4 MX Series</option></select> </td>

Hier der Quellcode: (Wie ich es mir vorstelle)

<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tbody><tr>
<td align="right" width="150">Spielgenre:</td>
<td width="200">
<select id="selProductSeriesType" name="selProductSeriesType" class="NDLSelectBox2" style="width: 200px;" onchange="javascript: changeProductSeriesType(this.value);">
<option value="1" selected="selected">Ego-Shooter</option>
<option value="2">Strategie</option>
</select> </td> </tr>
//So ich hoffe das Spielgenre soweit stimmt leider weiß ich nicht wie ich Game gestalten muss da ist mein Latein am Ende.
<tr>
<td align="right" width="150">Game:</td>
<td width="200">

Ich denke auch das bezüglich der id´s (selProductSeriesType und co.) Änderungen vorgenommen werden müssen wo ich aber auch wieder keine Ahnung habe dieses bezüglich und was es alles genau bezwecken soll.

Thx im vorraus für Tipps bzw. Lösung des Problems XD

 

[Efchen]

Ich sehe als erstes eine Tabelle, wo ich keine tabellarischen Daten sehe. Du missbraucsht doch nicht etwa Tabellen zu Layoutzwecken? Bist Du schon so alt, dass Du diese Vorgehensweise von vor 15 Jahren noch im Blut hast?

Das, was Du vorhast, geht natürlich nicht mit HTML, denn HTML ist ja nur dafür da, dem Inhalt eine Bedeutung zu geben.

JavaScript allein ist hier eigentlich auch eher ungünstig, da Du dann alle Kombinationen aus dem ersten und dem zweiten Select schon im Code haben müsstest. Außerdem stellt sich ja die Frage, wo diese daten gespeichert sind. In einer Datenbank? Oder hardcoded in der Seite?

Wenn Du die Daten in einer Datenbank hast, dann brauchst Du ja auf jeden Fall eine serverseitige Programmiersprache, um die Daten auszulesen und daraus die zwei selects zu bauen.

Eine moderne, aber mit Nachteilen behaftete Lösung wäre hier der Einsatz von Ajax. Dabei wird über den Event-Handler, der eine Änderung eines Selects registriert, eine serverseitige Funktion aufgerufen, die dann die erforderlichen Daten für das zweite select ermittelt und asynchron zurückliefert.

Der Nachteil an der Ajax-Lösung ist, dass es dazu clientseitig JavaScript benötigt und wenn das abgeschaltet wird, funktioniert Deine Lösung nicht mehr. Trotzdem ist Ajax natürlich in der Bedienung schöner.

Aber Du brauchst auf jeden Fall eine Alternative, wenn Du Ajax einsetzen willst. Das ist dann das selbe, wie wenn Du Ajax gar nicht einsetzt. Wenn der Bediener das erste Select ausgewählt hat, muss er einen Button anklicken, damit eine neue Seite geladen wird, wo ihm dann das zweite select angezeigt wird, was er dann auswählen kann.

Ich denke, das sind genug Infos auf einmal, jetzt stellt sich bei Dir ohnehin - angesichts der Tabellenvergewaltigung - ob Du dafür überhaupt genug Ahnung hast, oder ob Du erstmal ganz vorne anfangen musst.

Liebe Grüße,
-Efchen

 

[Aldimaster]

Hallo Efchen,

erstmal wow für solch eine schnelle Antwort so schnell kenn ich das garnicht^^

Zur Tabelle muss ich sagen NEIN^^ ich verwende ausschließlich CSS für das Layout. Die Tabelle wird von Nvidia genutzt was mich eig. recht wundert grad bei solch großen Firmen solch eine alte Methode zu verwenden aber naja^^. Ich habe mir bisher noch nicht die Mühe gemacht die Tabelle rauszunehmen da ich erst einmal diese Liste verstehen möchte^^

Die Daten sind, wie ich glaube festgestellt zu haben, in Javascript Dateien hinterlegt die im selben Ordner liegen.

Hier ein Auszug aus Product.js: (Eine von vielen Javascriptdateien)

var GeForce = "1";
var nForce = "2";
var Quadro = "3";
var Legacy = "4";
var GeForceGo = "5";

ProductSeries = function(id, productSeriesTypeID, name, requiresProductFamily) {
    this.ID = id;
    this.ProductSeriesTypeID = productSeriesTypeID;
    this.Name = name;
    this.RequiresProductFamily = requiresProductFamily;
}

ProductFamily = function(id, productSeriesID, name) {
    this.ID = id;
    this.ProductSeriesID = productSeriesID;
    this.Name = name;
}

/*
function Hash()
{
    this.length = 0;
    this.items = new Array();
    for (var i = 0; i < arguments.length; i += 2) {
        if (typeof(arguments[i + 1]) != 'undefined') {
            this.items[arguments[i]] = arguments[i + 1];
            this.length++;
        }
    }
    
    this.removeItem = function(in_key)
    {
        var tmp_value;
        if (typeof(this.items[in_key]) != 'undefined') {
            this.length--;
            var tmp_value = this.items[in_key];
            delete this.items[in_key];
        }
        
        return tmp_value;
    }

    this.getItem = function(in_key) {
        return this.items[in_key];
    }

    this.setItem = function(in_key, in_value)
    {
        if (typeof(in_value) != 'undefined') {
            if (typeof(this.items[in_key]) == 'undefined') {
                this.length++;
            }

            this.items[in_key] = in_value;
        }
        
        return in_value;
    }

    this.hasItem = function(in_key)
    {
        return typeof(this.items[in_key]) != 'undefined';
    }
}
*/

Die Methode das ganze Serverseitig zu gestalten dürfte schwer werden da ich mich mit solch Arten von Programiersprachen nicht auskenne. Was Ajax betrifft habe ich noch nie damit gearbeitet, die Alternative wäre umsetzbar auf gewissen Zeitraum bis die serverseitige Lösung da wäre da sie komfortabler ist und für besseres Auftreten sorgt sowohl auch in der Bedienung.

Aufjedenfall wäre mir die serverseitige Lösung lieb da die Website auf meinem eigenen Server läuft und auf ihm auch eine Datenbank zur verfügung steht.

Grüße
Aldimaster

 

[Efchen]

Die Methode das ganze Serverseitig zu gestalten dürfte schwer werden da ich mich mit solch Arten von Programiersprachen nicht auskenne.

Tatsächlich ist die serverseitige Variante aber obligatorisch, wenn das eine Website sein soll, die von allen Menschen nutzbar und barrierefrei sein soll. Denn wenn man JavaScript abschaltet, ist es aus mit Deiner Seite. Dann geht gar nichts mehr.
Und bitte nicht mit "Aber wer hat schon JS deaktiviert?" argumentieren, das zieht nicht.

Was Ajax betrifft habe ich noch nie damit gearbeitet, die Alternative wäre umsetzbar auf gewissen Zeitraum bis die serverseitige Lösung da wäre da sie komfortabler ist und für besseres Auftreten sorgt sowohl auch in der Bedienung.

Du hast nicht nachgeschaut, was Ajax ist, richtig? Das wäre aber Dein Part gewesen.
Ajax ist eine Kombination aus clientseitigem JavaScript und einer serverseitigen Lösung. Wenn Du es richtig umsetzt, also die Daten in eienr Datenbank stehen hast, dann musst Du auch bei Ajax ein serverseitiges Script haben, das die Datenbank ausliest. Man kann zwar auch bei Ajax per JavaScript eine Anfrage an den Server schicken und der liefert lediglich eine statische HTML-Seite aus, aber Du willst ja was dynamisches - Datenbank auslesen - also musst Du auch eine serevrseitige Programmiersprache einsetzen.

 

[Aldimaster]

Ich stehe natürlich voll dahinter schließlich soll es ja wirklich Jeder nutzen können und das Argument "Wer hat JS schon deaktiviert" finde ich schwachsinn da ich einige kenne die es wirklich deaktiviert haben.

Was Ajax betrifft jein^^ ich habe über Freundeskreis davon gehört aber mich damit noch nie befasst bzw. genau kundig gemacht wie es wirklich fungiert.

Welche Programmiersprache wäre am besten zu empfehlen so könnte ich mich nächste Woche mal gleich mit dieser Sprache befassen.

Grüße
Aldimaster

 

[Efchen]

Das bleibt Dir selbst überlassen, kommt ja auch drauf an, was Du schon kannst oder was Du überhaupt nutzen kannst.

Über die CGI-Schnittstelle könntest Du sowas auch in C++ schreiben. Nur wenn Du Deinen Server bei einem der üblichen Provider hast, dann wird der Dir nicht erlauben, ein compiliertes Programm hochzuladen bzw. auszuführen.

Ich persönlich würde PHP empfehlen, auch beim Einsatz mit Ajax, oder aber Perl. Gefühlsmäßig würde ich aber sagen, dass die meisten PHP einsetzen.

 

[Aldimaster]

Ich habe mir soeben mal die Funktion von Ajax in Wikipedia angeschaut und muss sagen ein recht interessantes Thema.
Wegen PHP muss ich sagen wenn das so ist, werde ich beim Einstieg keine so großen Probleme haben.

Mein Wissen beruht momentan überwiegend auf HTML und CSS (wobei ich sagen muss mit PHP bisher nur mit der Eintragung der Registrierungdaten in eine SQL Datenbank gearbeitet zu haben).

Auch sage ich erstmal danke für die echt schnelle, und das muss ich echt mal hoch loben, hilfreichen Antworten.

Ich hoffe man hört sich baldmöglichst wieder was ich glaube bei evt. Problemen schon nächste Woche sein dürfte ;D

Grüße
Aldimaster