nicht angemeldet
Gunnar Bittersmann
JürgenB
JürgenB
JürgenB
Rolf B
Gunnar Bittersmann
JürgenB
Gunnar Bittersmann
Ich möchte im ajax responseText mit den Cursortasten navigieren können (onkey)
Matthias Apsel
Matthias Scharwies<!--HTML-client-->
<html lang="de">
<head>
<meta charset="UTF-8">
<title>AJAX-Beispiel</title>
<script>
function testeatsuche(inhalt)
{
var x = inhalt;
if (inhalt=="")
{
document.getElementById("sicherheitshinweis").innerHTML="keine Eingabe";
return;
}
if (window.XMLHttpRequest)
{
// AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
xmlhttp=new XMLHttpRequest();
}
else
{
// AJAX mit IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ergebnis").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","atsuchexx.php?q="+inhalt,true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="text" size="10" value=""
onkeyup="testeatsuche(this.value)" >
<span id="ergebnis"></span>
</body>
</html>
<!--PHP- server-->
<input type="text" id="suchid1" size="40" onkeypress="myFunction(event)" autocomplete="off" autofocus/><br>
<a id="suchid2" onkeydown="getfocus(event1">treffer1</a><br>
<a id="suchid3" onkeydown="getfocus(event2">treffer2</a><br>
<a id="suchid4" onkeydown="getfocus(event2">treffer3xy</a><br>
@@klaansieck
Ich möchte im ajax responseText mit den Cursortasten navigieren können
?? Um irgendworin navigieren zu können, muss das ja auf dem Bildschirm (o.a. Ausgabegerät) erscheinen. Und dann ist es egal, ob das schon immer da war oder per AJAX dynamisch reingeholt wurde.
Nachgefragt: Was möchtest du?
LLAP 🖖
PS: Schmeiß bitte den Code für IE 6 und darunter weg.
Hallo,
ich habe dein Problem nicht verstanden, daher auch keine Antwort dazu. Trotzdem eine Anmerkung zu deinem Code:
// AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
// AJAX mit IE6, IE5
wo warst du die letzten Jahre?
Der IE8 wird noch gelegentlich auf alten Systemen genutzt. Im Wiki kannst du dir ansehen, wie das heute viel einfacher geht.
Noch eine Frage zu deinem Problem: Was verstehst du unter "mit den Cursortasten navigieren können (onkey)"?
Gruß
Jürgen
Hallo,
ich möchte mit den Cursortasten (ohne Mausbetätigung) ein Element des Ajax-Ergebnisses auswählen können. (Formular oder Liste ist mir egal)
Friedel
Hallo,
ich verstehe dein Problem immer noch nicht, vor allem, was das mit "Ajax responseText Eventhandling" zu tun hat. Wenn dein Text, egal wie er da rein gekommen ist, in einem geeigneten Element steht, z.B. in einer textarea, ist die Tastaturbearbeitung doch kein Problem. Ein Beispiel ist das Antwortfeld in diesem Forum.
Gruß
Jürgen
Hallo Jürgen, ich glaub ich stell mich ein wenig blöd an. Wie bekomme ich das Ergebnis aus: document.getElementById("ergebnis").innerHTML=xmlhttp.responseText;
in einen geeignetes Element?
Bisher wird, egal ob Formular oder Liste geliefert wurde selbiges nach dem letzten Bereich <span id="ergebnis"></span> angezeigt.
Friedel
Hallo
Wie bekomme ich das Ergebnis aus: document.getElementById("ergebnis").innerHTML=xmlhttp.responseText;
in einen geeignetes Element?
indem das Element mit der ID "ergebnis" ein geeignetes ist.
Bisher wird, egal ob Formular oder Liste geliefert wurde selbiges nach dem letzten Bereich <span id="ergebnis"></span> angezeigt.
Enthält responseText denn nur Text oder HTML? Wenn da HTML zurückkommt, gelten die Verschachtelungsregeln vom HTML. Ein span ist daher nicht das geeignete Element. Versuch es mal mit einem div oder einem output. Die Elemente im responseText müssen dann natürlich auch focusierbar sein.
Gruß
Jürgen
Hallo JürgenB,
nein, nicht output, das ist für strukturierten Inhalt nicht gedacht.
Brauchbar ist div - oder mit semantischem Markup section.
Wenn die letzten 5 Zeilen des OP die Antwort darstellen, die vom Ajax-Request geliefert wird, stellt sich auch die Frage nach der Funktion myFunction. Die ist nicht im Code der Hauptseite, auch nicht im nachgeladenen Code. Die Funktion getfocus auch nicht. Hinzu kommt der Syntax-Fehler in den onkeydown Events der a Elemente, da fehlt eine Klammer. Was es mit den Variablen event, event1, event2 und event3 auf sich hat, ist auch unklar. Sollen das Strings sein? Dann müssen sie in Hochkomma stehen.
HTML 5 legt fest, dass Script nicht ausgeführt wird, das an innerHTML zugewiesen wird. Ich habe es nicht probiert - aber ich gehe davon aus, dass auf diese Weise auch keine Funktionen deklariert werden können. Script in onXXX Attributen WIRD ABER AUSGEFÜHRT. D.h. man müsste die Funktionen myFunction und getfocus separat laden, bzw. in der Hauptseite bereits vorhalten.
Wenn die Struktur des empfangenen HTML Fragments dem Aufrufer wohlbekannt ist, kann man auch auf onXXX Attribute im HTML Fragment verzichten und statt dessen nach der Zuweisung an innerHTML die Eventhandler mit addEventListener zuweisen. Die Listener-Funktion, die man so zuweist, könnte dann auch das Property 'target' des event-parameters, den sie bekommt, analysieren und die ID des Target-Elements abfragen. Dann muss man die Event-Quelle nicht als eigenen Parameter übergeben.
Rolf
@@JürgenB
Wenn da HTML zurückkommt, gelten die Verschachtelungsregeln vom HTML. Ein
spanist daher nicht das geeignete Element. Versuch es mal mit einemdivoder einemoutput.
output hat ebenso wie span als Inhalt phrasing content [Spec]; ist also auch nicht geeignet.
LLAP 🖖
Hallo Gunnar,
outputhat ebenso wiespanals Inhalt phrasing content [Spec]; ist also auch nicht geeignet.
oh, das wusste ich nicht. Das heist, Tabellen dürfen auch nicht in ein Output? Das muss ich dann im Wiki korrigieren.
Gruß
Jürgen
Ihr habt Euch sehr viel Mühe mit mir gegeben. Vielen Dank erstmal. Nun die funktionierende Lösung:
<!DOCTYPE html>
<html>
<head>
<style>
a {
padding: 0.2em;
margin: 0.2em;
color: #252525;
text-decoration: none;
font-family: Arial, sans;
}
a:focus, a:active {
color: #C13832;
}
</style>
</head>
<body>
<input type="text" id="suchid1" onkeydown="getfocus(event,1,2)" size="40" onkeyup="testeatsuche(this.value)" autocomplete="off" autofocus><br><span id='sicherheitshinweis'></span>
<p>Fokus durch Cursertasten nach oben und unten andern, auf Return Link folgen.</p>
<p id="demo"></p>
<script>
function testeatsuche(inhalt)
{
var x = inhalt;
var param = x;
if (inhalt=="")
{
document.getElementById("sicherheitshinweis").innerHTML="keine Eingabe";
return;
}
if (window.XMLHttpRequest)
{
// AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
xmlhttp=new XMLHttpRequest();
}
else
{
// AJAX mit IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sicherheitshinweis").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../../db/medsuche.php?q="+param,true);
xmlhttp.send();
}
function getfocus(event,vor,nach) {
var x = event.keyCode;
if (x == 40){ // nach unten
var neuerfocus = "suchid" + nach;
document.getElementById(neuerfocus).focus();
}
if (x == 38){ // nach oben
var neuerfocus = "suchid" + vor;
document.getElementById(neuerfocus).focus();
if (neuerfocus == "suchid1") {
setTimeout(function(){ // setzt den Cursor an das Ende des Input-Felds
var anfrage = document.getElementById(neuerfocus).value;
document.getElementById("suchid1").value = '';
document.getElementById("suchid1").value = anfrage;
}, 0);
}
}
}
function myFunction(event,vor,nach) {
var x = event.keyCode;
document.getElementById("demo").innerHTML = "The Unicode value is: " + x;
}
</script>
</body>
</html>
../../medsuche liefert z.B.: (nur syntaktisch korrekt, ansonsten Unsinn)
<a id="suchid2" href="treffer1" onkeydown="getfocus(event,1,3)">text1</a><br>
<a id="suchid3" href="treffer2" onkeydown="getfocus(event,2,4)">text2</a><br>
<a id="suchid4" href="treffer3" onkeydown="getfocus(event,3,5)">text3</a><br>
<a id="suchid5" href="treffer4" onkeydown="getfocus(event,4,6)">text4</a><br>
<a id="suchid6" href="treffer5" onkeydown="getfocus(event,5,6)">text55</a><br>
Friedel
Hallo klaansieck,
Nun die funktionierende Lösung:
Ein paar Hinweise:
font-family: Arial, sans;
sans ist keine gültige generische Schriftfamilie.
<input type="text" id="suchid1" onkeydown="getfocus(event,1,2)" size="40" onkeyup="testeatsuche(this.value)" autocomplete="off" autofocus><br><span id='sicherheitshinweis'></span>
text ist der Standardwert für type-Attribute von input-Elementen, kann also weg.
on-attribute sind bäh.
br-Elemente sind für Zeilenumbrüche innerhalb von Adressen oder Gedichten gedacht
Ersetze das span durch p und du brauchst das br nicht.
// AJAX mit IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Ernsthaft?
document.getElementById("suchid1").value = ''; document.getElementById("suchid1").value = anfrage;
Da sollte auch die zweite Zeile reichen.
Bis demnächst
Matthias
@@JürgenB
Im Wiki kannst du dir ansehen, wie das heute viel einfacher geht.
Wenn es um „viel einfacher“ geht, ist das die falsche Stelle.
An der richtigen gibt’s noch nichts zum Ansehen.
LLAP 🖖
Hallo Gunnar,
An der richtigen gibt’s noch nichts zum Ansehen.
ich bin bei so "modernem Zeugs" immer noch etwas zurückhaltend. Da müssen die Vorteile schon gravierend sein, dass ich die IEs nicht mehr unterstütze.
Gruß
Jürgen
Servus!
@@JürgenB
Im Wiki kannst du dir ansehen, wie das heute viel einfacher geht.
Wenn es um „viel einfacher“ geht, ist das die falsche Stelle.
An der richtigen gibt’s noch nichts zum Ansehen.
Du hast Dir grad ein <I> gekauft!
LLAP 🖖
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
hab schon mal ein bisschen vorgelegt…
Rolf
Servus!
Hallo Matthias,
hab schon mal ein bisschen vorgelegt…
Vielen Dank!
Rolf
Herzliche Grüße
Matthias Scharwies