[AJAX] Select-Field optionen hinzufügen

Headymaster

Erfahrenes Mitglied
Hallo,

habe mit Ajax noch nicht so viel Erfahrungen und habe mir mal ein kleines Script geschrieben, dass mir die Optionen eines SelectFelds beabeiten soll.

Hier mal der JS-Code:
Code:
/**
 * Fill Select
 * -> Fills a SelectField with Options
 */
NilsonAjax.prototype.GetFillSelect = function(url, ID, selID) {
    var Sel = document.getElementById(ID);
    this.XMLHTTP.open('post', url, true);
    this.XMLHTTP.onreadystatechange = this.SendFillSelect(selID);
    this.XMLHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    this.XMLHTTP.send("id="+Sel.value);
}

NilsonAjax.prototype.SendFillSelect = function(selID) {
    var Sel = document.getElementById(selID);
    
    if (this.XMLHTTP.readyState == 4) {
       // Delete Options
       Sel.length = 0;
    
       var xml = this.XMLHTTP.responseXML;
       var links = xml.getElementsByTagName('link');
       for (var i=0; i<links.length; i++) {
           var opt = document.createElement('option');
           var Name = document.createTextNode(links[i].value);
           Sel.appendChild(Name);
       }
    }
}

url -> Url zu der Funktion die mir XML zurückgibt
ID -> ID des Select-Fields welches nach auswahl das 2. Selectfeld füllen soll
SelID -> ID des zu füllenden Select-Fields

So mein Problem ist folgendes.
Wird der Ajax-Request abgesetzt, klappt alles noch wunderbar....per Post wird die id gesendet und ich kriege XML zurück im Response.
Doch das Problem liegt wohl bei der Funktion die ich bei 'onreadystatechange' aufrufe, denn die tut gar nix, als ob sie gar nicht aufgerufen werden würde.
Nichtmal die vorherigen Optionen des Select-Fields werden gelöscht.

Würde mich sehr über Hilfe freuen :)

MFG Nilson
 
Hi,

die callback-Funktion onreadystatechange erwartet die Übergabe eines Funktionsobjekts (dh. ohne Parameterliste). Willst du dennoch Parameter übergeben, kannst du eine anonyme Funktion zuweisen. Hier musst du jedoch beachten, das this-Objekt vorher zu "closuren", da in der Funktion sonst auf ein falsches Objekt Bezug genommen werden würde.
Code:
var objThis = this;
this.xmlHttpRequest.onreadystatechange = function(){ objThis.SendFillSelect(selID);}
Ciao
Quaese
 
Ah super das ist gut zu wissen :)

Jez ruft er wenigstens den Handler auf und nun brauch ich nur noch bissle was zu schreiben was mein XML verarbeitet

Danke dir

MFG Nilson
 
Ha ich habe doch noch ne Frage....und zwar wird ja nun das ganze nur ausgeführt sobald ich was im Select-Field1 ändere.

Wenn ich nun aber möchte dass er den Ajax-Vorgang schon bei laden des Select-Feldes abarbeitet, kann ich dann nen onload in das select-tag reinbasteln?!

MFG Nilson
 
Hi,

das select-Element unterstützt das onload-Attribut nicht (siehe z.B. W3C HTML 4.01, Netscape Devedge oder MSDN).

Du könntest natürlich Event Listener (addEventListener/attachEvent) registrieren und den onload-Event für das Element registrieren. Der Haken an der Sache ist, dass das Registrieren erst erfolgen kann, wenn das Element geladen ist - dann ist es jedoch schon zu spät.

Als Alternative könntest du den Ajax-Request aber im onload-Event des Dokuments das erste Mal anstossen.

Ciao
Quaese
 
kann ich nicht in dem Template einfach nen script einbinden was über window.onload dann den Ajax-Request das erste mal ausführt?

Oder habe ich dich da falsch verstanden?

MFG Nilson
 
Naja ich halte mich bei meiner Seite strikt an das MVC-Konzept und somit lade ich mir für jede Seite das entsprechende Template.....dieses Template enthält nur HTML-Code und wird in das Layout geladen.
Das heißt natürlich ich müsste wenn ich nen body onload mache in meiner kompletten applikation alles mitschleifen....aber es soll ja nur in diesem Template geladen werden...

VErständlich was ich meine?

MFG Nilson
 
Nö xD

Also wenn ich nicht mehr an den Body-Tag komme kann ich das über nen Aufruf von
Code:
<script>
window.onload = function();
</script>

So würd das klappen oder verstehe ich das falsch?

MFG Nilson
 

Neue Beiträge

Zurück