Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts

    Appropriate HTML attribute to pass info to JS

    So this is more of a general question, but...

    I'm writing a jQuery plugin and I realize that I'd like to be able to pass information from individual items that the plugin are chained on to the plugin. Because different items might have different settings, I think it makes the most sense to pass the information on through the HTML itself.

    Looking at plugins I've used in the past, I've seen a number of them use rel to pass information. As its not what the rel tag is meant to be used for, I'm curious if there is a reason, or if this is an accepted standard attribute to use? I would have thought the data- attributes might be best, but I thought I read somewhere that its not a great method to use.

    Any thoughts? How should I best pass information to my plugin for individual items?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,043
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Code:
    alert(document.getElementById('main').getElementsByTagName('h4')[0].innerHTML);
    You can chain tag names like that.

    You can use get elements by name, I'm not sure how dependable that is cross browser outisde of forms, w3c says it's ok. Those are the dependable methods I know of besides id and className.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    I think Keleth means that he wants to pass *INFORMATION* into his jQuery code. He wants to pass it as text inside some attribute of the HTML element.

    e.g.,
    Code:
    <td data="fade:blue;" style="color: red;">text in red fades to blue</td>
    I'm not sure why he says the data attribute could cause problems. Seems to me that so long is you didn't really use active data controls, it would be fine.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,043
    Thanks
    15
    Thanked 240 Times in 240 Posts
    OK, maybe this is more like what he means, not a problem with accessing but some way to store the data. Two ways I've done this, and both work well. One is to make a form, like this
    Code:
    <form><input type="hidden" name="mydata"></form
    Then you can use the input value to store and access data. You can store data in the form of an array. Which by the way is one way to store data when someone is on a page, just in an array, which exists only in memory.

    Another way to store and access data is through the window.name attribute. When you open a link to a new page the window.name is passed to the new page, even if the new page is on another domain, so you can pass info across domains with. It can hold a LOT of data, 2mb usually. It's seldom made use of, people seem to forget it exists. It's more secure and easier to use than _GET, but I haven't made it pass info to php except by making mydata.value = window.name. I'm still not sure I understand what he wants, but maybe that is useful.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    I'm not sure why he says the data attribute could cause problems. Seems to me that so long is you didn't really use active data controls, it would be fine.
    It might relate to validation - some people prefer to not clutter their HTML with attributes that they invent for their JavaScript to use - they prefer that their HTML actually pass validation. Others don't worry about validation and simply add the attributes they decide to use (even some frameworks do this).

    The problem mainly arises where someone wants both options - attributes to hold their data and to also pass validation. That's where using an attribute such as rel may be the best alternative as it is a valid attribute being slightly misused rather than being completely invented.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Well, I think validation is hard when you wanna pass data to JS inline, so I'm not terribly concerned about that.

    I'm mostly curious why I've seen a lot of plugins use the rel attribute on non-link tags, when the purpose of rel doesn't match (even if it didn't belong, I could get using it if the purpose matched up).

    And DrDos, I don't mean pass information from the HTML to JS... that's simple enough, as you've shown. I mean when creating a plugin to do something, what is the best way to pass information from the elements selected to the plugin?

    For example, the plugin I'm making is a simple image zoomer (mouse over image, a new window shows up with a zoomed in version of that item). So if I selected all elements with the class 'imgZoomer' and applied the plugin to them (this is with jQuery), they'd all get the same image zoomer settings applied. What if I wanted some images to have the zoomer above and some below? I've seen plugins do something like rel="position: top", at which point its a simple case of reading the rel tag. But is that better for some reason then doing something like data-position="top"? Or some other attribute altogether?

    And OldPenant, back when I first starting using jQuery's data functions (just a few months ago), I thought I read an article where someone espoused not using the html data attributes. But if it was a badly advising article, I think data-{whatever} may be the best choice.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,043
    Thanks
    15
    Thanked 240 Times in 240 Posts
    They're using rel because w3c just forgot to make enough identifiers, they can't use class, it might already be used, or id for the same reason. Of course they are using identifiers as containers, which would be considered as misuse, but if it works! A serious shortcoming on the part of w3c in my opinion, not allowing you to make up your own identifiers, or having a dedicated container attribute, corrected in XML, but not extended to HTML. For instance, style isn't really an attribute, it's a container, as it contains all the style information for that element.

  • #8
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    And I guess that's the point of the data-* setup, so you can create your own valid attributes.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    I think Felgall gave the real reason to use rel:
    ... using an attribute such as rel may be the best alternative as it is a valid attribute being slightly misused rather than being completely invented.
    Makes sense to me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    But given the data-* setup exists to create data attributes, doesn't that not count as invented?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    Well, historically, data-* hasn't been supported the same in all browsers. But...

    http://caniuse.com/dataset

    As the comment at the bottom of the page says:
    All browsers can already use data-* attributes and access them using getAttribute.
    So...why not?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by DrDOS View Post
    they can't use class, it might already be used
    There is no reason why class can't be used for this purpose even if it is already used for other purposes - there is no limit to the number of classes that one element in the page can have.

    Even if there is already a class (or ten) attached to the element that's no reason why you couldn't add another class instead of inventing a new attribute

    Using class has the advantage that as long as the value you supply is alphanumeric that your HTML will still be valid.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    Using class has the advantage that as long as the value you supply is alphanumeric that your HTML will still be valid.
    Well, that might be a tall order.

    I, personally, would like to be able to use attribute values similar to what you might see in CSS selectors (or in JS object notation). That is:
    Code:
    <tag ATTRIBUTE="fade_start: 0x337111; fade_end: 0xFFCC88; fade_duration: 1500;">...</tag>
    Class names wouldn't be appropriate for that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,043
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Quote Originally Posted by felgall View Post
    There is no reason why class can't be used for this purpose even if it is already used for other purposes - there is no limit to the number of classes that one element in the page can have.

    Even if there is already a class (or ten) attached to the element that's no reason why you couldn't add another class instead of inventing a new attribute

    Using class has the advantage that as long as the value you supply is alphanumeric that your HTML will still be valid.
    No, that's not quite right. You can assign as many class names as you want, but you can only either find the element that way, or ascribe attributes that way, you can't use the class names as a form of data when used in that way. To use class as a container for data you have to use get and set attribute and take over the class attribute altogether.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,007
    Thanks
    79
    Thanked 4,434 Times in 4,399 Posts
    HUH???

    Why do you say that?

    This is perfectly legal:
    Code:
    <html>
    <head>
    <style type="text/css">
    .foo { color: red; }
    </style>
    </head>
    <body>
    <div class="foo fadestart_30 fadestop_100 fadeduration_1500">...</div>
    </body>
    </html>
    Non-existent class names are ignored by HTML for layout purposes, but you could still get all of them via obj.className.

    Now, I happen to think that's ugly and error prone compared to what I suggested in post #13, but I don't see why it can't be made to work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •