Ajax/jquery und die Checkboxen...

Wuppi · Beitrag von **Wuppi** » 17.10.2019 16:09

Hallo liebe Gemeinde,

hatte hier gestern schon was gepostet - aber völlig anderer Ansatz. Ich finde Ajax passt hier ganz gut ... mein gestriges Problem war eher Oldschool. Also ...

Ich möchte ein kleines DB-Update-Script schreiben. Das ganze ist recht simple aber ich hänge an der Checkbox fest.

Folgendes ist geplant: Ich habe eine Datenbank mit Dateinamen. In der Datenbank hat jeder Dateiname eine "PlayCount" gesetzt. "Hab ich gesehen" (1) "Hab ich noch nicht gesehen" (NULL). Mein Script hat nun eine Eingabemaske für den Dateinamen. Ich gebe die ersten Buchstaben ein, es kommen Live die ersten Treffer.

Das klappt.

Jeder Treffer mit einer Checkbox ausgestattet. Diese Checkbox ist als "checked" markiert, wenn der Datensatz in der DB einen gültigen PlayCount hat.

Ich möchte also folgenden Endzustand haben:

Dateinamen: [ blablabla ]
Suchergebnisse
[ ] 1) blablabla
[ ] 2) blablablabluub
[x] 3) blubbblablabla

Den letzten Dateinamen hab ich also bereits geschaut.

Jetzt soll folgendes passieren (so ein typisches Szenario):
Ich klicke den ersten Dateinamen an: x -> Update der DB (PlayCount=1), ich klicke den letzten Dateinamen an (den hab ich überhaupt nicht gesehen - war ein Fehler) -> Update der DB (PlayCount=0). Ohne reload etc. möchte ich jetzt doch noch mal den ersten Dateinamen ausXen (0) ... den hab ich auch nicht gesehen (manchmal sehr verwirrt *G*)

Und da hänge ich gerade.

Ich finde recht viel zu Checkboxen - allerdings verstehe ich das ganze nicht so recht. Ich bin froh das ich das Text-Eingabe-Snippet gefunden habe und nach meinen Bedürfnissen anpassen konnte. Bei Checkboxen bekomme ich gar nichts angepasst - da ist wohl ein grundsätzliches Verständnisproblem bei Ajax/jquery (vorallem jq...) vorhanden.

Ideen wie ich das umgesetzt bekomme?

Hier ein wenig Code (db-zeugs lass ich mal weg):

suche.php

Code: Alles auswählen

...sql...
while ->
<input type="checkbox" id="{$idFile}" $check> 
<label for="title">{$strFilename}</label><br>
<- while

$check: via sql-Abfrage ermittel ich den Status (gesehen = checked). Hier ist dann auch ein Problem der ganzen Checkbox-Lösungen die ich so gefunden habe: die gehen nur mit einer Checkbox da z.b. "class=" mit einem festen Namen gesetzt ist. Dann hab ich 70x class="checkme", klicke eine Checkbox und die Scripte wissen nicht welche ich gedrückt habe ...

index.php

Code: Alles auswählen


<html>
<head>
	<title>Suche</title>
	<script type="text/javascript">
		function searchFor(title){
			var xmlHttp = null;
			// Mozilla, Opera, Safari sowie Internet Explorer 7
			if (typeof XMLHttpRequest != 'undefined') {
				xmlHttp = new XMLHttpRequest();
			}

			// Wenn das Objekt erfolgreich erzeugt wurde			
			if (xmlHttp) {
				var url = "suche.php";
				var params = "title="+title;
				
				xmlHttp.open("POST", url, true);
				
				//Headerinformationen für den POST Request
				xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlHttp.setRequestHeader("Content-length", params.length);
				xmlHttp.setRequestHeader("Connection", "close");					
			
				xmlHttp.onreadystatechange = function () {
					if (xmlHttp.readyState == 4) {
						// Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
						document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
					}
				};				
				xmlHttp.send(params);
			}			
		}
	</script>
</head>
<body>
	<input type="text" onkeyup="searchFor(this.value);"/>
	<div id="ergebnis"></div>
</body>
</html>

das ist NUR das Script für die Texteingabe. Das klappt.

Hab z.b. dieses hier gefunden:

Code: Alles auswählen

    <script>
        $(document).ready(function(){
            $("input:checkbox").change(function() { 
                var isChecked = $("input:checkbox").is(":checked") ? 1:0; 
                $.ajax({
                    url: 'suche.php',
                    type: 'POST',
                    data: { strID:$("input:checkbox").attr("id"), strState:isChecked }
                });
            });        
        });
    </script>

aber ich verstehe nicht so recht wie ich das ansteuer. Zudem sehe ich noch das Problem mit Checkboxen die bei der Ausgabe schon mit "checked" markiert wurden - wie bekokmmt man hier den richtigen Statuswechsel übermittelt? (also von checked auf unchecked ... sicher was anderes als wenn ich ein selbst gesetztes checked wieder unchecke ...)

Danke schon mal

Grüße
Wuppi

Wuppi · Beitrag von **Wuppi** » 18.10.2019 16:32

Hab es (fast) gelöst bekommen ...

fast: ich bleibe weiterhin im "refresh-Problem" hängen. Klicke ich eine Checkbox mit Status 0, wird eine 1 in die DB geschrieben: passt. Wenn ich jetzt noch mal klicke, sollte natürlich eine 0 in die DB geschrieben werden -> passiert natürlich nicht. Klar - das "optische" in meiner Lösung wird nur "oberflächlich" per CSS gelöst. An der Checkbox steht weiterhin 0 und nicht 1. Vielleicht hat hier noch jemand eine idee?

index.php

Code: Alles auswählen

<html><head><title>Suche</title>
	<link rel=stylesheet href=farben.css type=text/css>
	<script type="text/javascript">
		function searchFor(title){
			var xmlHttp = null;
			// Mozilla, Opera, Safari sowie Internet Explorer 7
			if (typeof XMLHttpRequest != 'undefined') {
				xmlHttp = new XMLHttpRequest();
			}

			// Wenn das Objekt erfolgreich erzeugt wurde			
			if (xmlHttp) {
				var url = "suche.php";
				var params = "title="+title;
				xmlHttp.open("POST", url, true);
				
				//Headerinformationen für den POST Request
				xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlHttp.setRequestHeader("Content-length", params.length);
				xmlHttp.setRequestHeader("Connection", "close");					
				xmlHttp.onreadystatechange = function () {
					if (xmlHttp.readyState == 4) {
						// Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
						document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
					}
				};				
				xmlHttp.send(params);
			}			
		}
	</script>

	<script type="text/javascript">
		function insert(insert, stat){
			var xmlHttpSent = null;
			if (typeof XMLHttpRequest != 'undefined') {
				xmlHttpSent = new XMLHttpRequest();
			}	
			if (xmlHttpSent) {
				var url = "suche.php";
				var params = "insert="+insert+"&stat="+stat;
				xmlHttpSent.open("POST", url, true);
				xmlHttpSent.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlHttpSent.setRequestHeader("Content-length", params.length);
				xmlHttpSent.setRequestHeader("Connection", "close");					
				xmlHttpSent.send(params);
			}			
		}
	</script>
</head>
<body>
	<input type="text" onkeyup="searchFor(this.value);"/>
	<div id="ergebnis"></div>
</body></html>

für das fehlende "checkboxing" nehme ich also das eigentliche Suchscript und ändere es minimal.

suche.php
(sql-gedöns gekürzt)

Code: Alles auswählen

<?php
include 'config.php';

if (isset($_POST["insert"])){
    $idFile = $_POST['insert'];
    $status = $_POST['stat'];
    if ( $status == 0 ) { $stat = 1; } 
    if ( $status == 1 ) { $stat = 'null'; }

...Update-SQL...
}

if (isset($_POST["title"])){
    $title = $_POST["title"];

...Select-SQL...
	while($row = mysqli_fetch_object($result)){
		$strFilename =  $row->strFilename;    
    		$idFile = $row->idFile;
     	// Status-Ausgabe
    	$playCount = $row->playCount;
    	if ($playCount >= 1) {
        	$check = "checked"; $status = 1;
        } else { 
            $check = ""; $status = null;
            }
        
echo <<<AUSGABE
    <input type="checkbox" id="{$idFile}" onclick="insert({$idFile}, $status)" class="selection_checkbox" $check> 
    <label for="{$idFile}" class="selection_label">{$strFilename}</label><br>
AUSGABE;
	}
}

Was mich noch stört - ich bekomme es nicht anders hin: ich möchte das Script ja grundsätzlich auch mal anders wo einsetzen (für mein Forum hab ich hier z.b. schon eine Idee) - dadurch das die suche.php von der index.php aufgerufen wird, kann ich die Datenbank-Infos (also alles in der config.php) nicht "mitnehmen" - ich muss explizit die config in der suche.php includen. In dem Fall hier ist das kein Thema. Jetzt bette ich das ganze aber wo anders ein wo das "Gerüst" schon eine config.php hat - statt die vorhande db-connection zu nehmen, wird eine neue aufgemacht?!

CSS:

Code: Alles auswählen

.selection_checkbox:checked + .selection_label {
  color:green;
}

phpBB.de

Ajax/jquery und die Checkboxen...

Ajax/jquery und die Checkboxen...

Re: Ajax/jquery und die Checkboxen...