Anchor Event registrieren und eigenes Objekt übergeben

[eminwargo]

Hallo,

ich habe eine Liste:

<ul data-role="listview">
                </ul>

und die befülle ich mit Einträgen aus der Datenbank:

$('ul').append('<li><a>' + results.rows.item(i).title + '</a></li>');

Das sieht dann so aus:Listview - jQuery Mobile Demos

Jetzt möchte ich wenn man auf ein Eintrag klickt, dass weitere Eigenschaften zu diesem Eintrag angezeigt werden.

Könnte man das vllt so machen, dass ich die ausgelesenen Reihen aus der Datenbank jeweils in ein Objekt speicher. Den einzelnen A Tags aus der Liste ein Listener zuweisen und beim klicken auf den Eintrag das Objekt übergebe an zb eine Methode die die Eigenschaften dann anzeigt ?! Wenn möglich wie könnte das ausehen...

 

[mikdoe]

Warum nicht einfach ein onclick an jedes Element, das anklickbar sein soll? Und dahinter dann ein Script das per Ajax die Daten holt. Oder was meinst du?
Dein <a> ist übrigens - soweit ich das sehe - mit keiner Funktion befüllt. Warum setzt du es?

 

[dbarthel]

Dein <a> ist übrigens - soweit ich das sehe - mit keiner Funktion befüllt. Warum setzt du es?

Ich nehme an, deshalb:

Jetzt möchte ich wenn man auf ein Eintrag klickt, dass weitere Eigenschaften zu diesem Eintrag angezeigt werden.

 

[miniA4kuser]

Warum nicht einfach ein onclick an jedes Element, das anklickbar sein soll? Und dahinter dann ein Script das per Ajax die Daten holt. Oder was meinst du?

Quasi so:

$('<li><a>' + results.rows.item(i).title + '<\/a><\/li>')
	.appendTo('ul')
	.find('a')
	.on('click', function () {
		//   ... Hier dann den AJAX-Aufruf starten ...
	});

 

[kkapsner]

.find('a')

Ich finde ja solche Konstrukte ist echt hässlich und langsam... hab' gerade ein Element per JS erzeugt und muss das jetzt mit einem Selektor erst suchen... auch kann es passieren, dass man sich so eine schöne XSS-Lücke einbaut (in .title kann ja alles mögliche drinstehen):

kkjs.node.create({
	tag: "li",
	childNodes: [
		{
			tag: "a",
			events: {
				click: function(){
					// Hier AJAX-Code
				}
			},
			childNodes: [results.rows.item(i).title]
		}
	]
	parentNode: kkjs.css.$("ul")[0]
});

 

[tsseh]

Ich finde ja solche Konstrukte ist echt hässlich und langsam...

das erstere ist geschmackssache, mir gefällt es z.b. wesentlich besser als deine variante
und das zweitere, naja ... 1. wäre ich mir da nicht so sicher und 2. wenn man jetzt bei einem test feststellt, dass 10000 aufrufe ein paar ms langsamer sind, sagt das was aus? nichts!
das ist aber gar nicht der punkt. jquery hat sich durchgesetzt als selector/dommanipulations framework. dafür etwas eigenes zu nehmen, zu entwickeln und zu pflegen ist nicht sinnvoll.

hab' gerade ein Element per JS erzeugt und muss das jetzt mit einem Selektor erst suchen...

es wurden 2 elemente eingefügt und aus diesem set bestehend aus 2 elementen wird 1 gesucht
man könnte das auch so

$('<li></li>').append($('<a>' + results.rows.item(i).title + '</a>').on('click', function()
{
  // Hier AJAX-Code
})).appendTo($("ul"));
});

machen, dann hat man keine suche, das macht das kraut aber auch nicht fett

auch kann es passieren, dass man sich so eine schöne XSS-Lücke einbaut (in .title kann ja alles mögliche drinstehen):

ich wüsste nicht wie

 

[kkapsner]

das erstere ist geschmackssache

Hatte ich ja auch geschrieben...

wesentlich besser als deine variante

darf es ja auch

wäre ich mir da nicht so sicher

Ich hab's nicht getestet, aber DOM-Zugriffe sind meistens der Flaschenhals... auch hab' ich irgendwo mal gelesen (finde es gerade nicht mehr), dass die schnellste Art, DOM-Nodes mit jQuery zu erzeugen diese ist:

$(document.createElement("a"));

...

wenn man jetzt bei einem test feststellt, dass 10000 aufrufe ein paar ms langsamer sind, sagt das was aus? nichts!

Es sagt aus, dass es ein paar ms langsamer ist... das ist nicht "nichts" - aber das ist auch nicht mein Punkt. Mir geht es darum, dass man Nodes, die man erzeugt und später nochmal braucht auch so erzeugen sollte, dass man sie nicht zuerst wieder suchen muss. Genau dafür gibt es Variablen...

jquery hat sich durchgesetzt als selector/dommanipulations framework.

Ja und? Was hat das jetzt mit dem Thema zu tun. Dass ich jQuery nicht mag, ist ja bekannt. Das hatte ich aber jetzt gar nicht erwähnt und darum ging es auch gar nicht.

dafür etwas eigenes zu nehmen, zu entwickeln und zu pflegen ist nicht sinnvoll.

Warum nicht? Ist eine super Übung und ich komme mit meinem besser zu Recht, weil ich die API so gestalten kann, wie ich sie gerne hätte. Meine Selektorengine kommt zwar bei weitem nicht an jQuery ran, aber meistens will ich sowieso nur Elemente per ID oder Klasse ansprechen.
Auch ist jQuery, meiner Meinung nach, für was anderes als

selector/dommanipulations

nicht wirklich zu gebrauchen - wurde ja auch nur dafür entwickelt.

man könnte das auch so [...] machen,

Gut - jetzt hast du meinen Ansatz in jQuery umgeschrieben. Hab' nie behauptet, dass man das mit jQuery nicht kann. Hatte nur keine Lust, mich da reinzudenken.

macht das kraut aber auch nicht fett

Es geht mir nicht um fettes Kraut, sondern um klar strukturierten Code.

ich wüsste nicht wie

Tja - genau das ist das Problem, wenn man ein Framework verwendet, das man nicht selber geschrieben hat, und die Doku nicht auswendig kennt. Wenn du Elemente mit $ erzeugst und dann mit .append oder .appendTo ins DOM einfügst, werden <script>-Nodes ausgeführt. Wenn also in dem .title sowas wie

<script>alert("XSS");</script>

drin steht (und wir wissen nicht, wie das erzeugt wird und wo das genau herkommt), wird das ausgeführt.

 

[miniA4kuser]

Tja - genau das ist das Problem, wenn man ein Framework verwendet, das man nicht selber geschrieben hat, und die Doku nicht auswendig kennt. Wenn du Elemente mit $ erzeugst und dann mit .append oder .appendTo ins DOM einfügst, werden <script>-Nodes ausgeführt. Wenn also in dem .title sowas wie

<script>alert("XSS");</script>

drin steht (und wir wissen nicht, wie das erzeugt wird und wo das genau herkommt), wird das ausgeführt.

Nuja, in der API Dokumentation wird ja auch explizit darauf hingewiesen:

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, <img onload="">). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

Um mal ein paar Punkte zusammenzufassen, hier noch ein Beispiel wo nicht noch einmal nach einem Element gesucht wird und nichts ausgeführt wird (XSS):

$('<li>').append(
	$('<a>', {
		text: results.rows.item(i).title
	}).on('click', function () {
		// Hier AJAX-Code
	})
).appendTo('ul');

Oder auch gleich die Eventregistrierung mit in die Elementgeneration einbinden:

$('<li>').append(
	$('<a>', {
		text: value,
		on: {
			click: function () {
				// Hier AJAX-Code
			}
		}
	})
).appendTo('ul');

 

[tsseh]

auch hab' ich irgendwo mal gelesen (finde es gerade nicht mehr), dass die schnellste Art, DOM-Nodes mit jQuery zu erzeugen diese ist:

$(document.createElement("a"));

das ist doch käse, dann kann man das gleich sein lassen, mit frameworks, js, scriptsprachen, höhere programmiersprachen
in asm bekommt man alles schneller hin, merkt zwar keiner, aber ist schneller

Mir geht es darum, dass man Nodes, die man erzeugt und später nochmal braucht auch so erzeugen sollte, dass man sie nicht zuerst wieder suchen muss. Genau dafür gibt es Variablen...

und wenn meine variable eine liste ist, muss man darin erst den entry suchen, mit dem man mal was spezielles machen möchte

Ja und? Was hat das jetzt mit dem Thema zu tun.

genausoviel, wie deinen aussage, dass solche Konstrukte hässlich sind
dass, wenn man ein framework in einem beispiel nutzt, man eins wählen sollte, was einigermaßen bekannt, stabil, gepflegt ist, oder nativ code verwenden

Auch ist jQuery, meiner Meinung nach, für was anderes als
selector/dommanipulations
nicht wirklich zu gebrauchen - wurde ja auch nur dafür entwickelt.

verstehe nicht worauf du hinaus willst

Ist eine super Übung

ja, mehr aber auch nicht

Es geht mir nicht um fettes Kraut, sondern um klar strukturierten Code.

ich finde das beispiel von miniA4kuser klar strukturiert

Tja - genau das ist das Problem, wenn man ein Framework verwendet, das man nicht selber geschrieben hat, und die Doku nicht auswendig kennt. Wenn du Elemente mit $ erzeugst und dann mit .append oder .appendTo ins DOM einfügst, werden <script>-Nodes ausgeführt. Wenn also in dem .title sowas wie

<script>alert("XSS");</script>

drin steht

mir ist durchaus bewusst, dass die jquery funktionen scripte ausführen, hatten wir ja erst, aber ich wüsste nicht, wie das hier gehen soll.

(und wir wissen nicht, wie das erzeugt wird und wo das genau herkommt), wird das ausgeführt.

und die befülle ich mit Einträgen aus der Datenbank:

 

[mikdoe]

hesst, weiter unten sind Zitate kaputt gegangen. Der letzte Satz und die befülle ich mit Einträgen aus der Datenbank machte den Eindruck als käme da noch was?

 

[tsseh]

danke, habs angepasst

 

[kkapsner]

@miniA4kuser: ja, so find ich's schöner. Das zweite sieht ja fast so aus wie mein Code...

das ist doch käse

Natürlich ist das schlechter Stil. War nur ein Punkt, warum ich meine, dass das langsamer ist. Hab' auch nicht gesagt, dass man das verwenden sollte. Nur, dass es schneller ist...
Auch hab' ich nichts gegen Frameworks gesagt.

und wenn meine variable eine liste ist, muss man darin erst den entry suchen, mit dem man mal was spezielles machen möchte

Das ist dann aber auch schlechter Stil, wenn ich etwas in eine Liste packe, das ich separat brauche. Auch ist das so hier nicht richtig. Du hast da eine Liste mit exakt einem Element (das <li>) und dieses Element hat dann eine Referenz auf eine weitere Liste (.childNodes) in der dann das gewünsche Element (das <a>) drin ist.

dass, wenn man ein framework in einem beispiel nutzt, man eins wählen sollte, was einigermaßen bekannt, stabil, gepflegt ist, oder nativ code verwenden

OK - das ist ein Punkt, aber mit nativem JS ist das einfach zu nervig...

verstehe nicht worauf du hinaus willst

Dass jQuery nicht wirklich viel bietet, wenn man nicht mit dem DOM arbeitet. Und das, was es anbietet, finde ich nicht so toll (z.B. das $.each() eine andere Callbacksignatur als $.map() hat).

ich finde das beispiel von miniA4kuser klar strukturiert

Das Beispiel ist gut strukturiert. Nur das .find() fande ich nicht klar strukturiert.

aber ich wüsste nicht, wie das hier gehen soll

Und wie wird die DB befüllt? Kann ja sein, dass das über Nutzereingaben befüllt wird.

 

[tsseh]

Dass jQuery nicht wirklich viel bietet, wenn man nicht mit dem DOM arbeitet.

doch, jquery bietet ne ganze menge auf dem gebiet domselektion/domnavigation/dommanipulation
und das was es bietet, ist meistens sehr gut

Und das, was es anbietet, finde ich nicht so toll (z.B. das $.each() eine andere Callbacksignatur als $.map() hat).

für sowas haben sich andere frameworks durchgesetzt, underscore/lowdash zukünftig vermutlich ramda

Nur das .find() fande ich nicht klar strukturiert.

ich finde, das ist die übersichtlichste, eleganteste variante. den code versteht jeder
die unübersichtlichste ist mMn die letzte

Und wie wird die DB befüllt? Kann ja sein, dass das über Nutzereingaben befüllt wird.

was schon sehr konstruiert erscheint, aber selbst wenn, sollte davon nach mehreren contextwechseln nichts mehr zurückkommen

 

[kkapsner]

doch, jquery bietet ne ganze menge auf dem gebiet domselektion/domnavigation/dommanipulation
und das was es bietet, ist meistens sehr gut

Sag' mal, liest du meine Beiträge überhaupt? Ich schrieb:

wenn man nicht mit dem DOM arbeitet.

andere frameworks

Ja. Genau das war meine Aussage...

ich finde, das ist die übersichtlichste, eleganteste variante.

Hab' ich mir schon gedacht, dass das deine Meinung ist. Ich habe eine andere. Punkt.

was schon sehr konstruiert erscheint

Finde ich jetzt nicht.

sollte davon nach mehreren contextwechseln nichts mehr zurückkommen

Das finde ich jetzt nicht wirklich sauber. Man sollte immer für den Kontext escapen, in den man gerade einträgt. Wenn ich irgendeinen Titel in eine DB schreibe, mach' ich da doch keine HTML-Entities rein.
Die HTML-Entities kommen rein, wenn ich in's HTML schreibe und weiß, dass der Titel als Plaintext angezeigt werden soll.
Wenn ich den Titel dann z.B. in ein PDF schreibe, mach' ich die Modifikationen für PDF.

Ich weiß, dass das übliche Praxis ist, aber ich hab' auch schon oft gesehen, dass dann etwas doppelt maskiert wurde oder in einem anderen Kontext dann falsch dargestellt wurde.

 

[tsseh]

Sag' mal, liest du meine Beiträge überhaupt?

ich schrieb:

jquery hat sich durchgesetzt als selector/dommanipulations framework.

du schriebst:

Auch ist jQuery, meiner Meinung nach, für was anderes als
selector/dommanipulations
nicht wirklich zu gebrauchen

ich schrieb

verstehe nicht worauf du hinaus willst

du schriebst:

Dass jQuery nicht wirklich viel bietet, wenn man nicht mit dem DOM arbeitet.

ich schrieb:

doch, jquery bietet ne ganze menge auf dem gebiet domselektion/domnavigation/dommanipulation
und das was es bietet, ist meistens sehr gut

also ja, ich lese deine beiträge, aber was willst du sagen? dass man mit einem tenisschläger schlecht fliegen erschlagen kann? ja, dafür gibt es ja auch fliegenklatschen.

Genau das war meine Aussage...

die habe ich bisher so nicht gesehen/dich so nicht verstanden

Das finde ich jetzt nicht wirklich sauber. Man sollte immer für den Kontext escapen, in den man gerade einträgt. Wenn ich irgendeinen Titel in eine DB schreibe, mach' ich da doch keine HTML-Entities rein.

wie ist denn der titel dieses threads in der db gespeichert? kommst du da ran?

Die HTML-Entities kommen rein, wenn ich in's HTML schreibe und weiß, dass der Titel als Plaintext angezeigt werden soll.

ja, spätestens, wenn ich die datenbank auf dem server auslese und wieder ans html schicke

Wenn ich den Titel dann z.B. in ein PDF schreibe, mach' ich die Modifikationen für PDF.

prinzipiell hast du recht

 

[kkapsner]

aber was willst du sagen?

Dass man mit jQuery nur DOM-Sachen machen kann - wenn einem die API zusagt, was bei mir nicht der Fall ist. Aber das ist Geschmackssache.

die habe ich bisher so nicht gesehen/dich so nicht verstanden

Dann habe ich mich nicht verständlich genug ausgedrückt. Ich verwende mein Framework, da es auch Sachen außerhalb des DOMs anbietet (und meiner Meinung nach nicht schlecht - aber ich bin ja auch befangen) und man muss ja sowieso zu jQuery noch was dazunehmen. Zusätzlich kann ich die DOM-API so gestalten kann, wie ich das gerne hätte.

wie ist denn der titel dieses threads in der db gespeichert? kommst du da ran?

Keine Ahnung. Komme da nicht dran. Müsst mo mal nachsehen.

prinzipiell hast du recht

Gut, dass wir uns wenigstens da einig sind.

 

[eminwargo]

Ich habs jetzt so gemacht:

function loadVocabulary() {
    db.transaction(selectVocabulary, errorSelect, successSelect);

    function selectVocabulary(tx) {
        tx.executeSql(getSQLVocabulary + currentCategory, [], successSelect, errorSelect);
    }

    function errorSelect(err) {
        alert("Fehler beim Laden der Vokabeln: " + err.code);
    }

    function successSelect(tx, results) {
        var length = results.rows.length;
        arrayVocabulary = new Array(length);

        for (var i = 0; i < length; i++) {
            var id = results.rows.item(i).id;
            var title = results.rows.item(i).title;
            var definition = results.rows.item(i).definition;
            var addition = results.rows.item(i).addition;
            var timestamp = results.rows.item(i).timestamp;

            arrayVocabulary[i] = new Vocabel(id, title, definition, addition, timestamp);

            var itemLink = document.createElement("a");
            itemLink.innerHTML = title;
            itemLink.name = i;

            $(itemLink).click(function(event) {
                showVocabulary(event);
                showShowPage();
            });

            var listItem = document.createElement("li");
            listItem.appendChild(itemLink);
            $('#listVocabulary').append(listItem);
        }

        $('#listVocabulary').listview('refresh');

        function showVocabulary(event) {
            var index = event.target.name;
            var vocabel = arrayVocabulary[index];
            $("#show #showTitle").val(vocabel.title);
            $("#show #showDefinition").val(vocabel.definition);
            $("#show #showAddition").val(vocabel.addition);
        }
    }
}

- - - Aktualisiert - - -

Ich habe eine Sache die einfach nicht funktionieren möchte. Meine Variable id wird einfach nicht mit results.rows.item(0).id neu gesetzt. Ich kann den Wert zwar in der Methode successSelect mit alert ausgeben, aber den wird null zurückgegeben. Der Gültigkeitsbereich scheint mir nur in der Methode zu sein! Kann ich den Wert von results.rows.item(0).id darein schreiben?

function getLastInsertVocabularyID() {
    var id;
    
    db.transaction(selectVocabulary, errorSelect, successSelect);

    function selectVocabulary(tx) {
        tx.executeSql('SELECT DISTINCT last_insert_rowid() AS id FROM vocabulary', [], successSelect, errorSelect);
    }

    function errorSelect(err) {
        alert("Fehler beim Abfragen des letzten Eintrags: " + err.code);
    }

    function successSelect(tx, results) {
        id = results.rows.item(0).id;
    }
    
    return id;
}

 

[kkapsner]

Kann ich den Wert von results.rows.item(0).id darein schreiben?

function getLastInsertVocabularyID() {
    var id;
    
    db.transaction(selectVocabulary, errorSelect, successSelect);

    function selectVocabulary(tx) {
        tx.executeSql('SELECT DISTINCT last_insert_rowid() AS id FROM vocabulary', [], successSelect, errorSelect);
    }

    function errorSelect(err) {
        alert("Fehler beim Abfragen des letzten Eintrags: " + err.code);
    }

    function successSelect(tx, results) {
        id = results.rows.item(0).id;
    }
    
    return id;
}

Das kann nicht funktionieren, da dein executeSql asynchron arbeitet (ich gehe auf jeden Fall stark davon aus). Die Funktion getlastInsertVocabularyID() wird also beendet, bevor die successSelect() überhaupt aufgerufen wurde.

 

[eminwargo]

Das stimmt das habe ich auch gemerkt! Wie kann ich das asynchrone Problem lösen...

Die Methode wird so aufgerufen:

function addNesting() {
    db.transaction(insertNesting, errorInsert, successInsert);
       
    function insertNesting(tx) {
        tx.executeSql('INSERT INTO nesting (catid, vocid) VALUES (?,?)', [currentCategory, getLastInsertVocabularyID()]);
    }

    function errorInsert(err) {
        alert("Fehler beim Speichern Nesting: " + err.code);
    }

    function successInsert() {
    }
}

 

[kkapsner]

Wie kann ich das asynchrone Problem lösen...

Indem du, so wie dein DB-Framework auch, mit Callbacks arbeitest.