Moin,
auf einigen Seiten sieht man ja ein schönes Feautre: Die Anzahl der Trefferergebnisse werden dynamisch angezeigt.
Bsp: Ich hab eine Tabelle, die wie folgt aussieht:
id - farbe
1 - blau
2 - blau
3 - blau
4 - blau
5 - rot
Nun Möchte ich eine Selectbox, in der ich dann Farben auswählen kann. Wenn ich dann die Farbei Blau auswähle, soll mir angezeigt werden, das es für meine "Suche" 5 Treffer gibt, ohne das die Seite neu geladen wird.
Ich habe schon viel darüber gelesen, auch einiges ausprobiert - aber leider bin ich nicht wirklich von Erfolg beglückt...
AJAX und JQuery sind denke ich schon die richtigen Themen. Hat vielleicht jemand ein Produktivbeispiel, vielleicht sogar ein gutes Tutorial für mich, an dem ich mich orientieren kann?
W3Schools habe ich schon durchstöbert, das ist aber sehr "trocken" - dort wird nicht weiter auf die Möglickeiten mit Datenbanken eingegangen.
Vielen Dank schonmal!
verwendete ilch Version: 1.1 P
Beitrag zur Merkliste hinzufügen
Hier kann eine Notiz zum Merk-Eintrag hinzugefügt werden (optional)
ilch Forum » Allgemein » HTML, PHP, SQL,... » dynamische Trefferanzeige
Gehe zu Seite:
| Geschlossen | ||
-
Mi. 12.03.2014
16:42 Uhr
#1
- Registriert seit
- 23.03.2007
- Beiträge
- 2.425
- Beitragswertungen
Nichts ist so sicher, wie die Änderung. -
Sind denn, wenn die Seite mit der Tabelle geladen wird, schon alle Zeilen der Datenbank dabei und sollen dann nur die angezeigten gezählt werden, oder gibt es eine Pagination und es sollen eine neue Abfrage an die Datenbank gesendet werden?Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
-
Do. 13.03.2014
07:34 Uhr
#3
- Registriert seit
- 23.03.2007
- Beiträge
- 2.425
- Beitragswertungen
Keine Pagination - die User haben die möglichkeit nach bestimmten kriterien zu filtern - was ich mochte ist, das nach jeder änderumg im formular das ergebnis (anzahl der treffer) aktualisiert wird
EDIT: Ich habe bereits eine Tabelle mit befüllten Daten. Mit einem Formular selektiere ich dann Werte aus der vorhandenen Tabelle - bisher ist es so, das wenn ich meine Kriterien angegeben habe, ich auf absenden klicke und dann weitergeleitet werde und den Request erhalte. Ich möchte jetzt aber, das man ohne Neuladen der Seite die Anzahl der zu erwartenden Ergebnisse z.B. h inter dem Suchbutton sieht. Und diese Anzahl soll sich immer dann ändern, wenn man ein neues Suchkriterium angibt (Radiobuttons, Selectboxen, Checkboxen etc.)
Zuletzt modifiziert von CeeJay am 13.03.2014 - 12:08:30Nichts ist so sicher, wie die Änderung. -
Sa. 22.03.2014
19:33 Uhr
#4
- Registriert seit
- 23.03.2007
- Beiträge
- 2.425
- Beitragswertungen
hat noch wer eine Idee?Nichts ist so sicher, wie die Änderung. -
Naja was heißt hier Idee, es ist im Grunde nicht sehr schwierig, wenn man sich mal ein bisschen mit jQuery und der $.ajax oder $.load Funktion beschäftigt
Wenn man weiß, was ein Javascript Event ist und wie man mit $('selector').on('change', function() { /* ajax aufruf */ }
darauf reagiert.
Auf PHP Seite dann den HTML Code zurückgibt und via Javascript in seine Seite einfügt.
Dafür gibts sicher einige Anleitungen im Internet zu finden, wenn man sie finden will.Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite -
Di. 25.03.2014
07:12 Uhr
#6
- Registriert seit
- 31.03.2013
- Beiträge
- 1.337
- Beitragswertungen
Also ich habe Dir mal was gebastelt. Dazu muss ich sagen, ich verwende auf unserer Page für die Shoutbox und sämtliche Kommentar-Sachen diese Methode. Damals habe ich das auch nur Dank der Hilfe von Mairu umgesetzt bekommen, deshalb denke ich, ich kann Dir jetzt hier auch etwas helfen.
Es ist zwar nur ein Grundgerüst, aber wenn Du das System darin erkennst, kannst Du es dann zur weiteren Verwendung anpassen.
Hier mal eine einfache Auswahl von Farben:test.htm 1234567891011121314151617181920212223242526272829303132<tablewidth="60%"border="0"cellspacing="1"cellpadding="5"><tr><tdalign="right"class="Cmite"><strong>Farben : </strong></td><tdclass="Cnorm"><selectname="colors"id="colors"><option></option><optionvalue="rot">rot</option><optionvalue="schwarz">schwarz</option><optionvalue="weiss">weiss</option><optionvalue="silber">silber</option></select></td></tr></table><scripttype="text/javascript">$(document).ready(function () {$('#colors').change(function(){$.ajax({url: "index.php?test_request",type: "post",data: {option: $(this).find("option:selected").val()},success: function(data){//fügt die antwort in den container$("#modells").html(data);}});});});</script><divid="modells"><!-- hier werden die modelle zugefügt --></div>
Jetzt brauchst Du eine Datei, die den request auswertet und wieder ausgibt (siehe oben bei url):test_request.php 1234567891011121314151617181920212223242526272829303132<?php$mainOption= escape($_POST['option'],'string');details($mainOption);functiondetails($opt){if($opt=='rot')echo'Modelle: <selectclass="detail_select"><option value="Ferrari">Ferrari</option><option value="Alfa Romeo">Alfa Romeo</option></select>';elseif($opt=='schwarz'){echo'Modelle: <selectclass="detail_select"><option value="Mercedes">Mercedes</option><option value="Bentley">Bentley</option></select>';}elseif($opt=='weiss'){echo'Modelle: <selectclass="detail_select"><option value="Audi">Audi</option><option value="BMW">BMW</option></select>';}elseif($opt=='silber'){echo'Modelle: <selectclass="detail_select"><option value="VW">VW</option><option value="Cadillac">Cadillac</option></select>';}}?>
Ist wie gesagt nur eine minimalistische Version, aber das Prinzip sollte deutlich werden. Und alles ohne Reload
Zuletzt modifiziert von Outi77 am 25.03.2014 - 12:44:01Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
»Albert Einstein«
| Geschlossen | ||
 |
Zurück zu HTML, PHP, SQL,... | |
Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten