Checkbox per JS setzen

[Klaus]

Hallo Forum,

ich übersende per php Daten für Inputfelder, die ich per JS einsetze.

Die Daten kommen in folgender Form daher:

wert||id||wert2||id2||wert3||id3||usw.

Anschließend fülle ich die Inputfelder per JS (Jquery):

var einzeldata = data.split("||");
for (var i = 0; i < (einzeldata.length/2); i++) {
var d= i*2; var d1=i*2+1;
$("#" + einzeldata[d1]).val(einzeldata[d]);
}

Nun ist aber auch eine Checkbox zu füllen. Sprich, einer der Einträge beinhaltet im Wert eine 1 oder eine 0 (für checked bzw. unchecked).

Wie setze ich nun das Häkchen in die Checkbox?

Meine Idee wäre, die Id danach zu untersuchen, ob der String "checkbox" darin vorkommt (meine IDs sind so aufgebaut, daß entweder input oder checkbox in der ID vorkommt) und danach den Haken per $('#checkbox' + einzeldata[d1]).removeAttr("checked"); zu entfernen oder per $('#checkbox' + einzeldata[d1]).attr("checked",true); zu setzen.

Ist das so korrekt und wenn ja, macht man das so oder geht es besser?

Klaus

[Encoder]

Du kannst das direkt mit checkboxobjekt.checked ansprechen.

[MudGuard]

Hi,

Meine Idee wäre, die Id danach zu untersuchen, ob der String "checkbox" darin vorkommt

warum nicht das type-Attribut prüfen? Das ist m.E. zuverlässiger.

Und dann, statt removeAttr/attr einfach die checked-Eigenschaft setzen.

deinElement.checked = (deinWert == 1);

cu,
Andreas

[Klaus]

Hi MudGuard,

warum nicht das type-Attribut prüfen? Das ist m.E. zuverlässiger.

Ok, verstehe:

if ($('#' + einzeldata[d1]).attr('type') == 'checkbox') {

deinElement.checked = (deinWert == 1);

Das verstehe ich nicht.

Kannst Du mir erklären, was Du genau meinst?

Klaus

[Der Martin]

Hallo,

warum nicht das type-Attribut prüfen? Das ist m.E. zuverlässiger.

warum nicht gleich die type-Eigenschaft im DOM? Das ist einfacher und direkter als der Umweg übers Attribut.

Ok, verstehe:
if ($('#' + einzeldata[d1]).attr('type') == 'checkbox')

Noch besser:

if ($('#' + einzeldata[d1]).type == 'checkbox')

deinElement.checked = (deinWert == 1);
Das verstehe ich nicht.
Kannst Du mir erklären, was Du genau meinst?

Was genau verstehst du nicht? Der Ausdruck (deinWert==1) ist ein Vergleich, er ergibt entweder true oder false. Und genau dieser Wert wird dann an die checked-Eigenschaft zugewiesen, die mit dem Zustand (angekreuzt oder nicht) des Checkbox-Objekts korreliert.

So long,
 Martin

[Klaus]

Hallo Martin,

Was genau verstehst du nicht? Der Ausdruck (deinWert==1) ist ein Vergleich, er ergibt entweder true oder false. Und genau dieser Wert wird dann an die checked-Eigenschaft zugewiesen, die mit dem Zustand (angekreuzt oder nicht) des Checkbox-Objekts korreliert.

Ich kenne diese Schreibweise nicht.

So:? $('#' + einzeldata[d1]).checked = (einzeldata[d] == 1);

Ist das korrekt?

Klaus

[Klaus]

So:? $('#' + einzeldata[d1]).checked = (einzeldata[d] == 1);

Ist das korrekt?

p:s.

if ($('#' + einzeldata[d1]).attr('type') == 'checkbox') {

... funktioniert

if ($('#' + einzeldata[d1]).type == 'checkbox') {

... funktioniert nicht

Jedenfalls auf den ersten Blick. Es kann aber auch sein, daß ich etwas anderes dabei übersehen habe.

Klaus

[Klaus]

Noch ne Frage:

warum nicht das type-Attribut prüfen? Das ist m.E. zuverlässiger.

Was haben meine Daten (die kommen aus einer DB) denn eigentlich mit einem type-Attribut zu tun?

Es sind doch Daten eines Strings, die ich selber dort hin packe.

Da ist doch eigentlich kein Type-Attribut drin?

Klaus

[ChrisB]

Hi,

Was haben meine Daten (die kommen aus einer DB) denn eigentlich mit einem type-Attribut zu tun?

Sie haben mit überhaupt nichts viel zu tun, weil sie nur aneinandergereihte Daten mit einem Minimum an Struktur sind.

Es sind doch Daten eines Strings, die ich selber dort hin packe.

Vernünftiger wäre es, den Server eine JSON-Datenstruktur zurückliefern zu lassen. In der könntest du dann auch leicht zusätzliche Informationen unterbringen (wie z.B. den Typ eines Feldes, zu dem die Daten gehören sollen), die dir in deinem String einfach fehlen.

MfG ChrisB

[1UnitedPower]

Hakuna matata!

Die Daten kommen in folgender Form daher:

wert||id||wert2||id2||wert3||id3||usw.

Arbeite dich nicht an einem eigenen Format ab, nimm dafür JSON, das könnte in deinem Fall etwa so aussehen:

[  
   {  
      id : "id1",  
      value : "wert1"  
   },  
   {  
      id : "id2",  
      value : false  
   }  
]

In PHP gibt es die Funktionen json_encode() und json_decode() mit denen du Objekte und Arrays in JSON-Strings umwandeln kannst. In JavaScript gibt es analaog die Funktionen JSON.stringify() und JSON.parse(). In jeder verbreiteten Programmiersprache wirst du etwas ähnliches finden. Das ist schonmal ein Argument für JSON.

Meine Idee wäre, die Id danach zu untersuchen, ob der String "checkbox" darin vorkommt (meine IDs sind so aufgebaut, daß entweder input oder checkbox in der ID vorkommt)

Siehst du, das ist ein weiterer Nachteil den dein handgestricktes Format mit sich bringt, du willst schon die ID zweckentfremden und für irgendetwas missbrauchen, wofür sie garnicht vorgesehen ist. Mit JSON könntest du den einzelnen Datensätzen einfach eine weitere Eigenschaft "type" verpassen. Auf mein Beispiel übertragen:

[  
   {  
      id : "id1",  
      value : "wert1",  
      type : "text"  
   },  
   {  
      id : "id2",  
      value : true,  
      type : "checkbox"  
   }  
]

Zum Schluss noch ein etwas vollständigeres Beispiel, das ich an deinen Quellcode angelehnt habe:

  
var einzeldata = JSON.parse( data );  
for ( var i = 0; i < einzeldata.length; i++ ) { // Die for-Schleife hat sich auch vereinfacht  
   if ( einzeldata.type === "text" ) {  
      $('#' + einzeldata.id ).val( einzeldata.value );  
   } elseif ( einzeldata.type === "checkbox" ) {  
      $('#' + einzeldata.id ).prop('checked', einzeldata.value );  
   }  
}

[Klaus]

Hallo,

erstmal danke für Deine sehr hilfreiche Antwort. (Bitte an einen Registrierten, ein Sternchen zu geben!)

Ich habs gerade geschafft, das komplette Script tadellos zum arbeiten zu bringen. Es funkt wirklich fantastisch.

Trotzdem scheint mir Deine Antwort so hilfreich zu sein, daß ich Deinen Tip (im Hinblick auf weitere spätere An- und Umbauten) integrieren möchte.

Schaff ich aber heute nicht mehr, deshalb die Bitte an Dich, den Thread mal im Auge zu behalten, weil ich sicher ein paar Nachfragen haben werde, wenn ich das einbaue.

Arbeite dich nicht an einem eigenen Format ab, nimm dafür JSON, das könnte in deinem Fall etwa so aussehen:

...

[

{
      id : "id1",
      value : "wert1",
      type : "text"
   },
   {
      id : "id2",
      value : true,
      type : "checkbox"
   }
]

  
  
Cool!  
  

>   
> Zum Schluss noch ein etwas vollständigeres Beispiel, das ich an deinen Quellcode angelehnt habe:  
>   
> ~~~javascript
  

> var einzeldata = JSON.parse( data );  
> for ( var i = 0; i < einzeldata.length; i++ ) { // Die for-Schleife hat sich auch vereinfacht  
>    if ( einzeldata.type === "text" ) {  
>       $('#' + einzeldata.id ).val( einzeldata.value );  
>    } elseif ( einzeldata.type === "checkbox" ) {  
>       $('#' + einzeldata.id ).prop('checked', einzeldata.value );  
>    }  
> }

Klasse!

Werde ich morgen gleich mal integrieren, wie gesagt, mach Dich ggf. trotzdem auf die ein- oder andere Rückfrage gefasst ;-)

Klaus

[1UnitedPower]

Hakuna matata!

Klasse!

Werde ich morgen gleich mal integrieren, wie gesagt, mach Dich ggf. trotzdem auf die ein- oder andere Rückfrage gefasst ;-)

Okay, müh dich aber nicht an der fehlerhaften Erstfassung ab, das hier sollte besser sein (immernoch ungetestet):

var einzeldata = JSON.parse( data );  
for ( var i = 0; i < einzeldata.length; i++ ) { // Die for-Schleife hat sich auch vereinfacht  
   var datenset = einzeldata[ i ]; // Um deine Denglisch Coding-Konvention einzuhalten  
   if ( datenset.type === "text" ) {  
      $('#' + datenset.id ).val( datenset.value );  
   } else if ( datenset.type === "checkbox" ) { // else if gehört getrennt in JS  
      $('#' + datenset.id ).prop('checked', datenset.value );  
   }  
}

[Klaus]

Hallo,

Werde ich morgen gleich mal integrieren, wie gesagt, mach Dich ggf. trotzdem auf die ein- oder andere Rückfrage gefasst ;-)

Schon ist es soweit.

Ich habe Deine Vorgehensweise an einer anderen Stelle im Script getestet, aber es will noch nicht so recht laufen.

Mein JSON String sieht wie folgt aus:

[{"Meldung":"Zeile 1 wurde freigeschaltet.","Version":"107"}]

Und im JS-Teil will ich ihn so parsen:

var einzeldata = JSON.parse(data);  
for ( var i = 0; i < einzeldata.length; i++ ) { // Die for-Schleife hat sich auch vereinfacht  
   var datenset = einzeldata[ i ]; // Um deine Denglisch Coding-Konvention einzuhalten  
   var data = datenset.Meldung;  
   var version = datenset.Version;  
}

Aber es läuft nicht.

Die JS-Fehlerkonsole meldet: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

Was läuft hier falsch?

Klaus

[1UnitedPower]

Hakuna matata!

Mein JSON String sieht wie folgt aus:

[{"Meldung":"Zeile 1 wurde freigeschaltet.","Version":"107"}]

Die JS-Fehlerkonsole meldet: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

Was läuft hier falsch?

Kann ich nicht beurteilen, mach mal ein console.dir( data ) bevor du die Daten in den JSON-Parser schickst.

[Klaus]

Hi,

Kann ich nicht beurteilen, mach mal ein console.dir( data ) bevor du die Daten in den JSON-Parser schickst.

Habe ich gemacht. Ich weiß nicht genau, wie ich das Ergebnis deuten soll, aber sowohl miene Meldung als auch meine Version scheinen angekommen zu sein. Es existiert ein Objekt mit den Eigenschaften 'Meldung' und 'Version' und beide haben die entsprechenden Werte.

Dann gibt es ein _proto_: Object mit Länge 1 und ein _proto_: Array[0] mit Länge 0.

Klaus

[1UnitedPower]

Hakuna matata!

Habe ich gemacht. Ich weiß nicht genau, wie ich das Ergebnis deuten soll, aber sowohl miene Meldung als auch meine Version scheinen angekommen zu sein. Es existiert ein Objekt mit den Eigenschaften 'Meldung' und 'Version' und beide haben die entsprechenden Werte.

Das heißt, dass data schon ein Objekt ist und du musst JSON.parse() gar nicht mehr aufrufen. Das hat wohl irgendeine gutmütige Schicht vorher schon für dich gemacht.

[Klaus]

Hi,

Das heißt, dass data schon ein Objekt ist und du musst JSON.parse() gar nicht mehr aufrufen. Das hat wohl irgendeine gutmütige Schicht vorher schon für dich gemacht.

Danke, das hat geholfen.

Wenn ich hier:

function (data) {

...
      }, 'json')

das ", json" entferne, dann darf ich JSON.parse() wieder aufrufen und alles klappt.

Klaus

[Klaus]

Hi,

ich versuche mich gerade daran, Deinen Tip in einem etwas komplizierteren Kontext umzusetzen, aber es klappt noch nicht so recht.

Wenn ich auf php-Seite per json_encode folgendes Array weitergeben möchte:

  
$data = array (  
array(  
$wert_a => $zielfeld1,  
$wert_b => $zielfeld2,  
$wert_c => $zielfeld3,  
$wert_d => $zielfeld4,  
$wert_e => $zielfeld5,  
$wert_f => $zielfeld6,  
$wert_g => $zielfeld7,  
$wert_h => $zielfeld8,  
$wert_i => $zielfeld9,  
)  
);  
echo json_encode($data);  

, wie gehe ich dann auf JS-Seite vor, um es zu "aufzudröseln"?

$wert_a bis $wert_i beeinhalten Float-Werte. $zielfeld1 bis $zielfeld9 sind die IDs, in die die Float-Werte geschrieben werden sollen.

Alles, was ich bisher versucht habe, hat nicht funktioniert. Die Daten (data) erreichen das JS als String, das habe ich über die Konsole überprüft.
Nach dem parsen liegt ein Objekt vor, auch das sagt die Konsole. Hier fällt mir auf, daß die Float-Werte nicht in Gänsefüßchen stehen. Die Zielfelder tun dies.

Ab hier weiß ich erstmal nicht weiter und frage um Hilfe nach.

Klaus

[Klaus]

Hi,

$data = array (
array(
$wert_a => $zielfeld1,
$wert_b => $zielfeld2,
$wert_c => $zielfeld3,
$wert_d => $zielfeld4,
$wert_e => $zielfeld5,
$wert_f => $zielfeld6,
$wert_g => $zielfeld7,
$wert_h => $zielfeld8,
$wert_i => $zielfeld9,
)
);
echo json_encode($data);

>   
  
  
Punkt1: Ich muß die Elementzuweisung drehen, weil die Zielfelder eindeutig sind, die Werte aber Duplikate sein können. Das überschreibt dann aber Arrayeinzträge.  
  

> , wie gehe ich dann auf JS-Seite vor, um es zu "aufzudröseln"?  
>   
  
  
Ich habs jetzt so gelöst:  
  
~~~javascript
  
var einzeldata = JSON.parse( data );  
// console.dir( einzeldata );  
for ( var i = 0; i < einzeldata.length; i++ ) {  
var key;  
for (key in einzeldata[i]) {  
	// alert (\"Key: \" + einzeldata[i][key] + \"  Wert: \" + key);  
     $('#' + key ).val( einzeldata[i][key] );  
}  
}  
  

Und so läufts.

Klaus

[Auge]

Hallo

Punkt1: Ich muß die Elementzuweisung drehen, weil die Zielfelder eindeutig sind, die Werte aber Duplikate sein können. Das überschreibt dann aber Arrayeinzträge.

Dass IDs als Arrayschlüssel geeignet sind, ist mir beim lesen deines Vorpostings auch durch den Kopf gegangen. Zumal, wie sich nun herausstellt, wenn die ursprünglich benutzten Schlüssel, nicht zwingend eindeutig sind.

Wobei sich mir bei der Lektüre selbigen Postings die Frage stellte, warum du Floats als Schlüssel nahmst. Das ist zumindest mir noch nicht begegnet. Die wurden im übrigen nicht in Anführungszeichen dargestellt, weil es halt Zahlen sind.

Ich habs jetzt so gelöst:

var einzeldata = JSON.parse( data );
// console.dir( einzeldata );
for ( var i = 0; i < einzeldata.length; i++ ) {
var key;
for (key in einzeldata[i]) {
// alert ("Key: " + einzeldata[i][key] + "  Wert: " + key);
     $('#' + key ).val( einzeldata[i][key] );
}
}

  
Nur mal als Tip. In der äußeren Schleife fragst du bei jedem Durchlauf `einzeldata.length`{:.language-javascript} ab. Wenn der Umfang der Daten dem entspricht, was du hier gezeigt hast, ist das kein Problem. bei größeren Arrays, also mehr Durchläufen der Schleife(n), lohnt sich stattdessen die Verwendung einer Variable. Die Zuweisung des Werts erfolgt dann nicht bei jedem Durchlauf erneut, sondern einmalig.  
  
~~~javascript
var j = einzeldata.length;  
for ( var i = 0; i < j; i++ )

Tschö, Auge

[Klaus]

Hallo Auge,

Nur mal als Tip. In der äußeren Schleife fragst du bei jedem Durchlauf einzeldata.length ab. Wenn der Umfang der Daten dem entspricht, was du hier gezeigt hast, ist das kein Problem. bei größeren Arrays, also mehr Durchläufen der Schleife(n), lohnt sich stattdessen die Verwendung einer Variable. Die Zuweisung des Werts erfolgt dann nicht bei jedem Durchlauf erneut, sondern einmalig.

var j = einzeldata.length;

for ( var i = 0; i < j; i++ )

>   
  
Danke für den Tip.  
'Werden nie mehr als 10 übergebene Daten sein, aber prinzipiell hast Du recht.  
  
Klaus  
  

[Klaus]

Hi,

var einzeldata = JSON.parse( data );

for ( var i = 0; i < einzeldata.length; i++ ) { // Die for-Schleife hat sich auch vereinfacht
   var datenset = einzeldata[ i ]; // Um deine Denglisch Coding-Konvention einzuhalten
   if ( datenset.type === "text" ) {
      $('#' + datenset.id ).val( datenset.value );
   } else if ( datenset.type === "checkbox" ) { // else if gehört getrennt in JS
      $('#' + datenset.id ).prop('checked', datenset.value );
   }
}

>   
  
Mit diesem (und einigen anderen) Codes bekomme ich mein Array nicht aufgelöst.  
  
Mein Array:  
  
~~~php
Array  
(  
    [0] => Array  
        (  
            [id] => k_1922_4343  
            [wert] => 56.00  
            [typ] => text  
        )  
  
    [1] => Array  
        (  
            [id] => gesamtk_1922_4343  
            [wert] => 224.00  
            [typ] => text  
        )  
);

Und als JSON:

  
[{"id":"k_1922_4343","wert":"56.00","typ":"text"},{"id":"gesamtk_1922_4343","wert":"224.00","typ":"text"}]

Mit diesem Code bekomme ich schon einige Angaben:

  
      console.dir( data );  
     // JSON Verarbeitung  
     var einzeldata = JSON.parse( data );  
     console.dir( einzeldata );  
     for ( var i = 0; i < einzeldata.length; i++ ) {  
     var key;  
     for (key in einzeldata[i]) {  
     alert ("Key: " + key + " Wert: " + einzeldata[i][key]);  
     ...  

Ich habe aber noch Probleme, wie ich z.b. den Wert 56.00 in die ID k_1922_4343 eingesetzt bekomme.

Klaus