klaansieck: Ajax responseText Eventhandling

Ich möchte im ajax responseText mit den Cursortasten navigieren können (onkey)

<!--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>
  1. @@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.

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. 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

    1. 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

      1. 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

        1. 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

          1. 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

            1. 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

            2. @@JürgenB

              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.

              output hat ebenso wie span als Inhalt phrasing content [Spec]; ist also auch nicht geeignet.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hallo Gunnar,

                output hat ebenso wie span als 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

                1. 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

                  1. 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

                    --
                    Rosen sind rot.
    2. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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

      2. 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

        --
        Es gibt viel zu tun: ToDo-Liste
        1. Hallo Matthias,

          hab schon mal ein bisschen vorgelegt…

          Rolf

          --
          Dosen sind silbern
          1. Servus!

            Hallo Matthias,

            hab schon mal ein bisschen vorgelegt…

            Vielen Dank!

            Rolf

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste