JavaScript Code nachladen

[izakstern]

Hallo alle zusammen,

mich beschäftigt folgendes Problem:

Ich habe eine <input>-Feld für den Ort, sobald ich dort den Ort oder nur einen Teil der Buchstaben eingebe lade ich mittels AJAX einen Div-Container in dem eine Auswahl von Orten erscheint. Die Orte in den Containern sind Links wo ich mittels OnClick erreichen wollte, dass der gewählte Ort dann in das <input>-Feld hineingeschrieben wird. Leider funktioniert das nicht, da ja anscheinend der nachgeladene JavaScript-Code nicht geparsed wird.

Nach langem googlen habe ich zwar viele ähnlichen Fälle gefunden aber keines welches ich verstanden habe und umsetzen konnte. Leider hab ich etwas gefährliches Halbwissen.

Kann jemand das für Dummys kurz erklären was ich zu tun habe oder mich auf ein tutorial verweisen was ich verstehe?

Wäre gut wenn ich nicht erst die gesamte JavaScript-Fibel lesen müsste und gezielt das Problem lösen könnte..

Vielen Dank!

 

[jeipack]

ich nehme an du hast am Anfang sowas:

jQuery(document).ready(function() {
$("meineOrte").click(function() {
  doSomething();
});

Da die Orte (Was das auch immer für Elemente sind) ja erst später geladen werden, werden bei document.ready die Eventlistener noch nicht an diese angehängt. Diese existieren ja noch gar nicht.

Du musst nachdem der AJAX Befahl geladen wurde und die Elemente in der Seite plaziert wurden den Eventlistener anhängen.

Mit Pseudocode:

$.ajax().done(function(data) {
  //Hier werden jetzt die Elemente erstellt
  foreach(data) {
    //Füge die Ortschaft deinem Container hinzu:
    Container.after("<span name="klickbarerOrt">"+data[i]+"</span>"); 
  }
  $("[name=klickbarerOrt]").click(function() {
    uebernehmeOrt($(this).html());
  }
});

Wie gesagt, Pseudocode. Aber sollte das vorgehen aufzeigen.

Viel Erfolg

 

[izakstern]

[Vorwort: Wenn ein Könner Lust hat und vielleicht 30 Minuten investiert, wär ich z.B. bereit 20 Euro abzudrücken )]
Ziel für mich ist für mich am Beispiel Google leicht zu erklären: Wenn ich bei google Suchwörter erscheint darunter eine Box mit verschiedenen "Links", sobald ich auf die Box klicke wird das Suchwort in das Textfeld bzw. eben diese Eingabebox geschrieben und das Formular abgeschickt. (Ich brauche im Prinzip nur diese Box in der ich dynamisch eine beliebige Liste reinladen kann und wo ich dann den Link anklicken kann und der gewählte Link erscheint in der Box) Meinetwegen auch in JQuery geschrieben, dann muss ich ja zusätzlich nur die Bibliothek einbinden, wenn ich das richtig verstanden habe.

Ansonsten brauch ich weiter HIlfe ->

Erstmal vielen Dank für die Antwort. Vielleicht ist das eine Schande, aber leider benutze ich dort garkeine JQuery Bibliothek.

Folgenden Sachstand habe ich:

1) Ein Formular mit diesem (hier aufs wesentlich gekürzte) Feld und einem drauffolgendem span:

echo "<tr><td>Ort:</td><td><input type='text' onkeyup='searchFor(this.value);' onBlur='hidebox();' class='inputfeld_std' name='bortneu' id='bortneu' maxlength='20' style='width: 200px;' value=''><span class='box_ortssuche' id='box_ortssuche'></td></tr>";

Folgende js Datei:

function searchFor(suchbegriff)
{
    var xmlHttp = null;
    // Mozilla, Opera, Safari sowie Internet Explorer 7
    if (typeof XMLHttpRequest != 'undefined')
    {
        xmlHttp = new XMLHttpRequest();
    }
    if(!xmlHttp)
    {
        // Internet Explorer 6 und älter
        try
        {
            xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xmlHttp  = null;
            }
        }
    }
    // Wenn das Objekt erfolgreich erzeugt wurde
    if (xmlHttp)
    {
        var url = "./php/index/module/ortssuche.php";
        var params = "suchbegriff="+suchbegriff;

        xmlHttp.open("POST", url, true);

        //Headerinformationen für den POST Request
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.setRequestHeader("Content-length", params.length);
        xmlHttp.setRequestHeader("Connection", "close");

        xmlHttp.onreadystatechange = function ()
        {
            if (xmlHttp.readyState == 4)
            {
                document.getElementById("box_ortssuche").innerHTML = xmlHttp.responseText;
                document.getElementById("box_ortssuche").style.display = "block";

            }
        };
        xmlHttp.send(params);
        

    }
}
function hidebox()
{
    document.getElementById("box_ortssuche").style.display = "none";
}
function setort(ort)
{
    alert(ort);
    alert("ahhhllo");
}

Die PHP-Datei "ortssuche.php" macht im Ergebnis etwa folgendes:
echo "<a href='xx' onClick='xx'>utf8_encode($result['name'])."</a>";

Dazu noch den CSS-Teil:

.box_ortssuche
{
    position: absolute;
    display: none;
    width: 194px;
    z-index: 50;
    background-color:#C4C4C4;
    border-color: #BD0304;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    padding: 3px;
}