Announcement

Collapse
No announcement yet.

Ready Theme errors. Customer Fields script OCST, ACAD, ACED

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Ready Theme errors. Customer Fields script OCST, ACAD, ACED

    I'm currently working with Iron and Wool, but this affects other themes as well.

    In the template for Customer Fields, the id attribute for the input fields has been changed so that the field name attribute is no longer the same as the id attribute.

    While mostly just annoying, there are some cases where it fails. For example:

    Code:
    <label class="required" for="l-Customer_ShipStateSelect">State/Province:</label>
    <mvt:item name="states" param="Customer_ShipStateSelect" /> <!-- output id attribute does not match -->
    
    <label class="required" for="l-Customer_ShipCountry">Country:</label>
    <mvt:item name="countries" param="Customer_ShipCountry" />  <!-- output id attribute does not match -->
    For me this means I have to make my scripting more complicated because some id start with l- and some do not.

    Just for my information, what is reason for the field id and the field name to no longer match?
    Last edited by RayYates; 07-05-16, 08:38 AM.
    Ray Yates
    "If I have seen further, it is by standing on the shoulders of giants."
    --- Sir Isaac Newton

    #2
    Hi Ray,

    From a web development standpoint, we only use IDs, in older themes, to trigger JavaScript, hence most of our IDs are prefixed with js- . When an ID is being used in conjunction with a LABEL, the the ID is prefixed with l-, unless there is JavaScript involved. Unfortunately, when it comes to SELECT elements being delivered by the software, there may or may not be an actual ID attached to them. At that point, only the NAME attribute can be used to trigger scripts or the ID has to be added dynamically as we do withe the Booc ReadyTheme.
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      hmmm....i thought starting element IDs with a number was at least, poor stylistically and can effect some jquery CSS functions such as querySelector?
      Bruce Golub
      Phosphor Media - "Your Success is our Business"

      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
      phosphormedia.com

      Comment


        #4
        Hi Bruce,

        I see the confusion. Although I typed a lowercase "L" and made it italic, it looks like the number "1". You are correct in your thinking though.
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #5
          My 2 Cents.

          Either way , l- or js- ... I understand the idea of being consistent by adding the prefix js- in front of id's to indicate that this element is being accessed by JavaScript and not just a style.

          However, with regard to form fields, I believe it to be more consistent to make the id and the name the same and avoid having the <label for=""> attribute
          being incorrect as in the example above. This would also allow scripts written for one site to be used as is on another site.

          I'm re-coding my javascript to use form element names.
          Ray Yates
          "If I have seen further, it is by standing on the shoulders of giants."
          --- Sir Isaac Newton

          Comment


            #6
            Originally posted by Matt Zimmermann View Post
            Hi Bruce,

            I see the confusion. Although I typed a lowercase "L" and made it italic, it looks like the number "1". You are correct in your thinking though.
            Ah, yea...I see now. (Old Pro tip: Code documentation should use Serif fonts--still wish mono-spaced fonts used the slashed zero and sevens :) )
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment

            Working...
            X