[gelöst] Checkbox values als body-Klasse
Eingetragen von stixer2 (113)am 21.12.2015 - 16:06 Uhr in
Hi.
Ich habe ein Problem mit jQuery… vielleicht kann mir jemand helfen.
Ich habe eine checkbox und möchte den jeweils aktiven value als body-Klasse ausgeben.
Ich habe das getestet in einer einfachen html-Seite, klappt wunderbar. Siehe hier:
<script type="text/javascript">
$(function () {
$('input[name="some"]').change(function () {
if ($('input:checked').length) {
var chkId = '';
$('input:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
$('body').addClass('radio-class-' + $(this).attr("value"));
}
else {
$('body').removeClass('radio-class-' + $(this).attr("value"));
}
});
});
</script>
<div>
<input type="checkbox" class="chkNumber" name="some" value="1" />One<br />
<input type="checkbox" class="chkNumber" name="some" value="2" />Two<br />
<input type="checkbox" class="chkNumber" name="some" value="3" />Three<br />
<input type="checkbox" class="chkNumber" name="some" value="4" />Four<br />
<input type="checkbox" class="chkNumber" name="some" value="5" />Five<br /><br />
</div>Jetzt wollte ich das analog in Drupal einbauen, mit folgenden Problemen:
* Es wird immer nur der erste Klick – also der Wert des zuerst angeklickten inputs – in die body-Klasse übernommen.
* Bei erneutem Klick wird die Klasse nicht gelöscht.
Kann das an Ajax liegen? Ist irgendwas nicht kompatibel mit Drupals jQuery-Syntax?
Hier noch das Script in Drupal:
<script>
(function ($) {
$(function () {
$('input[name="field_landkreis_e__tid[]"]').change(function () {
if ($('input:checked').length) {
var chkId = '';
$('input:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
$('body').addClass('kreis-' + $(this).attr("value"));
}
else {
$('body').removeClass('kreis-' + $(this).attr("value"));
}
});
});
})(jQuery);
</script>Ich wäre sehr dankbar für Hilfe!
- Anmelden oder Registrieren um Kommentare zu schreiben
Zitat:Kann das an Ajax
am 21.12.2015 - 16:58 Uhr
Kann das an Ajax liegen?
Ja - das liegt an Ajax! Du musst hier mit .on arbeiten (http://api.jquery.com/on/)
http://stackoverflow.com/questions/9344306/jquery-click-doesnt-work-on-a...
Oder alternativ (über einen Umweg) mit .ajaxSuccess() (http://api.jquery.com/ajaxsuccess/)
Also damit bekomme ich
am 21.12.2015 - 17:49 Uhr
Also damit bekomme ich dasselbe Ergebnis:
<script>
jQuery(document).ready(function($){
$('input[name="field_landkreis_e__tid[]"]').on('click', function() {
if ($('input:checked').length) {
var chkId = '';
$('input:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
$('body').addClass('kreis-' + $(this).attr("value"));
}
else {
$('body').removeClass('kreis-' + $(this).attr("value"));
}
});
});
</script>
Bin noch totaler Anfänger, kann mir wer genauer sagen, wie ich das schreiben muss?
Hallo, ich bin auch kein
am 21.12.2015 - 18:25 Uhr
Hallo,
ich bin auch kein jQuery-Geek und brauche auch immer ewiglang um das alles zum laufen zu bringen.
Probiere das doch erstmal ganz einfach mit Alert (und dann hangele dich durch). Verwende auch Firebug - dort kannst Du Dir unter "Konsole" eventuell auftretende Fehler anzeigen lassen.
<script>jQuery(document).ready(function($) {
$('input[name="field_landkreis_e__tid[]"]').on('click', function() {
alert('Test!');
});
});
</script>
Aus der Ferne kann ich dazu nichts weiter sagen da ich mir andernfalls jetzt extra ein View mit Checkboxen anlegen und selbst testen müsste. Dazu fehlt mir aber momentan die Zeit.
Probier es mal so. Gesetzt
am 22.12.2015 - 08:25 Uhr
Probier es mal so. Gesetzt der Code funktioniert auf einer Plain-HTML-Seite, sollte er so auch in Drupal funktionieren.
(function ($) {
$(document).ready(function() {
$('input[name="some"]').change(function () {
if ($('input:checked').length) {
var chkId = '';
$('input:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
$('body').addClass('radio-class-' + $(this).attr("value"));
}
else {
$('body').removeClass('radio-class-' + $(this).attr("value"));
}
});
})
})(jQuery);
Was Ajax angeht: Du aktualisiert in Drupal nicht irgendwie den Content per Ajax, also z. B. die Checkboxen? Nur dann, wäre das Thema (http://stackoverflow.com/questions/9344306/jquery-click-doesnt-work-on-a...) relevant. Im Normalfall nicht.
brauche auch immer
am 22.12.2015 - 09:35 Uhr
brauche auch immer ewiglang
Das kommt mir sehr bekannt vor… ;)
unter "Konsole" eventuell auftretende Fehler anzeigen
Guter Tipp, bislang hatte ich FireBug nur für CSS im Fokus.
Zitat: Probier es mal so. Das
am 22.12.2015 - 09:44 Uhr
Probier es mal so.
Das skript ist doch genau so, wie ich das zusammengebastelt hatte, oder? Im Prinzip funktioniert das, nur wird nur die erste Klasse übergeben – removeClass funktioniert aber auch nicht.
Du aktualisiert in Drupal nicht irgendwie den Content per Ajax, also z. B. die Checkboxen?
Doch, Ajax brauche ich auch, wegen dem schönen loader-icon… und weil die Filter direkt nach Eingabe übergeben werden. Ohne so ein icon, klicken die user mglw. wie wild und löschen unbeabsichtigt vorige Filter.
Aber auch ohne Ajax… bei Klick übergibt das script eine Klasse, dann lädt die Seite und die Klasse ist wieder verschwunden. Ohne Ajax kann ich auch nicht testen, ob überhaupt mehrere Klassen übergeben werden.
Ich habe schon event.preventDefault probiert, dann wird der zweite Klick aber gar nicht übergeben…
Zitat: $('input[name="field_l
am 22.12.2015 - 09:46 Uhr
$('input[name="field_landkreis_e__tid[]"]').on('click', function() {
Verstehe ich richtig, dass .on nur in dieser Zeile so stehen muss,
$('body').addClass('kreis-' + $(this).attr("value"));
kann so bleiben, oder muss das auch umgeschrieben werden?
Probiere das mal aus (mit
am 22.12.2015 - 12:41 Uhr
Probiere das mal aus (mit .ajaxSuccess)!
<script type='text/javascript'>
jQuery(document).ajaxSuccess(function() {
jQuery('input[name="field_landkreis_e__tid[]"]').on('click', function() {
if (jQuery('input:checked').length) {
var chkId = '';
jQuery('input:checked').each(function () {
chkId += jQuery(this).val() + ",";
});
chkId = chkId.slice(0, -1);
jQuery('body').addClass('kreis-' + jQuery(this).attr("value"));
}
else {
jQuery('body').removeClass('kreis-' + jQuery(this).attr("value"));
}
});
});
</script>
Wofür nutzt/definierst Du eigentlich "chkId"? Wenn Du "body" eine weitere Klasse hinzufügst (oder sie entfernst) verwendest Du "chkId" doch gar nicht? Oder sehe ich das falsch?
Teste das ansonsten mal mit "Alert" .... ob der Code in .ajaxSuccess funktioniert (nach dem Ajax-Call).
Stark! Jetzt werden zumindest
am 22.12.2015 - 13:20 Uhr
Stark! Jetzt werden zumindest schon mal die Klassen übernommen. Leider funzt removeClass noch nicht. Aber das ist doch schon mal ein Ansatz. Merci!
"chkId" brauche ich wohl tatsächlich nicht, ist ein Rest von dem Script, aus dem ich meins gebastelt habe. So funktioniert es genauso:
<script type='text/javascript'>jQuery(document).ajaxSuccess(function() {
jQuery('input[name="field_landkreis_e__tid[]"]').on('click', function() {
if (jQuery('input:checked').length) {
jQuery('input:checked').each(function () {
});
jQuery('body').addClass('kreis-' + jQuery(this).attr("value"));
}
else {
jQuery('body').removeClass('kreis-' + jQuery(this).attr("value"));
}
});
});
</script>
.removeClass könntest Du mit
am 22.12.2015 - 14:08 Uhr
.removeClass könntest Du mit .ajaxStart einbinden - sprich - eine bestehende Klasse wird beim Ajax-Start entfernt - bei .ajaxsucess bekommt body die neue Klasse hinzugefügt.
<script type='text/javascript'>jQuery(document).ajaxStart(function() {
//hier musst Du Deinen remove-Code einfügen
});
</script>
Da musst Du vorher noch irgendwie abragen ob schon eine Klasse existiert!
Edit:
Mit folgendem Code kannst Du ALLE vorhanden Klassen entfernen (ohne dass Du prüfen musst ob schon welche vorhanden sind).
<script type='text/javascript'>jQuery(document).ajaxStart(function() {
jQuery( 'body' ).removeClass();
});
</script>
Bitte mal testen!
Ich habe nochmal ein bisschen
am 23.12.2015 - 12:12 Uhr
Ich habe nochmal ein bisschen geforscht, und mit dem script funktioniert das mit Ajax ohne ajaxSucces o.ä.
Bei der letzten Variante hat der auch nie den ersten Klick übernommen, das funzt jetzt.
Nur das removeClass läuft noch nicht.
(function($) {Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
$('input[name="field_landkreis_e__tid[]"]').change(function () {
if ($('input:checked')) {
$('input:checked').each(function () {
});
$('body').addClass('kreis-' + $(this).attr("value"));
}
else {
$('body').removeClass('kreis-' + $(this).attr("value"));
}
});
}
};
})(jQuery);
Vielleicht könnte man das auch ganz anders machen: prüfen, ob die Checkbox aktiv ist, und dann automatisch die Klasse geben, also ohne .click oder .change.
Das hätte den Vorteil, falls eine aktive checkbox im cache aktiv ist, dann ebenfalls berücksichtigt wird?
LG!
Nochmal vereinfacht,
am 23.12.2015 - 12:59 Uhr
Nochmal vereinfacht, removeClass funktioniert, allerdings nicht immer, seltsam:
(function($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
//start
$('input[name="field_landkreis_e__tid[]"]').on('change', function () {
check = $('input[name="field_landkreis_e__tid[]"]').is(':checked');
if(check) {
$('body').addClass('kreis-' + $(this).attr("value"));
} else {
$('body').removeClass('kreis-' + $(this).attr("value"));
}
});
// end
}
};
})(jQuery);
Ich glaube, ich muss das neu denken, und lieber abfragen, ob die chekcbox aktiv ist oder nicht. Mit dem .click wird ja ignoriert, ob schon was aktiv…
LG!
sollte mit toggle function
am 24.12.2015 - 06:36 Uhr
sollte mit toggle function von jquery gehen
Mit toggle habe ich es nicht
am 24.12.2015 - 10:02 Uhr
Mit toggle habe ich es nicht hinbekommen, damit wird irgendwie immer nur eine Klasse geladen, das ist aber eine Multi-Checkbox.
Allerdings hiermit funzt es jetzt (wie es geschrumpft ist ;):
(function($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
//start
$('input[name="field_landkreis_e__tid[]"]').on('change', function () {
if(this.checked)
$('body').addClass('kreis-' + $(this).attr("value"));
else
$('body').removeClass('kreis-' + $(this).attr("value"));
});
// end
}
};
})(jQuery);
Mein einziges Problem ist jetzt nur noch, dass ich eine Abfrage bräuchte, ob eine Box aktiv ist… durch den cache bei einem user z.B.
aber die Basis steht erst mal.
Ohne Ajax funktioniert es
am 11.01.2016 - 21:09 Uhr
Ohne Ajax funktioniert es jetzt so:
$(document).ready(function() {$('input[name="field_landkreis_e__tid[]"][checked]').each(function() {
$('body').addClass('kreis-' + $(this).attr("value"));
});
$('input[name="field_landkreis_e__tid[]"]').on('change', function () {
if(this.checked)
$('body').addClass('kreis-' + $(this).attr("value"));
else
$('body').removeClass('kreis-' + $(this).attr("value"));
});
});