Jquery, 1:N Beziehung und Selects

[braegler]

Hallo zusammen,
ich stehe mal wieder vor einem Problem, das ich nicht gelöst bekomme.

Background:
Ich wurde gefragt, ob ich eine Eingabemaske für eine "1:N Beziehung" erstellen könne
Es gibt eine Tabelle mit 3800 Pässen, die durch die Spalte "paesse_nr" indiziert ist.
Mal ein kleiner Ausschnitt:

paesse_nr	paesse_name	paesse_geoloc
104	Grimselpass	46.56168980 8.33789508
105	Schwarzwaldalp	46.6754600 8.13409000
128	Jaunpass	46.59227922 7.33999204

Des weiteren gibt es eine Tabelle "touren", die wie folgt aufgebaut ist:

id	user	paesse	tourname
1	Testuser1	1;103;104	Tour1
2	Testuser2	104	Tour2
3	Testuser2	104;105	Testtour

Wie man sehen kann, sind die Pässe der jeweiligen Tour mit Semikolon aneinander gereiht (deshalb auch die "" bei 1:N Beziehung, leider ist da nichts normalisiert.

Nun soll der Benutzer die Tour anpassen können (dabei geht es nur um das Feld "paesse").

Meine Idee dazu:

Problem 1: Vorhandene Punkte
Beim Aufrufen einer Tour werden die vorhandenen Pässe jeweils in einem Select mit allen Pässen als selected markiert.
Das ganz ist aber, gerade bei grossen Touren mit vielen Pässen extrem unperfomant, da jedes Select mit allen 3800 Pässen befüllt schon einiges an Leistung erfordert.

Nun suche ich nach einer Möglichkeit, die Seite auszuliefern, und dabei die selects nur mit dem selected value zu bestücken, und die jeweils übrigen 3799 Pässe per Jquery in jedes einzelne select einzufügen.
Damit müsste das ganze Ding nur einmal ausgeliefert werden.

Leider sind all meine Versuche gescheitert (weshalb ich auch davon absehe hier meine Versuche zu posten *shame*).

Ich selbst kenne mit mit JS / Jquery nur sehr wenig aus.

Problem 2:
Der Benutzer soll neue Pässe hinzufügen können.
Dafür habe ich eine php-Datei die als "loc" Parameter eine Geolocation erwartet, und dann die 20 am nächsten gelegenen Pässe ausspuckt.

Meine Vision:
Nach den vorhandenen Pässen-Selects wird ein noch leeres Select gezeigt, und mit den Daten aus dem php-Skript befüllt. Wird onchange getriggert, kommt die nächste Abfrage an das php Skript, ein neues Select erscheint unter dem letzten und wird mit den Daten befüllt...and so on
(Ganz so als würde man in Access Datei in eine einspaltige Tabelle eintragen, es erscheint solange eine neue Zeile, wie die vorhandene ausgefüllt wird.

Zu diesem Problem habe ich noch nichts sinnvolles gefunden (vllt. auch "nur" die falschen Suchbegriffe verwendet?!?)

Ich hoffe ich habe meine Challenges verständlich formuliert, und natürlich auch, dass mir hier jemand helfen kann.

Vielen Dank schonmal

 

[theSplit]

Ich verstehe nur bedingt was du machen willst mit den Selects, vielleicht steh ich auch ein wenig auf dem Schlauch... ich versuch dir trotzdem etwas Feedback zu geben, vielleicht hilft dir das etwas.

Zu Problem 1:

Damit du nicht alle 3k Pässe ausliefern mußt, wäre es vielleicht eine gute Idee die Pässe einzukreisen die geliefert werden, zum Beispiel in dem man einen Punkt auf einer Google Maps Karte verwendet? Diese bietet auch ein Javascript Interface.

Hintergrund warum ich so Frage, du kannst selbst mit einem Select nicht mit den Datenmengen sauber hantieren lassen, daher der Vorschlag die Pässe die zur Auswahl stehen auf eine Geo Location zu reduzieren und in einer "Reichweite" in Kilometern die eine Tour maximal umfassen sollen darf anzugeben. Die Reichweite wäre der Suchradius in deiner Anfrage um die möglichen Touren und Pässe zu erhalten die man innerhalb der Reichweite erreichen könnte.

Also Vorlagen um zu einigen wichtigen Hotspots zu springen, könnte man die meist verwendeten Pässe aus der DB heraussuchen und eine Liste der Top 50 Knoten mit Namen und ID herausziehen. Diese sollte natürlich nicht so dicht beieinander liegen damit der Sinn, einen Überblick zu bekommen, nicht verloren geht.

Wenn du die Daten aus PHP in JSON lieferst, kannst du auch darüber iterieren.
Damit du es einfacher hast:

Spoiler

Die Json könnte so aussehen:
{
"elemente": 50,
"0": [PassID 1, "Pass Name 1", Longitude, Lattitude],
"1": [PassID 2, "Pass Name 2", Longitude, Lattitude],
...
"49": [PassID, "Pass Name 50", Longitude, Lattitude]
}

Mit Jquery oder Javascript kannst du dann mit Hilfe der Anzahl ("elemente") die Json Daten iterieren und deine Select befüllen.


Etwas HTML: <select id="select_topLocations"></select>

JS Code - alles reines JS, dafür brauchst du nicht zwingend JQuery.

[src=javascript]var elemente = jsonData["elemente"];
var selectList = document.getElementById("select_topLocations");
var optionHTML = "";
var jsonElement = [];

for (int i = 0; i < elemente; ++i) {
jsonElement = jsonData;
optionHTML = '<option value="'+jsonElement[0]+'">'+jsonElement[1]+'</option>';
}

selectList.innerHTML = optionHTML;[/src]

 

[braegler]

Danke schonmal.
Werd mal versuchen was ich damit gebacken kriege