Ajax

HI,

ich hab schon ein bisschen gesucht aber noch nichts gefunden was geklappt hat. Ich habe ein input Feld in dem eine Zahl eingeben wir (ID von der Datenbank) dann soll durch Ajax der Pfad aus der Datenbank geholt werden wo das Bild auf dem Server liegt und dann wieder von Javascript in der Seite angezeigt werden.

Ich hänge nur noch bei AJAX und bekomme es nicht hin eine anfrage an den Server schicke (z.b. pic.php?id=IDAUSINPUTFELD) und dann den Pfad in eine Javascriptvariable zu bekommen.

Könnte jemand so lieb sein und mir vill den Code für AJAX Posten oder einen Guten Link geben

Danke
LG

Ich hab Ajax zwar nicht all zu oft benutzt, und wenn nur mit dem Beispielcode von nem Tut, weil ichs auch nicht wirklich kann.

Hier das Tut, das tut: ajax.frozenfox.at/

Es wäre gut, wenn du das, was du bisher schon hast, einmal posten könntest bzw. erklären könntest, was genau nicht funktioniert, denn bei AJAX gibt es eine Menge Punkte, an denen es haken kann. Der erste Schritt wäre, zu schauen, was die Fehlerkonsole sagt (FF: STRG+J).

Ansonsten kannst du zum besseren Händeln der Anfragen die Funktion thorr.bplaced.net/support/ajaxrequest.js verwenden. Wie du eine Anfrage initialisierst und absetzt, sollte eigentlich soweit klar sein - ansonsten einfach fragen.

Für deinen konkreten Fall würde ich auf jeden Fall zunächst ein Formular mit ID deklarieren, das dann das Textfeld beinhaltet. Dem Textfeld weist du dann den Namen picid und per onchange-Handler eine Funktion zu, die die AJAX-Anfrage stellt.

Aber genauer kann ich auf dein Anliegen nicht eingehen, wenn ich keine Referenz habe.

@Mgier: Danke hat so weit geklappt.

@thorr: imagesandmore.mx.am/test/

Hier die Seite später soll das mal ein kleines Bestellformular sein wo man Bilder kaufen kann (glaube nicht das das jemand kaufen will aber das is ein anderes Thema).

Um die Bilder zu kaufen muss man die Bild ID eingeben und dann sollte das Bild neben dem Input Feld stehen (Einmal um eine überprüfung zu haben ob es auch das wichtig Bild ist und zweitens ist es ein netter Effect :wink:)

Bis jetz klappt es aber nur die Anfrage und man bekommt sogar den richtigen Pfad zurück (getestet durch ein alert) aber das Bild (was ich im moment noch eingetragen hab später soll da kein Bild sein nur wenn man ne ID einträgt) wechselt nicht.

Hoffe ich habe das verständlich beschrieben.

Vielen Dank schon mal

LG FLo

Ich vermute, dass das daran liegt, dass du als Element-ID die Variable pic01 übergibst, die natürlich nicht vorhanden ist und somit als leer betrachtet wird. Hättest du jedoch meinen Tipp mit der Fehlerkonsole beachtet, hättest du das Problem erkannt. :wink:

Hi,

die Fehlerkonsole sagt “Bildid” ist nicht definiert. Ich hab mal den Quellcode zusammen gefasst wo ich denke woran es liegt. Ich laube das bei
request.onreadystantechange = interpretRequest;
auch nochmal die funktionsvariable Bildid übergeben werden muss.
Deshalb hab ich es so Versucht
request.onreadystantechange = interpretRequest(Bildid);
[…]
function interpretRequest(Bildid) {
[…]
Ich finde diesen doofen Fehler nicht … :frowning:

Ich füge mal unten den Kompletten Code an vill kannst du ihn dir mal anschaun.

LG Flo

Zusammenfassung

[...]
function setRequest(value, Bildid) {
[...]
// Request auswerten
request.onreadystatechange = interpretRequest;
[...]
// Request auswerten
function interpretRequest() {
[...]
document.getElementById(Bildid).src = content;
[...]

[code] <!–
var request = false;
//var content = ‘’;
// Request senden
function setRequest(value, Bildid) {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject(‘Msxml2.XMLHTTP’); // IE 5
} catch (e) {
try {
request = new ActiveXObject(‘Microsoft.XMLHTTP’); // IE 6
} catch (e) {}
}
}

	// überprüfen, ob Request erzeugt wurde
	if (!request) {
		alert("Kann keine XMLHTTP-Instanz erzeugen");
		return false;
	} else {
		var url = "ajax_pic.php";
		// Request öffnen
		request.open('post', url, true);
		// Requestheader senden
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		// Request senden
		request.send('id='+value);
		// Request auswerten
		request.onreadystatechange = interpretRequest;
	}
}

// Request auswerten
function interpretRequest() {
	switch (request.readyState) {
		// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
		case 4:
			if (request.status != 200) {
				alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
			} else {
				var content = request.responseText;
				// den Inhalt des Requests in das <div> schreiben
				alert(content); 
                                    document.getElementById(Bildid).src = content;
			}
			break;
		default:
			break;
	}
}

//–>[/code]

Danke, das wäre aber nicht nötig gewesen - ich hab mir den Code schon über den Browser angeschaut. Wie gesagt, du übergibst eine Variable namens pic01 im onchange-Handler - willst du eine Zeichenkette übergeben, was du ja auch willst, nämlich den ID-Namen, dann musst du einfache oder doppelte Anführungszeichen drumherumsetzen.

Hi,
Danke thorr für deinen Tipp.
Habe das pic01 in ’ gesetzt aber leider klappt es noch immer nicht (Browsercache geleert).
Ich füge mal ein Foto an ich weiß einfach nicht mehr wo der Fehler sein könnte.

LG Flo

Deine Funktion interpretRequest kennt keine Variable namens Bildid.
Bildid ist nur in setRequest vorhanden, weil du dort einen Parameter mit diesem Namen deklariert hast.

Du solltest dich etwas mehr mit den Grundlagen von JavaScript beschäftigen, wenn du so etwas umsetzen willst.

Hi,

danke für deinen Tipp. Ich mir schon gewusst das Variablen in functionen nur gelten. Deshalb auch mein Lösungsüberlegung (s.u.) was leider nicht klappte. Du hast mich aber auf eine Idee gebracht die Variable global zu machen.

LG Flo

[quote]Ich laube das bei
request.onreadystantechange = interpretRequest;
auch nochmal die funktionsvariable Bildid übergeben werden muss.
Deshalb hab ich es so Versucht
request.onreadystantechange = interpretRequest(Bildid);
[…]
function interpretRequest(Bildid) {
[…]
Ich finde diesen doofen Fehler nicht … :([/quote]

[size=200]Jetz klappt alles Danke an alle!![/size]
Lösung:
Ich habe global die Variable PIC_ID “erstellt” und dann in der function den Inhalt von Bildid an PIC_ID übergeben.

Vielen Dank an alle Helfer