Jquery: externe Daten zum Datum laden

[der_zocker]

Hallo Forum,

ich bin gerade dabei eine Veranstaltungsliste zu bauen. Wenn man auf den jeweiligen Link in der Liste klickt, sollen sich noch weitere externe Informationen öffnen. Dieses habe ich schon soweit hinbekommen.

<div class="list">
    <ul>
        <li><a href="veranstaltungen/2011/281111.html" date="28-11-11">Veranstaltung 1</a></li>
        <li><a href="veranstaltungen/2011/051211.html" date="05-12-11">Veranstaltung 2</a></li>
        <li><a href="veranstaltungen/2012/241211.html" date="24-12-11">Veranstaltung 3</a></li>
    </ul>
</div>

<div class="example"></div>

<script type="text/javascript">


$(document).ready(function() {
    
    $('.list a').bind('click', function() {
        $('.example').load(this.href);
        return false;
    });
});


</script>

Jetzt möchte aber gerne, dass die Informationen zum nächsten Datum schon automatisch geöffnet sind.

Ich habe jetzt schon einiges ausprobiert und nichts hat funktioniert.

Ich hoffe, dass Ihr mir irgendwie helfen könnt.

Daniel

 

[threadi]

Du müsstest beim Laden der Seite den Inhalt des 1. Termins per JavaScript laden. Dazu musst Du eigentlich den Code

$(document).ready(function() {
    
    $('.list a').bind('click', function() {
        $('.example').load(this.href);
        return false;
    });
});

nur leicht anpassen. Spontan würde ich sagen:

$(document).ready(function() {
    
    $('.example').load($('.list li:first-child a').href);

    $('.list a').bind('click', function() {
        $('.example').load(this.href);
        return false;
    });
});

Ungetestet, aber den Sinn solltest Du erkennen können.

 

[der_zocker]

Vielen Dank für deine Hilfe.

Dein Code hat leider nicht funktioniert. Aber das Prinzip habe ich damit verstanden. Danke.

Ich habe das jetzt so hin bekommen:

$(document).ready(function() {

    var href = $(".list a:first").attr("href");
    $('.example').load(href);

    $('.list a').bind('click', function() {
        $('.example').load(this.href);
        return false;
    });
});

Jetzt muss ich es nur noch schaffen, dass nicht der Erste in der Liste, sondern das aktuelle Datum oder das nächste Datum geladen wird.

Ich habe es gerade noch geschafft, die Daten von einem bestimmten Datum zu laden:

$(document).ready(function() {

    var href = $('.list a:first[date~="05-12-11"]').attr("href");
    $('.example').load(href);

    $('.list a').bind('click', function() {
        $('.example').load(this.href);
        return false;
    });
});

Aber wie mache ich das jetzt, dass er automatisch das Nächstmögliche lädt?

Ich hoffe Ihr könnt mir noch weiterhelfen.

Daniel

 

[mermshaus]

Iteriere über die entsprechenden a-Elemente und ermittle jeweils, wie weit das entsprechende Datum vom aktuellen Datum entfernt ist. Wähle dann den Eintrag mit demjenigen Datum, dass am wenigsten weit in der Zukunft liegt.

 

[der_zocker]

Ich habe leider keine Ahnung, wie ich das machen soll.

Stehe gerade irgendwie auf dem Schlauch. Beim googlen habe ich momentan auch nichts gefunden.

Kannst du mir dafür noch einmal einen Tipp geben?

Danke.

 

[mermshaus]

Schematisch:

Du brauchst eine Möglichkeit, das aktuelle Datum zu ermitteln.

Du brauchst eine Möglichkeit, die Differenz in Tagen von diesem Datum zu einem Datum in deinen Elementen auszurechnen. Das machst du am besten in einer Funktion (z. B. getDifferenceInDays(date1, date2)), die eine negative Anzahl zurückgibt, wenn date2 von date1 aus betrachtet in der Vergangenheit liegt, sonst eine positive Zahl. Als date1 übergibst du das aktuelle Datum, als date2 das Datum aus deinen Elementen. (Ich möchte nicht völlig ausschließen, dass JavaScript dazu einen eingebauten Weg hat.)

Dann läufst du in jQuery mit .each() über alle deine Links, wendest für das Datum bei jedem Link die zuvor gefundene Funktion an und legst jeweils den Eintrag mit der kleinsten positiven Zahl in einer Variablen ab, mit der du weitere Einträge mit positiven Zahlen vergleichst. Das ist praktisch ein einschrittiges Selectionsort. Wenn die Schleife durchgelaufen ist, hast du den passenden Eintrag in deiner Variablen stehen.