06.01.2023 | Webentwicklung
JQuery AJAX Randomizer mit Exclude List

geschrieben von Jens , , ,

Gerade brauchte ich einen kleinen Randomizer für 365 Elemente. Das Problem – Ich brauche zusätzlich eine „Exclude List“ mit bereits verwendeten Elementen. Zunächst kommt erstmal die Ausgabe im Frontend mit einem AJAX Request via GET, der ein kleines PHP Script aufrufen soll.

Voraussetzung ist hier zwingend JQuery ab Version 2 (2.2.4) und für die Kosmetik optional Bootstrap (5.2.x) und Font Awesome in Version 5.15.4.

Frontend Ausgabe

<div class="randomizer text-center">
    <h2>Randomizer</h2>
    <div id="randomizer" class="mb-2 mt-2">
        <div class='badge text-bg-light pe-4 ps-4'><h1>?</h1></div>
    </div>
    <a href="javascript: randomize();"><i class="ms-3 fas fa-sync-alt"></i> Yehaa! Click 2 randomize this!</a>
</div>

<script type="text/javascript">
    function randomize() {
        $.post("ajax_randomizer.php", function(result){
            $("#randomizer").html(result);
        });
    };
</script>

Aufgerufen wird ein kleines PHP Script. Dort findet sich neben der generierten Zahl in der gewünschten Range (hier 1-365) auch die Exclude List, der bereits verwendeten Zahlen. Der Rückgabewert wird dann entsprechend im Frontend via JQuery ausgegeben.

ajax_randomizer.php (aufgerufen via AJAX Request)

<?php
    $exclude = [1, 3, 7, 303];
    $range = range(1, 365);
    $valid = array_diff($range, $exclude);
    shuffle($valid);
    echo "<div class='badge text-bg-light pe-4 ps-4'><h1>$valid[0]</h1></div>";
?>

Externe Ressourcen:


Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel 2014 - 2023