Matthias Apsel: Firefox 20 rendert die Häkchen nur nach STRG+F5

Om nah hoo pez nyeetz, alle!

Auf Anregung eines Forumsteilnehmers bin ich dabei, die Tag-Element-Seite zu überarbeiten. Es ist noch nicht fertig und ich weiß auch noch nicht, ob ich die Änderungen so überhaupt haben möchte:

Es gibt Checkboxen, die bei aktiviertem JS mit JQuery auf 'checked' gesetzt werden. Wenn dann eine Checkbox "entchecked" wird und die Seite mit F5 neu geladen wird, wird auch brav das JS ausgeführt, also entsprechende Klassen gesetzt und eben auch die Checkbox wieder "gechecked", aber das Häkchen wird nicht gerendert. In den anderen Browsern passiert dies nicht.

Kann man da was tun?

http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut-neu.html

FF20.0.1 Win7

Matthias

--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Tür und Türkei.

  1. Om nah hoo pez nyeetz, Matthias Apsel!

    FF20.0.1 Win7

    Ergänzung: auch mit FF21.0 und mit deaktivierten Addons keine Veränderung

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Ventil und Ventilator.

    1. ola Matthias,

      ich finde die Idee schon gut umgesetzt und freue mich sehr darüber! Ich kann bei all meinen Browsern nichts dergleichen feststellen. Aber du kannst es mal bei jedem direkt mit <input type='checkbox' checked> probieren, ohne es mit Javascript zu machen. Eventuell funktioniert es dann mit STRG + F5 auch optimal.

      Anbei: Ich verwende auch den FX 21.0 und konnte nichts in dieser Richtung feststellen.

      mfg,
      Rolfi

      1. Om nah hoo pez nyeetz, Rolfi!

        ich finde die Idee schon gut umgesetzt

        Wenn das Attibut abgewählt wird, dürfen auch Attributname und -wert nicht hervorgehoben sein. Ähnliches gilt für Element.

        Aber du kannst es mal bei jedem direkt mit <input type='checkbox' checked> probieren, ohne es mit Javascript zu machen.

        Das war die Ausgangslage. Dabei ist mir das eigentümliche Verhalten des FF erst aufgefallen.

        Eventuell funktioniert es dann mit STRG + F5 auch optimal.

        Mit [STRG-F5] gibt es keine Probleme, nur bei [F5]
        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Zug und Zugang.

  2. مرحبا

    Kann man da was tun?
    http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut-neu.html

    Du musst den Zustand, ob gechecked oder nicht, irgendwo speichern. Cookies würden sich hier anbieten.

    mfg
    --

    1. Om nah hoo pez nyeetz, Malcolm Beck´s!

      Du musst den Zustand, ob gechecked oder nicht, irgendwo speichern. Cookies würden sich hier anbieten.

      Darum geht es nicht, Es geht darum, _alle_ Checkboxen beim Aufruf der Seite zu "checken" unabhängig von ihrem Zustand. Das JavaScript setzt zwar korrekt alle Attribute, beim FF wird jedoch das Häkchen nicht gerendert. Molilys Hinweis ist zielführend.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Komma und Kommandeur.

      1. مرحبا

        Darum geht es nicht, Es geht darum, _alle_ Checkboxen beim Aufruf der Seite zu "checken" unabhängig von ihrem Zustand.

        Ok. Ich konnte es nicht nachvollziehen, da FF21 alles korrekt gechecked hatte. Daher nahm ich an, du willst den gewählten Zustand nach einem Reload beibehalten.

        Molilys Hinweis ist zielführend.

        Wann ist es das nicht?  ;)

        mfg
        --

  3. Tach!

    Kann man da was tun?

    In jedes input autocomplete="off" einfügen.

    dedlfix.

    1. Om nah hoo pez nyeetz, dedlfix!

      In jedes input autocomplete="off" einfügen.

      Ja. Das hilft auch.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kart und Kartoffelsalat.

  4. Hallo,

    Kann man da was tun?

    jQuery richtig verwenden.

    Vorher:

    $('input').each(function(){  
      $(this).attr('checked','checked');  
    })
    

    Nachher:

    $('input').[link:http://api.jquery.com/prop/@title=prop]('checked', true);

    Noch eine Optimierung:

    var thisClassName = $(this).parent().attr('class');  
    (table.hasClass(thisClassName)) ? table.removeClass(thisClassName) : table.addClass(thisClassName);
    

    Suchst du vielleicht toggleClass?

    Mathias

    1. Om nah hoo pez nyeetz, molily!

      $('input').[link:http://api.jquery.com/prop/@title=prop]('checked', true);

      Danke, die Existenz von .prop war mir nicht bewusst. Bleiben zwei Fragen:

      * Warum nur im Firefox?
       * Warum geht es nach [STRG-F5], nicht aber nach [F5], obwohl in beiden Fällen das JS ausgeführt wird?

      Suchst du vielleicht toggleClass?

      Ja, natürlich.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lachs und Lachsack.

      1. Tach,

        * Warum geht es nach [STRG-F5], nicht aber nach [F5], obwohl in beiden Fällen das JS ausgeführt wird?

        wie dedlfix schon andeutete, ist das das Autocomplete in Firefox, das sich Formulareingaben auch über einen einfachen Reload der Seite merkt.

        mfg
        Woodfighter

        1. Om nah hoo pez nyeetz, Jens Holzkämper!

          wie dedlfix schon andeutete, ist das das Autocomplete in Firefox, das sich Formulareingaben auch über einen einfachen Reload der Seite merkt.

          Das beantwortet ja gleich beide Fragen ;-)

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Horn und Hornisse.

      2. Danke, die Existenz von .prop war mir nicht bewusst.

        Der verzwickte Unterschied zwischen Properties und Attributes bei Elementen hält die Welt seit 10 Jahren in Atem. ;) Zumeist macht es keinen Unterschied, ob attr (intern getAttribute/setAttribute/removeAttribute) oder prop (intern element.property und element.property = value) verwendet wird. Bei booleschen Elementeigenschaften wie checked, disabled, readOnly, required usw. sowie weiteren Nicht-String-Eigenschaften aus dem HTML-DOM sollte auf jeden Fall prop zum Lesen und Schreiben verwendet werden.

        * Warum nur im Firefox?

        Der Autocomplete interferiert hier vermutlich mit Setzen der Attribute. Der Autocomplete setzt wahrscheinlich .checked = false (nur halt in C++) und du setzt .setAttribute('checked', 'checked').

        checked-Attribute und -Property sind entkoppelt, wenn die Property einmal gesetzt wurde. jQuery hat sich leider lange nicht um den Unterschied zwischen Properties und Attributes gekümmert, weder bei attr() noch in Sizzle. Früher gab es prop gar nicht, sondern attr hatte eine gewisse Heuristik, die entweder Attributes oder Properties setzte. Heute muss man selber wissen, wie man klug attr und prop verwendet. (Es gibt immer noch einige Magie in attr.)

        Inkonsistent wird es letztlich nur, weil du den aktuellen Status bei change nicht abfragst. Ich würde .toggleClass(el.prop('checked')) anstatt nur toggleClass verwenden. Dann funktioniert der Autocomplete korrekt (warum ihn abschalten?).

        Mathias

        1. Om nah hoo pez nyeetz, molily!

          Danke für die ausführliche Antwort.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Eis und Eisenbahn.