Druckbare Version
Hallo zusammen,
ich brauche mal erue Hilfe. Wenn ein neues Mitglied sich registriert, soll die Mögluchkeit haben, sich aus einer Checkbox maximal 3 Themen raus zu suchen. Wie kann ich das machen ?
Hier die Auswahllite mit einesm Link: Weiteres Reginalforum
Über jede Hilfe bin cih dankbar.
Viele Grüße
M.Haase
Hallo,
ich habe dieses Javascript gefunden
wie kann ich das jetzt sauber einbinden und der Checkbox zuordnen ?HTML-Code:jQuery(function(){
var max = 3;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
Oh man, da gibt es so viele Möglichkeiten. Hier mal eine. Erstelle ein j_Template, welches du dann im Layout einbinden kannst. Hier mal eins von Contao. https://github.com/contao/core/blob/...ablesort.html5
Übernehme aber den Wrapper so wie Contao das macht, anstelle deines "jQuery(function(){"
PHP-Code:(function($) {
$(document).ready(function() {
// Code here
});
})(jQuery);
Ich verstehe zwar nicht, was dieses Script machen soll, aber es spricht nicht ein, sondern alle Checkboxen an.Zitat:
Zitat von m.haase
Es muss zwar "alle zum Registrierungsformular gehörigen Felder" ansprechen, aber es spricht wie Andreas sagt "alle" auf der Seite befindlichen Checkboxen an. Das mögen im vorliegenden Fall zufällig passen, weil es keine anderen gibt, aber sauberer ist es, das hin zu schreiben, was man haben will. Ich würde beim jQuery-Selector var checkboxes = $('input[type="checkbox"]'); spezifischer werden (z.B. var checkboxes = $('#meinformular input[type="checkbox"]'); ).Zitat:
Zitat von Andreas
Was das Skript macht: es legt fest, daß max = 3 Checkboxen selektiert werden dürfen. Bei jedem Checkbox-Klick (checkboxes.change(...)) werden dann alle anderen auf disabled gesetzt (falls die Anzahl der aktuell "gecheckten" >= 3 ist) damit der User sie nicht mehr auswählen kann. Ich finde das aber aus User-Sciht nicht befriedigend. Ich wähle einige Themen aus und "plötzlich" sind die anderen nicht mehr wählbar. Warum?
OK ich habe jetzt es schon geschafft, dass ich die j_template datei im Seitenlayout sehe, aber irgend etwas mache ich in der J_Template Datei falsch ..
Wie sollte er denn genau aussehen ?
Hier mein Code
Ich kann auch im Seitenlayout den Hacken für das Template setzen, aber sobald ich es aktivieren, bekomme ich folgenden Fehler:HTML-Code:
<script>
(function($) {
$(document).ready(function()
var max = 3;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
})(jQuery);
</script>
Fatal error: Uncaught exception Exception with message Could not find template "j_checkbox" thrown in system/modules/core/library/Contao/TemplateLoader.php on line 123
Ich würde gerne, dass man die Möglichkeit hat in der Checkbox nur 2 Boxen anzuhacken.Zitat:
Zitat von Andreas
Ich komme hier leider nicht weiter,
wäre es möglich, mir eine kleine ANleitung an die Hand zu geben?
Egal was ich versuche es klappt einfach nicht. Selbst wenn ich den Code als extern javascript Datei einbinde.
Es will einfach nciht funktionieren.
Viele Grüße
Marco
Ich habe einen Code jetzt eien Code eingebunden, aber es passiert nichts.
Hier der Code:
http://dvag.gewaesser-experten.de/files/checkbox.js
Dein Code passt nicht zu den Gegebenheiten Deines Formulars:
verwendet die CSS-Klasse "checkbox", der Selektor im Javascript Code aber:Code:<input name="xt_arbeitskre[]" id="opt_xt_arbeitskre_0" class="checkbox" value="AK Immobilien" type="checkbox">
Damit gibst Du allen input.single-checkbox (=keinen auf Deiner Seite) den angegebenen Change-Eventhandler.Code:$('input.single-checkbox')
Ich habe den Code jetzt abgeändert, leider aber ohne Erfolg.
Zwei Punkte:
- Wieso hast Du eigentlich das $(document).ready(function() { ... }) entfernt, das Du vorher noch hattest?
- mit einem eingestreuten console.log("irgend ein Text, der Dir sagt, daß Du hierher gekommen bsit"); siehst Du etwas genauer, ob Deine Funktionen, Filter, ... auch greifen. …[console.log() Output in den Devtools anschauen]
Sorry hatte etwas ausprobiert. Habe den Code jetzt wieder so eingeführt. Leider aber ohne Erfolg.
Sorry bin nicht so tief im Thema drinne.
Diesen Fehlercode bekomme ich in der FireFox Console:
HTML-Code:SyntaxError: expected expression, got keyword 'var'[Weitere Informationen]
und wenn Du im Log ganz rechts schaust, sagt er Dir auch, daß der Fehler in Zeile 3 der checkbox.js liegt:
Du hast das:
willst aber das haben:Code:(function($) {
$(document).ready(function()
var limit = 3;
$('input.checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
})(jQuery);
(die fehlende öffnende Klammer hat den Fehler verursacht).Code:$(document).ready(function() {
var limit = 3;
console.log("document ready ..."):
$('input.checkbox').on('change', function(evt) {
console.log("change event fired ..."):
if($(this).siblings(':checked').length >= limit) {
console.log("mehr als 'limit' ausgewählt ..."):
this.checked = false;
}
});
});
(ich war so frei, gleich noch ein paar console.log() einzustreuen ;-)
Vielen Lieben Dank für deine Hilfe :)
ich habe den Code jetzt ausgetauscht. Nu leider funktioniert es immer noch mein einem Fehler:
Hier zum testen (Habe die Daten auf einen neuen Serevr umgezogen): http://62.153.156.156/index.php/registrieren.htmlHTML-Code:SyntaxError: missing ; before statement[Weitere Informationen]
Vielen lieben Dank
Waren zwei Tippfehler in meinem Code. Das
muss "natürlich" ein ; am Ende haben (und nicht einen Doppelpunkt :)Code:console.log("change event fired ..."):
(fremden Code nicht einfach blind einbauen. Lesen, versuchen, zu verstehen und dann verwenden.)
Das hatte ich auch schon versucht, leider auch ohne Erfolg :)
Jetzt kommt ein neuer Fehler :
Was sagt das genau ?HTML-Code:TypeError: $(...).ready is not a function[Weitere Informationen] checkbox.js:1:1
<anonym>
nein, dennZitat:
Zitat von m.haase
wenn ein neuer Fehler kommt heißt das, Du hast den vorherigen Fehler beseitigt --bist also einen Schritt weiter!Zitat:
Jetzt kommt ein neuer Fehler :
HTML-Code:TypeError: $(...).ready is not a function[Weitere Informationen] checkbox.js:1:1
<anonym>
das sagt genau das, was da steht: daß Javascript die ready() Funktion nicht kennt. Warum? Weil Du eine Funktion von jQuery verwendest (ready() nämlich), jQuery selbst aber nicht eingebunden hast. Das mus als Grundlage vor checkbox.js eingebunden werden, damit dieses die jQuery-Funktionen verwenden kann.Zitat:
Was sagt das genau ?
Du hast jQuery eingebunden, aber du musst deine Scripte genauso wrappen, wie ich das oben gezeigt habe. Besonders in Anbetracht der Tatsache, dass du zusätzlich MooTools eingebunden hast. Auch die MooTools-Scripts müssen gewrappt werden, so wie Contao das auch macht.
Benötigst du beide Bibliotheken? Besser (performanter) ist es, nur eine zu benutzen.
Oh, danke. Hatte ich auf die Schnelle nicht gefunden.Zitat:
Zitat von Andreas
@fiedsch: Devtools - Debugger - die xxx.js aus assets/.
Hier mal ein Script, welches du benutzen kannst.
Sorry, hatte oben ne geschwungene Klammer-Auf vergessen. Aber auf github hätte man das auch sehen können.PHP-Code:/* JS (jQuery) */
(function($) {
$(document).ready(function() {
var
max = 2,
fieldsetID = '#ctrl_22',
checkboxes = $(fieldsetID + ' .checkbox'),
cbsChecked = $(fieldsetID + ' .checkbox:checked')
;
// Sollte die Seite (warum auch immer) mit mehr als max checked boxes geladen werden.
if(cbsChecked.length > max) {
alert('Sorry, only ' + max + ' selections allowed! We reduce your selection so it will fit the limit!');
for(i = 0; i < cbsChecked.length - max; i++) {
cbsChecked.eq(i).prop('checked', false);
}
}
// Wenn eine checkbox geändert wird.
checkboxes.change(function() {
if($(fieldsetID + ' .checkbox:checked').length > max) {
$(this).prop('checked', false);
alert('Sorry, only ' + max + ' selections allowed!');
}
});
});
})(jQuery);
Vielen Dank erstmal für eure Zahlreiche unterstützung. Leider bi nich nicht in dem Thema so tief drinne.
Was genau ist ein Wrapper ?
Jetz funktioniert es Super :) 1000 Dank.
Vielleicht könntet Ihr mir auch mit meinem 2 Problem helfen ?
https://community.contao.org/de/show...sche-Zuordnung
100000 Dank
Ein Wrapper ist ein Umschlag eine Hülle, etwas, das etwas anderes ummantelt. Im code also das
und wenn Du so willst noch mal das $(document).ready(function() { ... }Code:(function($) {
// ...
})(jQuery);
Ein Lösungsansatz wurde Dir doch bereits in https://community.contao.org/de/show...l=1#post439630 gezeigt. Hast Du das schon mal ausprobiert? Was ist dabei rausgekommen?Zitat:
Zitat von m.haase
Schön, dass es geklappt hat. Leider bekomme ich aus irgendeinem Grund keine Mails mehr, wenn jemand antwortet.