ilch Forum » Allgemein » HTML, PHP, SQL,... » dynamische Trefferanzeige

Geschlossen
  1. Mi. 12.03.2014 16:42 Uhr #1
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    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
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  2. Mi. 12.03.2014 19:57 Uhr #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  3. Do. 13.03.2014 07:34 Uhr #3
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    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 lächeln

    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:30
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  4. Sa. 22.03.2014 19:33 Uhr #4
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    hat noch wer eine Idee?
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  5. Sa. 22.03.2014 20:18 Uhr #5
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    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 zunge

    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
    0 Mitglieder finden den Beitrag gut.
  6. Di. 25.03.2014 07:12 Uhr #6
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    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: 
    <table width="60%" border="0" cellspacing="1" cellpadding="5">
    <tr> 
        <td align="right" class="Cmite"><strong>Farben : &nbsp;</strong></td>
        <td class="Cnorm"> 
            <select name="colors" id="colors">
                <option></option>
                <option value="rot">rot</option>
                <option value="schwarz">schwarz</option>
                <option value="weiss">weiss</option>
                <option value="silber">silber</option>
            </select>
        </td>
    </tr>
</table>
<script type="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>
<div id="modells">
    <!-- hier werden die modelle zugefügt -->
</div>

    Jetzt brauchst Du eine Datei, die den request auswertet und wieder ausgibt (siehe oben bei url): 
    <?php
$mainOption = escape($_POST['option'], 'string');
details($mainOption);

function details($opt)
{
    if($opt == 'rot')
        echo 'Modelle:&nbsp;<select class="detail_select">
                <option value="Ferrari">Ferrari</option>
                <option value="Alfa Romeo">Alfa Romeo</option>
            </select>';
    else if($opt == 'schwarz')
    {
        echo 'Modelle:&nbsp;<select class="detail_select">
                <option value="Mercedes">Mercedes</option>
                <option value="Bentley">Bentley</option>
            </select>';
    } else if($opt == 'weiss')
    {
        echo 'Modelle:&nbsp;<select class="detail_select">
                <option value="Audi">Audi</option>
                <option value="BMW">BMW</option>
            </select>';
    } else if($opt == 'silber')
    {
        echo 'Modelle:&nbsp;<select class="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 zwinker


    Zuletzt modifiziert von Outi77 am 25.03.2014 - 12:44:01
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten