...

View Full Version : Appropriate HTML attribute to pass info to JS



Keleth
07-17-2012, 12:26 AM
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?

DrDOS
07-17-2012, 12:55 AM
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.

Old Pedant
07-17-2012, 01:14 AM
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.,

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

DrDOS
07-17-2012, 03:05 AM
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

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

felgall
07-17-2012, 04:16 AM
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.

Keleth
07-17-2012, 04:13 PM
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.

DrDOS
07-17-2012, 05:09 PM
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.

Keleth
07-17-2012, 05:43 PM
And I guess that's the point of the data-* setup, so you can create your own valid attributes.

Old Pedant
07-17-2012, 08:39 PM
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.

Keleth
07-17-2012, 08:54 PM
But given the data-* setup exists to create data attributes, doesn't that not count as invented?

Old Pedant
07-17-2012, 09:02 PM
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?

felgall
07-17-2012, 11:14 PM
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.

Old Pedant
07-18-2012, 12:38 AM
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:


<tag ATTRIBUTE="fade_start: 0x337111; fade_end: 0xFFCC88; fade_duration: 1500;">...</tag>

Class names wouldn't be appropriate for that.

DrDOS
07-18-2012, 12:50 AM
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.

Old Pedant
07-18-2012, 01:00 AM
HUH???

Why do you say that?

This is perfectly legal:


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

DrDOS
07-18-2012, 01:11 AM
HUH???

Why do you say that?

This is perfectly legal:


<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.Yes, but don't forget that set attribute wipes out whatever information was there. You could use that but it would be sort of limiting. You have to use get and set attribute.

Old Pedant
07-18-2012, 01:43 AM
You have to do that anyway, if you want to (for example) remove a single class name from a list or add one or more to the list.

I believe that jQuery even has methods to make this easy.

Anyway, I am *NOT* advocating this method. Just saying it *could* be used. It seems clumsy to me.

DaveyErwin
07-18-2012, 02:35 AM
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:


<tag ATTRIBUTE="fade_start: 0x337111; fade_end: 0xFFCC88; fade_duration: 1500;">...</tag>

Class names wouldn't be appropriate for that.



<!doctype html>
<html><head><title></title></head><body
<div id="divId" data-ATTRIBUTE="dataATTRIBUTE={fade_start: 0x337111, fade_end: 0xFFCC88, fade_duration: 1500}" >
<input type="button" value=" Get Data-Greetings "
onclick="alert(eval(parentNode.getAttribute('data-ATTRIBUTE')).fade_end);alert(dataATTRIBUTE.fade_duration)">
</div>
</body>
</html>

Old Pedant
07-18-2012, 02:48 AM
Well, yes. Though I would probably do


<div id="divId" data-fade="{fade_start: 0x337111, fade_end: 0xFFCC88, fade_duration: 1500}" >

And then


var fadeInfo = eval( document.getElementById("divId").getAttribute("data-fade") );

More in keeping with the JSON spirit of things. Let the JS code in the page determined the name of the variable.

If you use your code, you will end up with a variable named (as you showed) dataATTRIBUTE which may or may not be a desirable name in your JS coding.

DaveyErwin
07-18-2012, 12:56 PM
Well, yes. Though I would probably do


<div id="divId" data-fade="{fade_start: 0x337111, fade_end: 0xFFCC88, fade_duration: 1500}" >

And then


var fadeInfo = eval( document.getElementById("divId").getAttribute("data-fade") );

More in keeping with the JSON spirit of things. Let the JS code in the page determined the name of the variable.

If you use your code, you will end up with a variable named (as you showed) dataATTRIBUTE which may or may not be a desirable name in your JS coding.

Well,If you use your code
it throws an error ....


<!doctype html>
<div id="divId" data-fade="{fade_start: 0x337111, fade_end: 0xFFCC88, fade_duration: 1500}" >
<script>
var fadeInfo = eval( document.getElementById("divId").getAttribute("data-fade") );
alert(fadeInfo.fade_start)
</script>
</html>
which may not be desirable

This code runs
successfully ...


<!doctype html>
<div id="divId" data-fade="fadeInfo={fade_start: 0x337111, fade_end: 0xFFCC88, fade_duration: 1500}" >
<script>
eval(document.getElementById("divId").getAttribute("data-fade") );
alert(fadeInfo.fade_start)
</script>
</html>

to avoid having javascript variable
name "declared" in the html markup
you can do this ...


<!doctype html>
<div id="divId" data-fade="{fade_start: 0x337111, fade_end: 0xFFCC88, fade_duration: 1500}" >
<script>
eval("fadeInfo="+document.getElementById("divId").getAttribute("data-fade") );
alert(fadeInfo.fade_start)
</script>
</html>

Keleth
07-18-2012, 03:47 PM
And if you're using jQuery, it has a parseJSON function built in, rather then having to use eval.

DaveyErwin
07-18-2012, 04:04 PM
And if you're using jQuery, it has a parseJSON function built in, rather then having to use eval.

If you don't use a library, JavaScript
has a native JSON object which
has the method parse.

Keleth
07-18-2012, 04:20 PM
That parses a string to JSON? I was looking for a native method, how did I not find that?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum