• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] lezter Datensatz (aus mySql DB) in Browsertabelle, nach Deleteoperation, doppelt.

N

noa351

New member
Hi liebes JsWelt Forum,

auf meiner langen, beschwerlichen Reise durch die Welt von JS bin ich mal wieder an einen Punkt angelangt, bei dem ich eure Hilfe benötige. Zahlreiches Durchsuchen von diversen Foren konnten mir bei meinem Faulen Zahn nicht weiterhelfen. Hoffe das ich hier weiterkomme.


/*----------------------*/

Tatbestand:

Hier wird in HTML5 eine einfache TB erzeugt, die per JS, Jquery Ajax und PHP Daten aus einer mySQL DB ausliest bzw. verarbeitet.
Unter Anderem ist mit verarbeiten gemeint, dass die angeforderten Informationen (Datensätze im zurückgelieferten Array) der Einfachheit halber in die für sie vorgesehenen TB-Spalten, im HTML Dokument per Jquery Call, eingetragen werden sollen.


Im Folgenden soll anhand der Gezeigten Grafiken das eigentliche Problem veranschaulicht werden:


Gra Nr. 1:
TB-zs_1.JPG

Das soll die TB im Ursprünglichen Zustand sein.
--------

Gra Nr. 2:
TB-zs_2.JPG

Hier wird das eigentliche Problem ersichtlich.
Der Datensatz mit der ID = 212 wurde aus mir unbegreiflichen Gründen Gedoppelt. (Es handelt sich hierbei um den als leztes in die DB eingetragene Datensatz, sprich der mit der höchsten ID)

Der Code zum Auslesen bzw. verarbeiten:

Code: 
var showFirstFive = function(){
    $.ajax({
        url: "includes/connectDB.php",
        type: "POST",
        data: {
            action: "firstFive"
        },
        //der parameter dat ist vom TYP String (JSON => "{'key':'value'}" ), solange noch nicht geparst wurde. 
        success: function (dat) {
            var eJson = JSON.parse(dat);
            var counter = 0;
            


            for (var iIdx in eJson) {
                for (var iEle in eJson[iIdx]) {
                     if (iEle === "id") {
                        $("#id" + counter).empty();
                        $("#id" + counter).append(eJson[iIdx][iEle]);
                    } else if (iEle === "event") {
                        $("#e" + counter).empty();
                        $("#e" + counter).append(eJson[iIdx][iEle]);
                    } else if (iEle === "bezirk") {
                        $("#b" + counter).empty();
                        $("#b" + counter).append(eJson[iIdx][iEle]);
                    } else if (iEle === "start") {
                        //erstellung variable um eventuell anderes format auszugeben
                        var datum = eJson[iIdx][iEle];
                        $("#s" + counter).empty();
                        $("#s" + counter).append(datum);
                    }else if (iEle === "currentTStamp") {
                        continue;
                    }else
                        return;
                }
                    counter++;
            }
        }
    });
}


/*
* Achtung ! Der eigentliche Code zur 
* Verarbeitung befindet sich über diesem 
* mehrzeiligen Kommentar.
* Darunter das Handling der Events.
*
**/



$(document).ready(function () {
    showFirstFive();
    $("#modalSendButton").on("click", function (event) {
        $.ajax({
            url: "includes/connectDB.php",
            type: "POST",
            data: {
                action: "insert",
                kapot: JSON.stringify({
                    "input1": $("#event-npt").val(),
                    "input2": $("#bezirk-npt").val(),
                    "input3": $("#date-npt").val()
                })
            },
            //der parameter dat ist vom TYP String (JSON => "{'key':'value'}" ), solange noch nicht geparst wurde. 
            success: function (dat) {                
                showFirstFive();
            }
        });
        
    });

$("tbody img").on("click", function (event) {
       var classOfParentsFirstSibbling = $(event.target).parent().siblings()[0].getAttribute("class");
       var idOfParentsFirstSibbling = $(event.target).parent().siblings()[0].id;
       var valueOfCurrentId = $("#"+idOfParentsFirstSibbling).text();
       
       var classOfClickedElement = event.target.getAttribute("class");
       
       if(classOfParentsFirstSibbling === "bearbeiten" && classOfClickedElement === "loeschen"){
           
           $.ajax({
                url: "includes/connectDB.php",
                type: "POST",
                data: {
                    action: "delete",
                    kapot: JSON.stringify({
                        "input1" : valueOfCurrentId
                    })
                },
                //der parameter dat ist vom TYP String (JSON => {'key':'value'} ), solange noch nicht geparst wurde. 
                success: function (dat) {
                    alert(dat); 
                    showFirstFive();
                                       
                }
           });
            
       }
       else if(classOfParentsFirstSibbling === "bearbeiten" && classOfClickedElement === "editieren"){
           
           $.ajax({
                url: "includes/connectDB.php",
                type: "POST",
                data: {
                    action: "edit",
                    kapot: JSON.stringify({
                        "input1" : valueOfCurrentId
                    })
                },
                //der parameter dat ist vom TYP String (JSON => "{'key':'value'}" ), solange noch nicht geparst wurde. 
                success: function (dat) {
                    showFirstFive();             
                }
           });
       }
       //alert(idOfParentsFirstSibbling);
       //alert(classOfClickedElement);
       //alert(classOfParentsFirstSibbling);
    });

});

--------
Gra Nr. 3:
TB-zs_3.JPG

Bei Manueller Aktualisierung erzeugt dann der Browser die richtige Darstellung ohne gedoppelte Datensätze.


Nachtrag:

So sieht das aus, wenn ich alle Vorgänger Datensätze gelöscht habe. Jquery Ajax verhält sich normal und löscht die entsprechenden Datensätze. Jedoch wird der Lezte immer weiter vervielfältigt.
Dieser ist in der mySQL TB exakt nur einmal vorhanden.

TB-zs_4.JPG



Kann mir jemand auf die Sprünge helfen und mir sagen was der Grund für dieses Verhalten ist?


MFG
 
Zuletzt bearbeitet von einem Moderator:
Hallo noa
Arbeitet die connectDB.php 100% richtig?
Liefert sie das richtige Format?
Fehlen bei der Übergabe Klammern Beistriche od ähnliches?
Wenn das nicht sicher ist
Ersetze nur mal um zu testen die connectDB.php mit einer vorgefertigten Ausgabe als
connTest.json od connTest.txt.

kann es sein das die connectDB.php immer 5 Datensätze ausgibt und daher auch wenn nur
1 Datensatz in der DB ist diesen 5 x sendet?
 
Zuletzt bearbeitet von einem Moderator:
Hi und danke für die Antwort Andreax.

Ich bin mehrfach meinen php Script durchgegangen, konnte jedoch keine Ecken und Kannten finden. Ich bin ja der Meinung, wie sich oft in der Vergangenheit herausgestellt hat ist nicht wirklich Verlass auf diese, dass der Code Makellos und perfekt ist XD.

Nun bin ich mal so frei und stelle meinen Code zur Einsicht zur verfügung. Ich hoffe sehr, dass man die Nadel im Heuhaufen finden wird.


connectDb.php :

PHP: 
<?php
define("IN_SITE", true);
include './db_connect.php';

$db = new DB();

$response = null;
$input = null;


switch ($_POST['action']) {    
    case 'firstFive'://first Five with earliest date***************
        $response = $db -> getAllEntries();
        
        $json = json_encode($response);
        echo $json;
        break; 
        
    case 'insert': // INSERT **************************************

        if(isset($_POST["kapot"])){
            $input = $_POST["kapot"];
        }else{
            return new ErrorException("keine Daten Vermittelt worden.");
        }
        $dJson = json_decode($input,true);

        $event = $dJson["input1"];
        $bezirk = $dJson["input2"];
        $start = date("Y-m-d", strtotime($dJson["input3"]));

        
        $valid = true;
        $eventNameError = '';
        $bezirkNameError = '';
        $dateError = '';

        if (empty($dJson["input1"])) {
            $eventNameError = 'Please enter eventname';
            $valid = false;
        }
        if (empty($dJson['input2'])) {
            $bezirkNameError = 'Please enter bezirk';
            $valid = false;
        }
        if (empty($dJson['input3'])) {
            $dateError = 'Please enter date';
            $valid = false;
        }

        if ($valid) {
            try {
                $db->setzeEvent($event, $bezirk, $start);
                $response = array('message' => 'insert done');
            } catch (PDOException $e) {
                $error = 'Error adding user: ' . $e->getMessage();
                $response = array('databaseError' => $error);
                $json = json_encode($response); // return json
                echo $json;
            }
            //$message = 'insert done';
            //$response = array('message' => $message);
        } else { // input error:
            $response = array('firstnameError' => $eventNameError,
                'secondnameError' => $bezirkNameError,
                'emailError' => $dateError);
        }
        $json = json_encode($response);
        echo $json;
        break;
        
    case 'delete':
        $input = $_POST["kapot"];
        $dJson = json_decode($input,true);
        
        $db -> deleteEntry($dJson["input1"]);
        
        echo "schaue in der DB nach ob eintrag mit der ID=".$dJson["input1"]." geloescht wurde.";
        break;
    
    case 'edit':
        $input = $_POST["kapot"];
        $dJson = json_decode($input,true);
        
        echo json_encode($db -> getEntry($dJson["input1"]));    
        break;
    
    case 'editAndSave':
        $input = $_POST["kapot"];
        $dJson = json_decode($input,true);
        
        echo json_encode($db -> updateEntry($dJson["input1"],$dJson["input2"],$dJson["input3"],$dJson["input4"]));    
        break;
}
?>

db_connect.php:

PHP: 
<?php

if (!defined('IN_SITE')){ 
    echo "<h1>Zutritt verweigert!<h1>"; 
    die();     
}

class DB{
        private static $_db_username = "******";
        private static $_db_password = "*******";
        private static $_db_host = "******";
        private static $_db_name = "*****";   
        private static $_db_table = "*****";   
        private static $_db;
        
        function __construct() {
            try{
                self::$_db = new PDO("mysql:host=".self::$_db_host.";dbname=".self::$_db_name,  self::$_db_username,  self::$_db_password);
            }catch(PDOException $e){
                echo"Datenbank verbindung gescheitert!";                                                                                        
                die();
            }
        }
        
        function setzeEvent($event, $bezirk, $start){
            if($event == NULL||$bezirk == NULL||$start == NULL){
                return NULL;
            }else{
                $stmt = self::$_db -> prepare("INSERT INTO ".self::$_db_table." (event, bezirk, start) VALUES(:ev, :bez, :strt)");
                $stmt -> bindParam(":ev", $event);
                $stmt -> bindParam(":bez", $bezirk);
                $stmt -> bindParam(":strt", $start);
                //$stmt -> bindParam(":tSp", $start);
                
                $stmt -> execute();
            }
        }
        
        function getAllEntries($sort = "DESC"){
            if($sort != "ASC" && $sort != "DESC"){
                return -1;
            }
            
            $stmt = self::$_db -> prepare("SELECT * from ".self::$_db_table);
                                                                                                
            //$stmt ->bindParam(":sort", $sort);
            $stmt -> execute();
            
            $result = $stmt -> fetchALL(PDO::FETCH_ASSOC);            
            
            return $result;
        }
        
        function deleteEntry($_ID){
            $stmt = self::$_db -> prepare("DELETE FROM ".self::$_db_table." where id=:ID");
            
            $stmt -> bindParam(":ID", $_ID);
            $stmt -> execute();
        }
        
        function getEntry($_ID){
            $stmt = self::$_db -> prepare("SELECT * FROM ".self::$_db_table." where id=:ID");
            
            $stmt -> bindParam(":ID", $_ID);
            $stmt -> execute();
        }
        
        function updateEntry($event, $bezirk, $start, $_ID){
            if($event == NULL||$bezirk == NULL||$start == NULL){
                return NULL;
            }else{
            $stmt = self::$_db -> prepare("UPDATE ".self::$_db_table." SET event=:ev, bezirk=:bez, start=:strt where id=:ID");
            
            $stmt -> bindParam(":ID", $_ID);
            $stmt -> bindParam(":ev", $event);
            $stmt -> bindParam(":bez", $bezirk);
            $stmt -> bindParam(":strt", $start);
            $stmt -> execute();
            }
        }
}
?>


MfG
 
Wenn ich die Antwort darauf wüsste, kannst du dir sicher sein, würde ich den Leuten hier im Forum nicht auf die Nerven gehen ;).
 
du hast hier viel zu viel code, wer soll das alles lesen? nimm stück für stück immer mehr code weg bis der fehler nicht mehr auftritt und den stand davor zeigst du hier. meistens sieht man dann selbst den fehler.
 
Korrigiert mich bitte fals ich in irgendeinem Punkt falsch liege.

Nachfolgend ein Teilcode aus db_connect.php:

PHP: 
function getAllEntries(){
            
            $stmt = self::$_db -> prepare("SELECT * from ".self::$_db_table);
                                                                                                
            //$stmt ->bindParam(":sort", $sort);
            $stmt -> execute();
            
            $result = $stmt -> fetchALL();            
            
            return $result;
        }
        
        function deleteEntry($_ID){
            $stmt = self::$_db -> prepare("DELETE FROM ".self::$_db_table." where id=:ID");
            
            $stmt -> bindParam(":ID", $_ID);
            $stmt -> execute();
        }

Das hier sind die beiden wesentlichen Methoden mit denen ich sowohl den Löschvorgang alsauch das Übergeben der gesuchten Daten aus der DB an JS realisiere.
bzw. gibt es noch ein weiteres PHP script, das in einer Switch-Anweisung die geforderte Aktion vornimmt, um Resultate aus Datenbankoperationen, in JSON umgewandelt, an die succsessfunction im JS zum Weiterverarbeiten überreicht.

sprich HTML -> JS -> connectDb.php <-> db_connect.php -> SQL und auf dem gleichen Weg wieder zurück.

Ich bin davon ausgegangen, dass aufgrund der Rückgabe vom php Script, die Anzahl der Angeforderten Obj. im Array mit der Menge an Datensätzen in phpMyAdmin übereinstimmt, das JS mein Problemkandidat ist.

Bitte entschuldigt meine schlecht gedeutschten Formuliereungen.

MfG NOA
 
vieleicht ist es nur am Zwischenspeicher vom Browser
versuch mal in der js beim ajax
eine zufallsnummer anzuhängen dann
holt er die Daten immer vom Server
includes/connectDB.php?+Math.random();
 
Deine Schleife zum Ersetzen sieht nicht gut aus und ist meiner Meinung nach die Ursache des Problems. Kann es sein, dass der letzte Datensatz nicht doppelt geschrieben wird, sondern die letzte Zeile einfach nicht geleert wird?

Probier' mal folgendes:
Code: 
var showFirstFive = function(){
	$.ajax({
		url: "includes/connectDB.php",
		type: "POST",
		data: {
			action: "firstFive"
		},
		//der parameter dat ist vom TYP String (JSON => "{'key':'value'}" ), solange noch nicht geparst wurde. 
		success: function (dat) {
			var eJson = JSON.parse(dat);
			for (var i = 0; i < 5; i += 1){
				$("#id" + i + ", #e" + i + ", #b" + i + ", #s" + i).empty();
				if (eJson[i]){
					$("#id" + i).append(eJson[i].id || "");
					$("#e" + i).append(eJson[i].event || "");
					$("#b" + i).append(eJson[i].bezirk || "");
					$("#s" + i).append(eJson[i].start || "");
				}
			}
		}
	});
};
 
Zuletzt bearbeitet:
Sry das ich mich so spät zurückmelde.

Ein großes Dankeschön an mikedoe. Vorallem für den Tip mit der Benutzung von Debugging Tools in Browsern. Ich kann nur jedem Empfehlen mal den debugger in Chrome auszuprobieren. Sicherlich bieten alle Alternativbrowser ähnliche Funktionen... bin ich mir ziemlich sicher.

Der hier geht an dich kkapsner. Nach langem Rumgrübeln und "Debuggen" :) bin ich zu exakt dem selben Entschluss gekommen, dass ich die lezte Zeile in der Tabelle nicht geleert habe.
Ich bin sicher das auf dein Code Verlass ist, jedoch war ich der Meinung, das Selbsterkenntnis der erste Schritt zur Besserung ist und eine eigene Lösung geschrieben.

Hier kommts (Ich nenne sie die "Doppelsuperdupermegaschleife ):
Code: 
for (var iIdx in eJson) {            
                for (var iEle in eJson[iIdx]) {
                     if (iEle === "id") {
                        if(iIdx === ""+(eJson.length-1))
                            $("#id" + iIdx).empty();
                        else
                            $("#id" + iIdx).html(eJson[iIdx][iEle]);
                    } else if (iEle === "event") {
                        if(iIdx === ""+(eJson.length-1))
                            $("#e" + iIdx).empty();
                        else
                            $("#e" + iIdx).html(eJson[iIdx][iEle]);
                    } else if (iEle === "bezirk") {
                        if(iIdx === ""+(eJson.length-1))
                            $("#b" + iIdx).empty();
                        else
                            $("#b" + iIdx).html(eJson[iIdx][iEle]);
                    } else if (iEle === "start") {
                        if(iIdx === ""+(eJson.length-1))
                            $("#s" + iIdx).empty();
                        else{
                            //erstellung variable um eventuell anderes format auszugeben
                            var datum = eJson[iIdx][iEle];
                            //$("#s" + counter).empty();
                            $("#s" + iIdx).html(datum);
                        }   
                    }else if (iEle === "currentTStamp"){
                        continue;                    
                    }
                }                
            }
 
@kkapsner
dein Script wird so
Code: 
if (eJson[i]){
$("#id" + counter).append(eJson[i].id || "");
$("#e" + counter).append(eJson[i].event || "");
$("#b" + counter).append(eJson[i].bezirk || "");
$("#s" + counter).append(eJson[i].start || "");
				}

nicht arbeiten weil counter nicht inkrementiert. Außerdem ist counter ohne das Keyword var eine globale Variable
besser du ersetzt counter mit i . ;)
 
@andreax: ups... da hab' ich nach dem Kopieren wohl vergessen was zu ersetzen... es ist sogar noch schlimmer: counter wird da ja nur referenziert und nie definiert. Deswegen wird das einen Fehler werfen. ReferenceError: counter is not defined

Hab' ich mal oben ausgebessert.

@noa: ich bin mir ziemlich sicher, dass deine Lösung nicht immer funktioniert. Aber für eine genauere Aussage bräuchten wir die HTML-Struktur und die die JSON-Antwort des Servers.
Warum iterierst du eigentlich über den Array mit for...in? Das ist eine potentielle Fehlerquelle. Arbeite doch mit einem normalen for oder mit forEach.
 
noch besser ist mit der Laufvariablen aus der foreach schleife zu zählen... dann läuft auch alles synchron.

an dich kkapsner ;).

Ich weiss nicht genau was du meinst mit potentieller Fehlerquelle bei der Benutzung von For in ??
 
Zuletzt bearbeitet:
noa351 schrieb:
noch besser ist mit der Laufvariablen aus der foreach schleife zu zählen... dann läuft auch alles synchron.
Zum Vergrößern anklicken....
Da fällt mir gerade auf, dass forEach bei dir gar nicht ideal ist, da es ja sein kann, dass das Array weniger als fünf Einträge hat, oder? Dann hast du wieder genau das gleiche Problem, dass die letzten Einträge nicht geleert werden.

noa351 schrieb:
Ich weiss nicht genau was du meinst mit potentieller Fehlerquelle bei der Benutzung von For in ??
Zum Vergrößern anklicken....
Das iteriert auf über Eigenschaften im Prototype, was du ziemlich sicher nicht willst. Wenn du z.B. in einem älteren Browser unterwegs bist, und einen Polyfill für es5 verwendest, würde da auch über "forEach", "map", etc. iteriert werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben