Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Bootstrap flat-ui checkbox check checked???

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Bootstrap flat-ui checkbox check checked???
    am: 04. Dezember 2015, 13:15:54
    Es geht um diese Checkboxen:
    http://subscribe.sojo.net/components.html#fui-checkbox

    Wenn ich diese Checkbox, die standardmäßig nicht ausgewählt ist anklicke:
    Code: XML  [Auswählen]
    <label class="checkbox mbn checked" for="inc_subtitle">
    <span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input name="inc_products_descriptions_only" value="0" data-toggle="checkbox" type="checkbox">Nur im Beschreibungstext suchen
    </label>

    Liefert mir dieses JQuery:
    Code: Javascript  [Auswählen]
    $( document ).ready(function() {
            $('input[name="inc_products_descriptions_only"]').on('toggle', function(){
                   
                    if($('input[name="inc_products_descriptions_only"]').prop('checked')) {
                            alert('checked');      
                    } else {
                           
                            alert('unchecked')
                    };
            });
    });
     

    Beim ersten klick den richtigen Status. Also "checked".
    Beim Zweiten Klick kommt auch richtigerweise "unchecked".
    ..... ab dann kommt immer "unchecked", egal wie oft ich da drauf klicke?!?

    Bug?

    Ich habe auch schon die Klasse checked vom zugehörigen Label abgefragt, aber die scheint sich erst nach dem event trigger zu ändern ...

    Ein onchange(function()) in der checkbox funktioniert auch nicht wirklich, ich vermute, erst kommt das transition event und dann wird der Status geändert.

    Linkback: https://www.modified-shop.org/forum/index.php?topic=34006.0

    web0null

    • Experte
    • Beiträge: 1.998
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #1 am: 04. Dezember 2015, 14:15:22
    Teste mal
    Code: Javascript  [Auswählen]
    $(document).ready(function() {
      $('input[name="inc_products_descriptions_only"]').on('change', function(){
        alert($(this).is(':checked'));
      });
    });
     
    oder,
    Code: Javascript  [Auswählen]
    $( document ).ready(function() {
      $('label.checkbox.mbn').on('change', function(){
        alert($('input', this).is(':checked'));
      });
    });
     
    oder,
    Code: Javascript  [Auswählen]
    $( document ).ready(function() {
      $('label.checkbox.mbn').on('change', function(){
        var _this = this;
        setTimeout(function() {
          alert($('input', _this).is(':checked'));
        }, 1); // 1 millisekunde
      });
    });
     

    Beim letzten kannst du das Timeout einstellen, dass man dem Plugin mal die Zeit lässt bis es getriggert hat.
    Das setTimeout() kann man natürlich bei dem 1. auch machen.

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #2 am: 04. Dezember 2015, 14:38:18
    Bei ersten Klick true (richtig)
    Beim zweiten klick false (richtig)
    jeder weitere Klick: false

    Weitere Variante mit nochmal anderem Verhalten:
    Code: Javascript  [Auswählen]
    $(document).ready(function() {
      $('input[name="inc_products_descriptions_only"]').on('change', function(){
              alert($(this).attr('checked'));
      });
    });
     

    Erster Klick: checked
    Zweiter Klick: undefined
    Dritter Klick: checked
    Alle weiteren: checked

    ..... immerhin ein Klick mehr, der funktioniert  :flee:

    Ich denke gerade darüber nach aus den beiden Varianten ein funktionierendes Konstrukt zu bauen ...

    web0null

    • Experte
    • Beiträge: 1.998
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #3 am: 04. Dezember 2015, 15:00:22
    Versuch mal die 3. Variante.

    Nebenbei... um Checkboxen grafisch anzupassen, braucht man eigentlich kein Plugin bzw. Javascript, das ginge auch rein mit CSS, Google hilft.

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #4 am: 04. Dezember 2015, 15:14:31
    Ich habe ein Template gekauft und bin am Umbauen. Das setzt auf Bootstrap und Flat-UI auf. Also muss ich leider für eigene Checkboxen auch diese Flat-ui boxen nehmen, weil das sonst inkonsistent aussieht.

    Ich glaube ich habe das Problem gefunden:
    https://github.com/designmodo/Flat-UI-Pro-Support/issues/67

    web0null

    • Experte
    • Beiträge: 1.998
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #5 am: 04. Dezember 2015, 15:22:34
    Das Problem bei Verwendung solcher Plugins ist meistens, einfach nur die "zu frühe Abfrage" des Zustandes.
    Das Plugin muss ja selber mal seinen Event anwenden, und erst nachher darfst du den Zustand abfragen.
    Deswegen einfach mit einer kleinen Verzögerung abfragen, das geht immer, teste einfach verschiedene Verzögerungen.

    Gruß

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #6 am: 04. Dezember 2015, 16:10:21
    In dem Fall nicht ....

    Hier wird eindeutig richtig die property gesetzt:
    Code: Javascript  [Auswählen]
      , setState: function () {    
          var $el = this.$element
            , $parent = $el.closest('.checkbox');
           
            $el.prop('disabled') && $parent.addClass('disabled');  
            $el.prop('checked') && $parent.addClass('checked');
        }  
     

    Aber weiter unten wird mit dem Attribut gespielt, anstatt die property zu verwenden ....
    Code: Javascript  [Auswählen]
      , toggle: function () {    
          var ch = 'checked'
            , $el = this.$element
            , $parent = $el.closest('.checkbox')
            , checked = $el.prop(ch)
            , e = $.Event('toggle')
         
          if ($el.prop('disabled') == false) {
            $parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.attr(ch, true);
            $el.trigger(e).trigger('change');
          }
        }  
       
      , setCheck: function (option) {    
          var d = 'disabled'
            , ch = 'checked'
            , $el = this.$element
            , $parent = $el.closest('.checkbox')
            , checkAction = option == 'check' ? true : false
            , e = $.Event(option)
         
          $parent[checkAction ? 'addClass' : 'removeClass' ](ch) && checkAction ? $el.attr(ch, true) : $el.removeAttr(ch);
          $el.trigger(e).trigger('change');      
        }  
     

    Und da das scheinbar noch mehr Probleme aufwirft als mein jetzt bekanntes
    Radio/checkbox data isn't sent on submit

    Muss ich die Funktion aus dem minified code rauswursteln und gefixt wieder einsetzen ....  :-!

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Bootstrap flat-ui checkbox check checked???
    Antwort #7 am: 04. Dezember 2015, 18:10:37
    So, für alle die das Problem auch haben:

    Gefixte Version von flatui-checkbox.js v0.0.2:
    Code: Javascript  [Auswählen]
    /* =============================================================
     * flatui-checkbox.js v0.0.2
     * ============================================================ */

     
    !function ($) {

     /* CHECKBOX PUBLIC CLASS DEFINITION
      * ============================== */


      var Checkbox = function (element, options) {
        this.init(element, options);
      }

      Checkbox.prototype = {
       
        constructor: Checkbox
       
      , init: function (element, options) {      
        var $el = this.$element = $(element)
       
        this.options = $.extend({}, $.fn.checkbox.defaults, options);      
        $el.before(this.options.template);    
        this.setState();
      }  
       
      , setState: function () {    
          var $el = this.$element
            , $parent = $el.closest('.checkbox');
           
            $el.prop('disabled') && $parent.addClass('disabled');  
            $el.prop('checked') && $parent.addClass('checked');
        }  
       
      , toggle: function () {    
          var ch = 'checked'
            , $el = this.$element
            , $parent = $el.closest('.checkbox')
            , checked = $el.prop(ch)
            , e = $.Event('toggle')
         
          if ($el.prop('disabled') == false) {
            $parent.toggleClass(ch) && checked ? $el.prop(ch, false) : $el.prop(ch, true);
            $el.trigger(e).trigger('change');
          }
        }  
       
      , setCheck: function (option) {    
          var d = 'disabled'
            , ch = 'checked'
            , $el = this.$element
            , $parent = $el.closest('.checkbox')
            , checkAction = option == 'check' ? true : false
            , e = $.Event(option)
         
          $parent[checkAction ? 'addClass' : 'removeClass' ](ch) && checkAction ? $el.prop(ch, true) : $el.prop(ch, false);
          $el.trigger(e).trigger('change');      
        }  
         
      }


     /* CHECKBOX PLUGIN DEFINITION
      * ======================== */


      var old = $.fn.checkbox

      $.fn.checkbox = function (option) {
        return this.each(function () {
          var $this = $(this)
            , data = $this.data('checkbox')
            , options = $.extend({}, $.fn.checkbox.defaults, $this.data(), typeof option == 'object' && option);
          if (!data) $this.data('checkbox', (data = new Checkbox(this, options)));
          if (option == 'toggle') data.toggle()
          if (option == 'check' || option == 'uncheck') data.setCheck(option)
          else if (option) data.setState();
        });
      }
     
      $.fn.checkbox.defaults = {
        template: '<span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span>'
      }


     /* CHECKBOX NO CONFLICT
      * ================== */


      $.fn.checkbox.noConflict = function () {
        $.fn.checkbox = old;
        return this;
      }


     /* CHECKBOX DATA-API
      * =============== */


      $(document).on('click.checkbox.data-api', '[data-toggle^=checkbox], .checkbox', function (e) {
        var $checkbox = $(e.target);
        e && e.preventDefault() && e.stopPropagation();
        if (!$checkbox.hasClass('checkbox')) $checkbox = $checkbox.closest('.checkbox');
        $checkbox.find(':checkbox').checkbox('toggle');
      });
     
      $(function () {
        $('[data-toggle="checkbox"]').each(function () {
          var $checkbox = $(this);
          $checkbox.checkbox();
        });
      });

    }(window.jQuery);

    Das Original hatte beim Umschalten der Checkbox am Attribut checked rumgespielt, das eigentlich nur für den DEFAULT Wert zuständig ist. Der aktuelle wirkliche Wert der Checkbox ist in der Property gespeichert.

    Jetzt funktioniert auch der code problemlos die checkbox auszulesen mit:
    Code: Javascript  [Auswählen]
    $(document).ready(function() {
      $('input[name="inc_products_descriptions_only"]').on('change', function(){
        alert($(this).is(':checked'));
      });
    });
       

    Laut diversen Posts hat dieser Mist auch Einfluss auf die Werte die an Formulare abgegeben werden! Auch Radiobuttons sollen das gleiche Problem haben, was ich allerdings noch nicht ausprobiert habe.
    Wenn der Kunde eine angeklickte Box sieht und es wird nicht checked übergeben, kann das kritisch werden! Vor allem wenn der Kunde den Fehler reproduzieren kann!

    Also wenn ihr ein Template einsetzt, das FLAT-UI einsetzt, prüft das und fixt das Problem, bevor es Abmahnungen hagelt!

    Wer wie ich den Code nur minified vorliegen hatte, dem wird hier geholfen:
    http://unminify.com/
    Werbung / Banner buchen
    4 Antworten
    1798 Aufrufe
    12. November 2010, 15:38:35 von Renegade
    4 Antworten
    1356 Aufrufe
    23. Januar 2019, 12:45:25 von Shorty
    3 Antworten
    3466 Aufrufe
    05. Oktober 2010, 20:49:45 von Tomcraft
    20 Antworten
    11597 Aufrufe
    29. Juli 2013, 18:42:27 von Jan-Lukas