Niels: Contentwechsel mit Checkboxen ohne Submit oder Reload.

SELF-Forum

Contentwechsel mit Checkboxen ohne Submit oder Reload.

Niels
– Informationen zu den Bewertungsregeln

Hi,
Ich möchte einen Filter für die Ausgabe einer MySQL Tabelle erstellen, den ich mir wie folgt vorstelle:

1.Die Seite wird geladen, es erfolgt keine Ausgabe (soweit kein Problem)

2.Aktiviert man eine Checkbox (onclick()), werden aus der Tabelle alle Zeilen ausgegeben, in denen der Wert der Checkbox enthalten ist.
Hierbei sollte die Seite nicht neu laden und auch kein Submitbutton etc. genutzt werden. (Wird eine Checkbox aktiviert, wird der Wert zu einem Array hinzugefügt und anschließend die Ausgabe erneuert)

3.Wird eine Checkbox deaktiviert(onklick()), so wird der Wert, aus dem oben genannten Array entfernt und die Ausgabe wiederum erneuert.

Mein einziges Problem ist eigentlich, wie ich die "Dynamik" in das Skript bekomme, da ich mich bisher kaum mit Ajax und JS auseinander gesetzt habe.
Was kein Problem sein sollte ist das HTML Gerüst mit den Checkboxen sowie die Ausgabe der Tabelle (mit PHP).

Grüße Niels

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Contentwechsel mit Checkboxen ohne Submit oder Reload.

    Niels
    – Informationen zu den Bewertungsregeln

    Mir ist grad ein Fehler aufgefallen, meinte natürlich onChange().

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Contentwechsel mit Checkboxen ohne Submit oder Reload.

    hotti Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Mein einziges Problem ist eigentlich, wie ich die "Dynamik" in das Skript bekomme, da ich mich bisher kaum mit Ajax und JS auseinander gesetzt habe.

    Klarer Fall für Ajax. Also mach Dich da ran und alles wird gut.

    Hotte

    --
    Wenn der Kommentar nicht zum Code passt, kann auch der Code falsch sein.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Contentwechsel mit Checkboxen ohne Submit oder Reload.

    Niels Homepage des Autors
    – Informationen zu den Bewertungsregeln

    So,
    im Prinzip, habe ich jetzt ein funktionierendes Grundgerüst. Allerdings habe ich noch ein kleines Problem:

    Das Script, soll ja beim aktivieren ein PHP-Script ausführen, nur habe ich in diesem Script einen Array der sich mit dem aktivieren mehrerer Checkboxen verändern soll, der Inhalt geht jedoch logischer weise bei jeder Aktivierung einer Checkbox verloren. Wie kann ich das umgehen? Die einzige wie ich finde etwas unelegante Lösung die mir einfällt wäre eine SESSION zu starten.

    Hier meine Scripte:

    index.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>Ajax Beispiel 002</title>  
  <script type="text/javascript">  
  <!--  
	var request = false;  
  
	// Request senden  
	function setRequest(value) {  
		// Request erzeugen  
		if (window.XMLHttpRequest) {  
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera  
		} else if (window.ActiveXObject) {  
			try {  
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5  
			} catch (e) {  
				try {  
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6  
				} catch (e) {}  
			}  
		}  
  
		// überprüfen, ob Request erzeugt wurde  
		if (!request) {  
			alert("Kann keine XMLHTTP-Instanz erzeugen");  
			return false;  
		} else {  
			var url = "filter.php";  
			// Request öffnen  
			request.open('post', url, true);  
			// Requestheader senden  
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
			// Request senden  
			request.send('test='+value);  
			// Request auswerten  
			request.onreadystatechange = interpretRequest;  
		}  
	}  
  
	function bestaetigen(value) {  
		// Request erzeugen  
		if (window.XMLHttpRequest) {  
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera  
		} else if (window.ActiveXObject) {  
			try {  
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5  
			} catch (e) {  
				try {  
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6  
				} catch (e) {}  
			}  
		}  
  
		// überprüfen, ob Request erzeugt wurde  
		if (!request) {  
			alert("Kann keine XMLHTTP-Instanz erzeugen");  
			return false;  
		} else {  
			var url = "auswertung.php";  
			// Request öffnen  
			request.open('post', url, true);  
			// Requestheader senden  
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
			// Request senden  
			request.send('test='+value);  
			// Request auswerten  
			request.onreadystatechange = interpretRequest;  
		}  
	}  
	  
	// Request auswerten  
	function interpretRequest() {  
		switch (request.readyState) {  
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen  
			case 4:  
				if (request.status != 200) {  
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);  
				} else {  
					var content = request.responseText;  
					// den Inhalt des Requests in das <div> schreiben  
					document.getElementById('content').innerHTML = content;  
				}  
				break;  
			default:  
				break;  
		}  
	}  
  //-->  
  </script>  
 </head>  
 <body>  
  <input name="test" id="check" type="checkbox" value="" onchange="setRequest('max')" />  
  <input name="test" id="check" type="checkbox" value="" onchange="setRequest('susi')" />  
  <input name="test" id="check" type="checkbox" value="" onchange="setRequest('heinz')" />  
  <a href="javascript:bestaetigen('bestaetigen')">Änderungen Bestätigen</a>  
  <div id="content">testtest</div>  
 </body>  
</html>

    filter.php

    <?php  
header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte Kodierung  
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE  
  
$filter = array("1","2","3","4");  
  
$wert = strtoupper($_POST['test']);  
if ($count == "" OR $count < 1)  
	{  
	$count = 1;  
	}  
  
if ($wert == "SUSI")  
	{  
	$filter[] = $wert;  
	echo $filter[4];  
	$count ++;  
	echo $count;  
	}  
if ($wert == "MAX")  
	{  
	$filter[] = $wert;  
	echo $filter[4];  
	}  
if ($wert == "HEINZ")  
	{  
	$filter[] = $wert;  
	echo $filter[4];  
	}  
echo "__".$wert;  
?>

    auswertung.php

    <?php  
header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte Kodierung  
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE  
  
$name = strtoupper($_POST['test']);  
echo $name;  
?>

    Aktueller stand der Dinge!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Contentwechsel mit Checkboxen ohne Submit oder Reload.

      Struppi Homepage des Autors
      – Informationen zu den Bewertungsregeln

      im Prinzip, habe ich jetzt ein funktionierendes Grundgerüst. Allerdings habe ich noch ein kleines Problem:

      Das Skript hat mehrere Probleme. Du erzeugst bei jedem Aufruf des Skripte ein neues XMLHttpRequest Objekt. D.h. wenn dein PHP Skript länger zum Antworten bräuchte und du klickst während die erste Abfrage läuft, auf eine andere checkbox, wird der erste request abgebrochen bzw. das Objekt wird überschrieben. Was, soweit ich das hier mitbekommen habe, der IE mit Laufzeitffehler quittiert.

      Das das onchange Event bei checkboxen funktioniert, wundert mich, da onchange sich auf die Änderung des Wertes bezieht und bei einer Checkbox ändert sich ja nicht der Wert, wenn du diese anklickst.

      Das Script, soll ja beim aktivieren ein PHP-Script ausführen, nur habe ich in diesem Script einen Array der sich mit dem aktivieren mehrerer Checkboxen verändern soll, der Inhalt geht jedoch logischer weise bei jeder Aktivierung einer Checkbox verloren.

      Von welchem Inhalt sprichst du? Wenn  du den Seiteninhalt meinst, dann darsft du den einfach nicht überschreiben.

      Wie kann ich das umgehen? Die einzige wie ich finde etwas unelegante Lösung die mir einfällt wäre eine SESSION zu starten.

      Oder meinst du auf dem Server? Dann musst du dir eine Möglichkeit einfallen lassen, die Userdaten zu speichern, dass kann über Session funktionieren. Es kann aber auch andere Möglichkeiten geben, die Frage ist halt, was du mit den Daten vorhast.

      Struppi.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Contentwechsel mit Checkboxen ohne Submit oder Reload.

        Niels
        – Informationen zu den Bewertungsregeln

        Von welchem Inhalt sprichst du? Wenn  du den Seiteninhalt meinst, dann darsft du den einfach nicht überschreiben.
        -->Mit dem Inhalt meine die Werte in dem Array, beim aktivieren einer Checkbox wird ein Wert zum Array hinzugefügt oder entfernt.

        Versuche es nochmal zu erklären was mein ziel ist.

        Ich versuche eine MySQL Tabelle mit einem Filter auszugeben.

        Der User aktiviert Filteroptionen per Checkbox, diese sollen nun Dynamisch in die MySQL abfrage übernommen werden. Jede Checkbox löst hierbei mehrere Scripte aus:
        -der Filter wird beim aktivieren zur MySQL Abfrage hinzugefügt (in einen Array eingefügt) und beim deaktivieren wieder entfernt
        -bei jeder Aktivierung wird ein Counter erhöht oder bei einer Deaktivierung gesenkt
        -überschreitet der Counter einen bestimmten Wert, so erfolgt die Ausgabe der MySQL Tabelle mit den Filteroptionen aus dem Array

        Wäre schön wenn mir einer mit Codeschnipseln, Anregungen oder kleinen Beispielen weiterhelfen könnte.(Nein ich erwarte keine fertige Komplettlösung!^^)

        PS: Die MySQL Tabelle wird mehrere tausend Daten enthalten, weswegen eine Abfrage erst möglich sein soll wenn es genügend Suchkriterien gibt.

        im Prinzip soll das ganze dann so aussehen:
        Beispiel

        Problem ist nur das hier bei jeder Filteränderung eine Abfrage erfolgt.

        Momentan verwerfe ich glaube ich lieber den Gedanken mit der MySQL Tabelle und speichere die Informationen in einem Array.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  4. Contentwechsel mit Checkboxen ohne Submit oder Reload.

    Niels
    – Informationen zu den Bewertungsregeln

    Habe mich nochmal weiter umgeguckt (diesmal auch verstärkt in Englischen Tutorials) und dies gefunden:
    Beispiel
    Damit müsste es doch eigendlich funktionieren (Modifiziert natürlich),
    ich könnte mehrere Filter übergeben indem ich ein Formularfeld definiere in dem die Checkboxen sind und die Werte übergeben wenn ein Submitbutton gedrückt wird.

    Sowie in diesem Beispiel das ich auf Patfusion gefunden hab:

    <form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:  
					<select id="column">  
		  				<option value="1">Firstname</option>  
						<option value="2">Lastname</option>  
						<option value="3">Department</option>  
						<option value="4">Start Date</option>  
					</select>  
					<input type="text" id="keyword" />  
					<input type="submit" value="Submit" />  
					<input type="reset" value="Clear" />  
				</form>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln