HTML/JS: Ajax-Formular und Treffer-Counter-Anzeigen

WulfmanGER · 19. Mai 2023

Hallo in die Runde,

ich hab es jetzt schon mit KI versucht - aber weder Bing noch ChatGPT konnten mein hochkomplexes Thema lösen. Ich versuche es daher mal mit Menschen

Ich habe ein AJAX-Suchscript. Ich gebe was ein, bekomme dann dynamisch die passenden Treffer zur Eingabe. Kennen wir ja alle. Das ganze läuft über 2 Dateien:
index.php - ist hier der html, js-code drin
search.php - hier ist der php-kram drin
=> die suche klappt! Alles super. Ich möchte jetzt aber einen Counter einfügen ... Direkt neben dem Suchfeld [suche] counter

Den Counter hab ich bereits in der php als echo - wird aber natürlich an der falschen stelle angezeigt.
Beide KIs und auch div. seiten sagen mir das ich das so machen muss:

index.html:
<p id="searchCounter"></p> (auch mit div versucht)

search.php
echo "<script>document.getElementById('searchCounter').innerHTML = 'Treffer: " . $count . " (max: " . ($count - 1) . ")';</script>";

Klappt nicht. Wenn ich den "script"-Part ohne Variablen in die index.html schiebe, wird mir "Treffer: " an stelle des searchCounter-P/DIV angezeigt. Also grundsätzlich scheint das korrekt zu sein. Aber scheinbar gibt es hier einen konflikt in einer ajax-Umgebung?

Natürlich wir durch das echo die zeile im Seitenquelltext (Browser) angezeigt. Also es wird korrekt geparsed ... aber warum klappt die Anzeige nicht? Ich vermute das AJAX hier einen konflikt verursacht. Die Search.php wird ja permanent durch die index.html aufgerufen und da scheint was negatives

zu passieren. Aber wie gesagt: bing und chatgpt sind damit heilos überfordert. Selber googlen bringt mir immer nur wie es geht - aber nicht warum es nicht klappt

Danke schon mal

madmax2010 · 19. Mai 2023

um so einen counter zu bauen waere es sinnvoll sich anzuschauen in welchem format die angezeigten Daten sind und dann eine zugehörige Funktion deines jeweiligen Frameworks.
Ich hoffe mal, dass deine daten in einer datennbank liegen.. das macht suchen und zaehlen verdammt viel einfacher.

floq0r · 19. Mai 2023

Wie soll denn der JS-Code aus deinem XHR-response ausgeführt werden? Ich nehme an du baust die HTML Struktur im Backend zusammen und schmeisst das im Frontend einfach ins DOM - ungut.
Hol dir deine Results als JSON ins Frontend, dann kannst du sie durchzählen und dort die Elemente einzeln oder gesammelt ins DOM inserten.

WulfmanGER · 19. Mai 2023

Ok ich braucht den Quellcode

Ich hatte erstmal gehofft das es hier vielleicht ein grundsätzliches Missverständnis gibt

Wie gesagt - die grundsätzliche Anzeige klappt ... es geht mir einzig um den Counter und den code den ich dafür habe, wird mir ja leider nicht nur von KIs als korrekt angezeigt. Ich verstehe halt nicht das der Code klappt wenn ich ihn direkt in die index.html packe, aber nicht wenn er per echo in die ausgabe gepackt wird.

WICHTG: ich möchte bei der Eingabe wissen wieviele Treffer es insgesammt sein könnten (15000) und limitiere die AUSGABE aber auf 30. Es steht dann da "Treffer 15000 (30 Max)" - daher hab ich im SQL-Code (hier ausgeblendet) kein Limit drin

index.html (vollständiger body)

Code:

<body>
        <div id="searchCounter">Counter</div>
    <div style="text-align: center;" id="searchContainer">
        <label for="searchInput">Filmtitel:</label>
        <input type="text" id="searchInput" onkeyup="searchTitle()">

        <p id="searchResults"></p>
    </div>
    <br>
    <div id="results"></div>
    <script>
        function searchTitle() {
            let searchInput = document.getElementById("searchInput").value;
            if (searchInput === "") {
                document.getElementById("results").innerHTML = "";
                return;
            }
            let xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
                    document.getElementById("results").innerHTML = this.responseText;
                }
            };
            xhttp.open("POST", "search.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("searchInput=" + searchInput);
        }

        function toggleDescription(element) {
            let description = element.nextSibling;
            if (description.style.display === "none") {
                description.style.display = "inline";
            } else {
                description.style.display = "none";
            }
        }
    </script>
</body>

search.php [ich hab es jetzt etwas abgekürzt und SQL

Code:

...
$hits = 31;
if (isset($_POST['searchInput'])) {
....
    $count = $stmt->num_rows;
echo "<script>document.getElementById('searchCounter').innerHTML = 'Treffer: " . $count . " (max: " . ($hits - 1) . ")';</script>";
    #echo "Treffer: " . $count . " (max: " . ($hits - 1) . ")<br>";
    $i = 0;

    $stmt->bind_result( ...variablen...);

    $previous_imdb_ids = array();
    $mainContainerStyle = "display: flex; align-items: flex-start;"; // Anpassung der Ausrichtung auf flex-start
  
$isEven = true; // Flag, um den Hintergrund zu wechseln
    echo "<ul class='search-results'>";

    while ($stmt->fetch()) {
        $groesse = num_format($groesse, "Gbyte");
        $description = $overview;
      
$searchResultClass = $isEven ? 'search-result even' : 'search-result odd';
$isEven = !$isEven; // Den Wert des Flags umkehren

if (!in_array($imdb_id, $previous_imdb_ids)) {
        echo "<li class='$searchResultClass'>";
        echo "<div class='thumbnail'>";
        if ($pic_exists >= 1) {
            $thumbnail = viewpic('movie', $imdb_id);
            echo "<img src='$thumbnail' alt='$mein_titel' width='58' height='87' style='margin-right: 10px;'>";
        } else {
            echo "<div style='width: 58px; height: 87px; margin-right: 10px;'></div>";
        }
        echo "</div>";
        echo "<div class='details'>";
        echo "<h4 class='title'>$mein_titel</h4>";
        echo "<p class='description'>$description</p>";
        echo "</div>";
        echo "</li>";
} else {

echo "<li class='$searchResultClass'>";
echo "<b class='title' style='margin-left: 77px;'>$mein_titel</b>";
echo "</li>";
}
        $previous_imdb_ids[] = $imdb_id;
        $i++;
        if ($i == $hits) {
            break;
        }
    }
    echo "</ul>";

floq0r · 19. Mai 2023

Offensichtlich werden script tags, die über .innerHTML eingefügt werden nicht evaluated.

WulfmanGER · 19. Mai 2023

wie evaluiere ich den? Hab gerade mal geschaut und nur eval() gefunden - aber damit komm ich nicht so recht weiter ;(
Ich hab leider von JS null Ahnung - hab ich immer vor mir hergeschoben - brauch ich eh nicht

... tja ....

floq0r · 19. Mai 2023

Vergiss eval() gleich wieder, sehr gefährlich. Nochmal: Hol dir die Daten strukturiert z.B. als JSON aus dem Backend und bau die DOM Elemente im Feont end auf. Um JS wirst du nicht herumkommen du verwendest es eh schon.

Edit: Du kannst das Counter Element natürlich auch gleich mit aus dem Backend laden.

WulfmanGER · 19. Mai 2023

floq0r schrieb:
Edit: Du kannst das Counter Element natürlich auch gleich mit aus dem Backend laden.

ist das nicht das was ich versuche? Ich erstelle doch den kompletten Counter im php-file. Das html greift ja drauf zu und es kommt ja auch "an" aber es hat null auswirkung ... oder versteh ich das falsch?

floq0r schrieb:
Hol dir die Daten strukturiert z.B. als JSON aus dem Backend und bau die DOM Elemente im Feont end auf.

muss ich mir anschaue. Mit JSON hatte ich tatsächlich was gesehen gehabt.

floq0r · 19. Mai 2023

Nein, du hast das searchCounter Element fix in deinem HTML und lädst dann ein script Schnippsel per XHR, dass per JS den Inhalt von searchCounter ändert. Was ich meinte ist, dass du das komplette HTML Element <div id="searchCounter">Counter</div> mit richtigem Inhalt im XHR mitlädst. Dann hast du halt ein Positionierungsproblem zu lösen.

WulfmanGER · 21. Mai 2023

Hab jetzt mal auf JSON umgestellt ... da bekomme ich dann auch tatsächlich die Wunschinfos angezeigt wo ich will. Nur muss ich das zum großteil via JS machen - gefällt mir nicht - aber egal - diese Suche hat jetzt schon zuviel Zeit veranschlagt - ich bleib jetzt dabei

Aber ich hab ein komisches Phänomen - sowohl bei der "echo"-Variante von oben als auch mit der json-Variante: ich gebe in das Suchfeld etwas ein... bekomme mein ergebnis und dann nach ~4400ms springt das Ergebnis auf "Alle" um. Als würde dann % an die Datenbank geschickt. Ich mache aber überhaupt nichts.

Der Counter der Treffer springt dann logischerweise auch von 103 auf 15000 - nur der Suchbegriff bleibt weiter im Suchfeld bestehen.

Diese ~4400ms machen mich etwas stutzig. Ich hab das bei meinem ersten AJAX-Script nicht - da bleibt das Ergebnis fest auf die letzten Treffer. Also ob hier irgendein mechnismus resetet - immer bei ca. 4400ms.

Wo kann ich den hier mit dem Troubleshooting mal beginnen?

Ich arbeite hier mit prepared statements. Das Script wo ich nicht mit prepared arbeite, klappt ohne probleme. Liegt hier die Ursache? EDIT: ich hab das Script mal umgeschrieben - prepared weg - da ist zwar irgendwo ein fehler - aber trotzdem sehe ich hier das nach ca 4400ms wieder neugeladen wird...

Suche

HTML/JS: Ajax-Formular und Treffer-Counter-Anzeigen

WulfmanGER

Commander

madmax2010

Fleet Admiral

floq0r

Commander

WulfmanGER

Commander

floq0r

Commander

WulfmanGER

Commander

floq0r

Commander

WulfmanGER

Commander

floq0r

Commander

WulfmanGER

Commander

Ähnliche Themen