Neues Mitglied - Auswahl Felder

[m.haase]

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

[m.haase]

Hallo,

ich habe dieses Javascript gefunden

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);
    });
});

wie kann ich das jetzt sauber einbinden und der Checkbox zuordnen ?

[Andreas]

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(){"

(function($) {
  $(document).ready(function() {

    // Code here

  });
})(jQuery); 

...der Checkbox zuordnen?

Ich verstehe zwar nicht, was dieses Script machen soll, aber es spricht nicht ein, sondern alle Checkboxen an.

[fiedsch]

Ich verstehe zwar nicht, was dieses Script machen soll, aber es spricht nicht ein, sondern alle Checkboxen an.

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"]'); ).

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?

[m.haase]

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 ?

[m.haase]

Hier mein 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>

Ich kann auch im Seitenlayout den Hacken für das Template setzen, aber sobald ich es aktivieren, bekomme ich folgenden Fehler:

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

[m.haase]

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(){"

(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.

Ich würde gerne, dass man die Möglichkeit hat in der Checkbox nur 2 Boxen anzuhacken.

[m.haase]

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

[m.haase]

Ich habe einen Code jetzt eien Code eingebunden, aber es passiert nichts.

Hier der Code:

http://dvag.gewaesser-experten.de/files/checkbox.js

[fiedsch]

Dein Code passt nicht zu den Gegebenheiten Deines Formulars:

<input name="xt_arbeitskre[]" id="opt_xt_arbeitskre_0" class="checkbox" value="AK Immobilien" type="checkbox">

verwendet die CSS-Klasse "checkbox", der Selektor im Javascript Code aber:

$('input.single-checkbox')

Damit gibst Du allen input.single-checkbox (=keinen auf Deiner Seite) den angegebenen Change-Eventhandler.

[m.haase]

Ich habe den Code jetzt abgeändert, leider aber ohne Erfolg.

[fiedsch]

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]

[m.haase]

Sorry hatte etwas ausprobiert. Habe den Code jetzt wieder so eingeführt. Leider aber ohne Erfolg.

Sorry bin nicht so tief im Thema drinne.

[m.haase]

Diesen Fehlercode bekomme ich in der FireFox Console:

SyntaxError: expected expression, got keyword 'var'[Weitere Informationen]

[fiedsch]

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:

(function($) {
  $(document).ready(function() 
    var limit = 3;
$('input.checkbox').on('change', function(evt) {
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
   }
});
})(jQuery);

willst aber das haben:

$(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;
        }
   });
});

(die fehlende öffnende Klammer hat den Fehler verursacht).

(ich war so frei, gleich noch ein paar console.log() einzustreuen ;-)

[m.haase]

Vielen Lieben Dank für deine Hilfe

ich habe den Code jetzt ausgetauscht. Nu leider funktioniert es immer noch mein einem Fehler:

SyntaxError: missing ; before statement[Weitere Informationen]

Hier zum testen (Habe die Daten auf einen neuen Serevr umgezogen): http://62.153.156.156/index.php/registrieren.html

Vielen lieben Dank

[fiedsch]

Waren zwei Tippfehler in meinem Code. Das

 console.log("change event fired ..."):

muss "natürlich" ein ; am Ende haben (und nicht einen Doppelpunkt

(fremden Code nicht einfach blind einbauen. Lesen, versuchen, zu verstehen und dann verwenden.)

[m.haase]

Das hatte ich auch schon versucht, leider auch ohne Erfolg

Jetzt kommt ein neuer Fehler :

TypeError: $(...).ready is not a function[Weitere Informationen]  checkbox.js:1:1
	<anonym>

Was sagt das genau ?

[fiedsch]

Das hatte ich auch schon versucht, leider auch ohne Erfolg

nein, denn

Jetzt kommt ein neuer Fehler :

TypeError: $(...).ready is not a function[Weitere Informationen]  checkbox.js:1:1
	<anonym>

wenn ein neuer Fehler kommt heißt das, Du hast den vorherigen Fehler beseitigt --bist also einen Schritt weiter!

Was sagt das genau ?

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.

[Andreas]

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.

[fiedsch]

Du hast jQuery eingebunden ...

Oh, danke. Hatte ich auf die Schnelle nicht gefunden.

[Andreas]

@fiedsch: Devtools - Debugger - die xxx.js aus assets/.

Hier mal ein Script, welches du benutzen kannst.

/* 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); 

Sorry, hatte oben ne geschwungene Klammer-Auf vergessen. Aber auf github hätte man das auch sehen können.

[m.haase]

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

[fiedsch]

Ein Wrapper ist ein Umschlag eine Hülle, etwas, das etwas anderes ummantelt. Im code also das

(function($) { 
  // ...
})(jQuery);

und wenn Du so willst noch mal das $(document).ready(function() { ... }

[fiedsch]

Vielleicht könntet Ihr mir auch mit meinem 2 Problem helfen ?

https://community.contao.org/de/show...sche-Zuordnung

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?

[Andreas]

Schön, dass es geklappt hat. Leider bekomme ich aus irgendeinem Grund keine Mails mehr, wenn jemand antwortet.