Beiträge von Sempervivum

Zitat

Vielleicht hat Sempervivum da nee Idee wie es gehen könnte

Schon, aber meine Ideen habe ich ja bereits gepostet. Bin hier draußen.

Zitat

hoffendlich könnt ihr mir helfen !

Sicher können wir das aber das Problem liegt bei dir denn Du ignorierst alle zielführenden Hinweise, die dir gegeben werden. Das Javascript, das Du gerade gepostet hast ist 1-zu-1 das, was Du am Anfang gepostet hast. So wird das nichts!

Wie ich schon schrieb, ist die Sache mit den Parametern bei fetch etwas undurchsichtig, da ist eigentlich jQuery.ajax besser. Ich habe das vor einiger Zeit mal ausgelotet und bin zu diesen Ergebnissen gekommen:

1. POST-Parameter selbst zusammen gebaut:

        const params = new FormData();
        params.append('param1', 'some-param');
        params.append('param2', 'some-other-param');
        params.append('numparam', '1.24');
        fetch('testpost.php', {
            method: 'post',
            body: params
        }).then(res => {
            return res.text();
        }).then(res => {
            console.log(res);
            document.getElementById('out').innerHTML = res;
        });
    </script>

2. POST-Parameter aus Formular:

    <form>
        <input type="text" name="param1" value="some-param">
        <input type="text" name="param2" value="some-other-param">
        <input type="number" name="numparam" value="1.24">
    </form>
    <span id="out"></span>
    <script>
        fetch('testpost.php', {
            method: 'post',
            body: new FormData(document.querySelector('form'))
        }).then(res => {
            return res.text();
        }).then(res => {
            console.log(res);
            document.getElementById('out').innerHTML = res;
        });
    </script>

Bei diesen beiden liegen die Parameter dann im PHP wie gewohnt unter $_POST vor.

3. Parameter als JSON im Body:

        const params = {
            par1: 'some-param',
            par2: 'some-other-param',
            par3: [1, 2, 3, 4, 5]
        };
        fetch('fetch-api-json-request.php', {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        }).then(res => {
            return res.text();
        }).then(res => {
            console.log(res);
            document.getElementById('out').innerHTML = res;
        });

Dann funktioniert das Auslesen der Parameter im PHP so:

$params = json_decode(file_get_contents("php://input"));

Also etwa anders als gewohnt

Zitat von basti1012

Gibt es eine Idee, das man die Bilder erst vorlädt oder so, und dann tauscht?

Ja, man kann sie in ein Image-Objekt laden:

https://developer.mozilla.org/en-US/docs/Web…geElement/Image

Was den Code betrifft, ist die zweite Lösung IMO schöner weil man nicht den Umweg über das HTML gehen muss. War mir auch schon eingefallen aber wenn der TO kein Interesse hat ...

Zitat

• Hat die fetch API eigentlich Vorteile gegenüber JQuery Ajax?

Sie hat den Vorteil, dass sie kein jQuery braucht aber auch Nachteile:

• Parameterübergabe etwas kryptisch
• Unterstützt keine Fortschrittsanzeige beim Hochladen

Zitat

Ich gebe mal an Sempervivum weiter, vielleicht hat er da eine Idee für nee schnelle Hilfe.

Das ist gut gemeint Basti aber der TO ignoriert konsequent meine Beiträge: Das Javascript aus seinem Eingangsposting finde ich 1-zu-1 in der Seite wieder, die er online hat.

Zitat

das doppelte ist noch das alte ist nur wegen testzwecke noch drinne.

Auf diese Weise wird das nichts, da blickt doch keiner mehr durch.

Zitat

Ich hatte es mit jquery-3.6.0.min.js versucht und da habe ich auch kein Ergebnis erreicht

mit jquery-1.5.2.min.js funktioniert es so wie es soll

Das braucht nicht zu verwundern, siehe hier:

https://api.jquery.com/toggle/

Zitat

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9.

Toggeln einer Klasse wird dir nicht helfen, da Du drei Zustände hast.

Es ist immer fehleranfällig, wenn Du Javascript mit Ajax lädst. Ob es überhaupt ausgeführt wird, hängt davon ab, wie Du die Ausgaben des PHP-Skripts verarbeitest. Aber ich empfehle, dort gar nicht erst einzusteigen sondern nur die Variablen mit Ajax zu holen und das HTML im Browser zu generieren. Also PHP-Skript so:

// Ass. Array mit den Variablen vorbereiten und JSON-kodiert ausgeben:
$vars = ['gr' => $gr, 'x' => [$x1, $x2, /* usw. bis: */ $x9], hell' => $hell];
echo json_encode($vars);

Und dann so verarbeiten:

        // PHP-Skript ausfuehren und Antwort verarbeiten:
        fetch('dein-php-script.php').then(res => {
            return res.json();
        }).then(res => {
            console.log(res);
            const
                gr = res.gr,
                x = res.x,
                hell = res.hell;
            // Mit den Parametern alle 9 img-Tag in ihre Containern eintragen:
            for (let i = 0; i < 9; i++) {
                document.getElementById('blick_feld' + (i + 1))
                    .innerHTML = '<img src="' + gr + (i + 1)  + '_' + x[i] + '.png" '
                        + hell + ' draggable="false">';
            }
         });

Ungetestet

BTW: Nachdem ich mich damit jetzt ein wenig beschäftigt habe, stimme ich Basti zu: Man kann das wahrscheinlich einfacher machen. Zunächst mal nur für den Eingabecontainer: Das HTML statisch für beide Varianten anlegen und mit einer Klasse "hidden" das andere jeweils verbergen. Dann braucht es nur das Laden mit Ajax für die Filmdaten und auch kein Eventdelegation. Könnte dann so aussehen:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Filmanzeige</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        .hidden{
            display: none;
        }
    </style>
</head>

<body>
    <div id="eingabe_container">
        <div id="eingabe">
            <input type="text" id="textfeld" class="eaneingabeelement" value="" placeholder="EAN eingeben..." size="60">
            <button id="losbutton" class="eaneingabeelement" value="Los">Los</button>
            <button id="loeschenbutton" class="eaneingabeelement" value="L&ouml;schen">Löschen</button>
        </div>
        <div id="film-aktu" class="hidden">
            <div id="film-aktu-daten"></div>
            <p class="textfilmelement"><button id="hinzufuegenbutton" class="button" value="Hinzuf&uuml;gen">Zur Liste hinzufügen</button></p>
            <p class="textfilmelement"><button id="zurueckzureaneingabebutton" class="button" value="Zur&uuml;ck">Zurück</button>&nbsp; &nbsp; &nbsp;</p>
        </div>
    </div>
    <div id="ausgabe_container">
    </div>
    <script>
        $('#losbutton').on('click', function(){
            $('#eingabe').addClass('hidden');
            $('#film-aktu').removeClass('hidden');
            $('#film-aktu-daten').load('filmerstellen.php');
        });
        $('#hinzufuegenbutton').on('click', function(){
            // ...
        });
        $('#zurueckzureaneingabebutton').on('click', function(){
            $('#eingabe').removeClass('hidden');
            $('#film-aktu').addClass('hidden');
        });
    </script>

</body>

</html>

Wahrscheinlich ist der Grund, dass #filmbuttons auch dynamisch geladen wird. Am besten die Eventlistener auf $(document) registrieren, dann bist Du auf der sicheren Seite.

Bingo, dann ist mir alles klar. Anfangs schrieb ich:

Zitat

Das ist ein typisches Verhalten, wenn man einen Eventlistener in einem anderen Eventhandler hinzu fügt.

Das trifft hier nicht ganz zu, aber jedes Mal, wenn Du irgend etwas mit $('selector').load() lädst, wird das komplette Javascript wieder ausgeführt und für alle Buttons, die in dem Moment vorhanden sind, erneut jeweils ein Eventlistener neu hinzu gefügt. Das erklärt genau das Problem, das Du beschreibst.

Das Nachladen von HTML mit eingebettetem Javascript ist immer fehleranfällig und meine Empfehlung lautet: Tu's nicht.

Lösung indem Du das Javascript nur ein Mal in der Kopfseite einbindest. Für Elemente, die zu dem Zeitpunkt noch nicht vorhanden sind, kannst Du das Eventbubbling nutzen:

https://learn.jquery.com/events/event-delegation/

Du hast das schon getan bei den Entfernen-Buttons in der Filmliste:

$('#liste').on('click', '.entfernenbutton', function() {

Genau so funktioniert es mit den anderen Buttons auch.

Frage, Du schreibst:

Zitat

Durch den Button "Hinzufügen" in film.php kann ein neuer Eintrag der Liste hinzugefügt werden:

Klick-Event, das durch den Button ausgelöst wird:

Code

1. $(document).ready(function() {
2. $('#hinzufuegenbutton').click(function() {
3. $('#liste').load('listeneueneintraghinzufuegen.php', {
4. buttonGedrueckt: true
5. });
6. });
7. });

und:

Zitat

Der jQuery Code ist komplett in einer Datei.

Wie kann das funktionieren? Wenn das Javascript im document-ready ausgeführt wird, existiert der Button doch noch gar nicht, weil das HTML erst später geladen wird?

Zitat

Es gibt auch ein fertiges Plugin, was die Clientseitige Editierung der Tabellendaten direkt in der Tabelle macht.

Das ist jsGrid:

http://js-grid.com

Ich hatte auch schon überlegt, ob ich das dem TO empfehlen sollte aber weil mir nicht ganz klar war, was er eigentlich vor hat und ob es auf seine Anwendung passt, habe ich es erst Mal nicht getan.

Ich vermute, der TO will die Zustände in der Tabelle, die durch das Toggeln eingestellt werden, in der Datenbank speichern. Dabei wird ihm das HTML ohnehin nicht helfen weil die Zustände ja durch das CSS gesteuert werden.

Ich denke, es würde das Verständnis erleichtern, wenn Du erklären würdest, was es damit im realen Leben auf sich hat, d. h. was die Einträge in diesen beiden Divs zu bedeuten haben. Es hat ja irgend etwas mit Filmen zu tun.

Zitat

- Bei Klick auf den Button zum Hinzufügen eines Eintrags werden mehrere gleiche Einträge hinzugefügt. Zusätzlich wächst die Anzahl der bei jedem Klick hinzugefügten Einträge mit der Anzahl der Klicks auf den Button.

Das ist ein typisches Verhalten, wenn man einen Eventlistener in einem anderen Eventhandler hinzu fügt. Dann werden mit jedem Klick immer mehr Listener hinzu gefügt. Allerdings kann ich etwas derartiges in dem Code, den Du gepostet hast, nicht erkennen. Wäre gut, wenn man das im Zusammenhang sehen könnte: Wenn Du es online hast, dann poste die URL.

Genau was ich befürchtet hatte: Die Schleife läuft leer durch, anschließend haben $key und $val jeweils den letzten Wert. Du musst das Eintragen in die DB innerhalb der Schleife erledigen:

foreach($_POST['Panel']  as $key => $val){
    // DB-Operation hier
}

In deinem Posting #6 sehe ich nur diesen Code:

if(isset($_POST['Panel'])){
foreach($_POST['Panel'] as $key => $val){
}

Du hast Da eine leere foreach-Schleife. Poste doch Mal, wie es vollständig aussieht, einschl. Eintragen in die DB. Ich hoffe, Du hast letzteres nicht etwa hinter dieser Schleife notiert.

Ich bin mir noch nicht sicher was das Problem ist. Falls es dieses ist:

Zitat

wähle ich hier 2 Produkte aus, schickt er nur eines und zwar das letzte als Eintrag in die DB.

hat dir Basti schon die Lösung gegeben: Du musst ein Paar von eckigen Klammern hinter den Namen stellen, so:

name="Panel[]"

andernfalls wird immer nur der letzte Wert an den Server geschickt.

Nein, dein Browser ist nicht Schrott: nth-child berücksichtigt alle Knoten, auch Textknoten, die durch Zeilenumbrüche und Leerzeichen entstehen. Verwendet man nth-of-type ist die Zählung wie man es erwartet.