jQuery Links dynamisch erstellen und auslesen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auslese
auswahl
auswerten
code
feld
formular
funktion
idee
input
kategorie
kind
page
parameter
realisieren
server
span
string
suchwort
text
url
-
Hallo
ich habe ein "altes" Script in PHP, das ich vollkommen auf jQuery umstellen will
man kann ein Suchwort eingeben und dann über 5 Seiten Ergebnisse blättern
das mit dem Formular-Eingabe per jQuery (ohne PHP) habe ich hinbekommen,
aber da ist noch die Auswahl der Seiten (zum Blättern)
bisher in PHP war es so:
<div id="pagenavi"> --- <a href="?q=<?php echo $query_str; ?>&s=1">Seite:1</a> --- <a href="?q=<?php echo $query_str; ?>&s=2">Seite:2</a> --- <a href="?q=<?php echo $query_str; ?>&s=3">Seite:3</a> --- <a href="?q=<?php echo $query_str; ?>&s=4">Seite:4</a> --- <a href="?q=<?php echo $query_str; ?>&s=5">Seite:5</a> </div>
jetzt suche ich eine Möglichkeit, diese Links dynamisch auch mit jQuery
zu erstellen und - bei klick - auszuweren,
also die "neuen" Links müssen gar keine GET-Parameter im href haben
ich brauche einfach 5 Links mit Nummerierung 1 - 5 und bei Klick
jeweils die Variable zur ausgewählten Seite (im jQuery)
damit ich diese dann an die Ausgabe-Funktion übergeben kann
meine jQuery Ausgabe Funktion rufe ich so auf: run_sx(qstr, page);
wobei bisher als seite immer "1" übergeben wird,
$(document).ready(function() { $("#form1").bind("submit", function() { var qstr = $("input[name=q]").val(); var page = 1; run_sx(qstr,page); return false; }); });
also jetzt bräuchte ich was, um anstatt immer nur page = 1;
je nach Klick auf einen der Seiten-Link
die jeweilige Seiten-Nr in der Funktion übergeben werden kann
jemand ne Idee wie ich das bauen könnte (und bei Klick abfragen und übergeben)
so dass der Query-String (var qstr) nicht verloren geht
bzw. diesen dann, wenn Klick auf Seiten-Link wieder neu auslesen (aus Formular aber ohne submit)
Idee ist erstmal so (aber ob das so gut ist !? ... geht bestimmt besser)
<div id="pagenavi"> <span style="display:hidden;">Query-String hier wieder auslesen</span> --- <a href="#">Seite:1</a> --- <a href="#">Seite:2</a> --- <a href="#">Seite:3</a> --- <a href="#">Seite:4</a> --- <a href="#">Seite:5</a> </div>
(EDIT: wobei der span wohl überflüssig ist, weil der qstr ja im Formular input Feld drin steht)
dann könnte man doch mit$("#pagenavi").click(function() { ... });
bestimmt irgendwie auslesen, der wievielte Link angeklickt wurde für page
und zudem den span für qstr, damit man beide Werte für Funktionsaufruf hat.
aber wie machen ... und ... das geht bestimmt besser ;) ?!?
Beitrag zuletzt geändert: 7.9.2012 19:05:12 von webguide -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
webguide schrieb:
Sowas ließe sich z.b. so realisieren:
Idee ist erstmal so (aber ob das so gut ist !? ... geht bestimmt besser)
<div id="pagenavi"> <span style="display:hidden;">Query-String hier wieder auslesen</span> --- <a href="#">Seite:1</a> --- <a href="#">Seite:2</a> --- <a href="#">Seite:3</a> --- <a href="#">Seite:4</a> --- <a href="#">Seite:5</a> </div>
dann könnte man doch mit$("#pagenavi").click(function() { ... });
bestimmt irgendwie auslesen, der wievielte Link angeklickt wurde für page
und zudem den span für qstr, damit man beide Werte für Funktionsaufruf hat.
aber wie machen ... und ... das geht bestimmt besser ;) ?!?
Du hast eine JavaScript-Funktion, die bei einem Klick auf einen Link aufgerufen wird und als Parameter z.b. die Zahl mitbekommt... also so:function klick(page) { // mach was mit page }und--- <a href="#" onclick="klick(1);">Seite:1</a> --- <a href="#" onclick="klick(2);">Seite:2</a> --- <a href="#" onclick="klick(3);">Seite:3</a> --- <a href="#" onclick="klick(4);">Seite:4</a> --- <a href="#" onclick="klick(5);">Seite:5</a>
Damit wird bei einem Klick auf einen Link die JavaScript-Funktion "klick" mit dem entsprechenden Parameter aufgerufen.
webguide schrieb:
Query-String? Irgendwie durchblicke ich nicht was du vor hast...
jemand ne Idee wie ich das bauen könnte (und bei Klick abfragen und übergeben)
so dass der Query-String (var qstr) nicht verloren geht
bzw. diesen dann, wenn Klick auf Seiten-Link wieder neu auslesen (aus Formular aber ohne submit)
Was hast du insgesamt mit dem Formular (form1) vor? -
Hallo
im Formular id="form1" ist (bis jetzt) nur ein Feld (text input) für "Suchwort" = Query String
es soll aber evtl noch ein DropDown Feld hinzukommen
... das mit onclick= im Link geht zwar, ich würde aber gern im Quellcode darauf verzichten,
wenn ich schon jQuery geladen habe, sollte es doch auch damit gehen
damit kann man doch sicher aus einem Element <div id="pagenavi">
bei KLick auf eines seiner Kinder <a ...> ermitteln, das wievielte Kind geklickt wurde
... habs sogar rausgefunden ... :)
$(document).ready(function() { $('#pagenavi a').click(function(){ var page = ($('#pagenavi a').index(this) + 1); alert( "Seite: "+ page +" wurde geklickt." ); }); });
also das wäre so ok, ... jetzt noch das Drop-Down-Feld rein friemeln :)
... auch das hab ich glaube ich hinbekommen
HTML (im Formular)
<select name="kat"> <option value="0">Alle Kategorien</option> <option value="1">Kategorie A</option> <option value="2">Kategorie B</option> <option value="3">Kategorie C</option> </select>
und der JS Code ....
var katv = $("select[name=kat] option:selected").val(); // --- Value var katx = $("select[name=kat] option:selected").text(); // --- Text
klappt ganz gut so :)
Beitrag zuletzt geändert: 7.9.2012 20:48:18 von webguide -
Unabhängig von der Art und Weise, wie Du das jetzt mit jQuery umsetzen kannst, sehe ich einen entscheidenden Nachteil bei der Idee und den gewählten Lösungsansätzen: Weder Barrierefreiheit, noch Nutzbarkeit für User ohne Javascript, oder auch simples Bookmarking einer Unterseite sind noch möglich, wenn der Seitenparameter nicht in der URL übergeben wird.
-
ja, das ist ein Problem, keine Parameter in URLs, auch für Suchmaschinen (SEO)
aber welcher User hat denn heutzutage kein JS aktiviert ?
... sehr viele Seiten nutzen doch JS / jQuery / prototype / etc. .. auch (besonders) die "großen"
Das Problem ist, es soll auf einem Webspace, bei dem allow_url_fopen = OFF ist
trotzdem von externer (remote) API gelesen werden soll, dazu nehme ich jQuery ajax jsonp
... was die einzige (mir bekannte) Möglichkeit ist, um (JSON) Daten
von einem fremden (remote) Server abzuholen. ohne allow_url_fopen (mit JS)
da ich also schon im jQuery-Fieber war, dachte ich, dann mach ich gleich alles damit
... auch weil ich ja die Parameter wieder als JS-Funktionen übergeben will / muss
Aber du hast Recht, ohne URL-Parameter (evtl sogar als rewrite URLs)
ist das ein großer Nachteil, wegen Deeplinks, Bookmarking, SiteMap, etc.
... ich sollte also die Formular-Übergabe und Seiten-Auswahl
doch "normal" machen (Parameter per PHP $_GET auswerten)
und bei Aufruf der Seite dann diese Parameter an die Funktion übergeben
:( schade .. jetzt war ich grad so froh, das ich es mit jQuery so hinbekommen habe,
jetzt ist das doch nix .... also wieder umbauen ... Variable aus PHP an JS übergeben
-
webguide schrieb:
Aber: diese Seiten funktionieren auch dann noch, wenn JavaScript deaktiviert wurde.
... sehr viele Seiten nutzen doch JS / jQuery / prototype / etc. .. auch (besonders) die "großen"
webguide schrieb:
Nichts da! Du kennst bestimmt hier auf lima-city die Tabs bei der Hilfe oder wenn du dir ein Profil ansiehst? Dort wird eine Möglichkeit gezeigt wie du das mit dem Bookmarkbar-machen erreichen kannst... dazu noch kurz der Ansatz:
... ich sollte also die Formular-Übergabe und Seiten-Auswahl
doch "normal" machen (Parameter per PHP $_GET auswerten)
und bei Aufruf der Seite dann diese Parameter an die Funktion übergeben
Die URL stellt nicht zu 100% etwas dar, was an den Server gesendet wird. Alles nach dem
wird vom Browser ausgewertet und dazu benutzt um zu markierten Stellen auf der Seite zu springen. Dieser Mechanismus kann von JavaScript genutzt werden um etwas an die URL anzuhängen was nicht vom Server ausgewertet wird... und das lässt sich auch wieder einlesen und auswerten. Damit lassen sich deine bookmarkbaren Seiten realisieren.#
Beitrag zuletzt geändert: 8.9.2012 10:30:55 von hackyourlife -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
