1

Let's say I'm generating markup through server-side code. I'm generating a bunch of HTML tags but I want to add custom client-side behavior.

With JavaScript (if I had a reference to the DOM node) I could have written:

var myDOMNode = ...
myDOMNode.myCustomAttribute = "Hi!";

Now the issue here is that I don't want to qualify every element with an unique id just to initialize data. And it's really strange to me, that there's not an easier and unobtrusive way to attach client-side behavior.

If I'm remembing this correctly, this is valid IE stuff.

<div onload="this.myCustomAttribute='Hi!'"></div>

If I was able to do this, I should be able to access it's "data context" though the identifier 'myCustomAttribute', which is really what I want.

Improve this question
0

10 Answers 10

Reset to default
1

The following will work but not validate:

<div myattribute="myvalue"></div>

But if you are injecting it into the HTML with Javascript, then perhaps that's not concern for you. Otherwise, you can use something like jQuery to process the elements before adding them to the DOM:

$(elements).each(function(){
     $(this).attr('myattribute','myvalue');
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Close, but no cigar. How would I reference the DOM elements from JavaScript without giving every element an unique id, that my point. Maybe it's impossible but I'm looking for a really mean and lean way of doing this.
Not really sure what you are talking about. The second approach I gave you does exactly what you want - it's inside a callback, you are free to give them what attributes you wish.
Well, in HTML I have some elements (not all) that I'd like to assign data, but in JavaScript I have no way to reference these elements. I can not assume that the data applies to all elements. I need to isolate a few, but do I really need to put an id="" on every such element? It feels unnecessary.
1

First off you should access custom attributes using the getAttribute and setAttribute methods if you want your code to work on other browsers than IE.

As to your event handler question that really depends on how you add the event handler. Assigning a function directly to the elements onXXXX property would allow you access the the element via this.

If you use IE's attachEvent you can't use this, you can access the element that generated the event using event.srcElementbut that may be child element of the div. Hence you will need to test for the existance of myCustomAttribute and search up the ancestors until you find it.

Improve this answer

1 Comment

I second the use of getAttribute and setAttribute. Sometimes it works w/ direct property access (object.myCustomAttribute = ...) but it may depend on the property name and the object... (I believe "class" is problematic for setting CSS classes)
1

I do appricate the input but I've finally figured this out and it's the way I go about initialization that has been the thorn in my side.

What you never wan't do is to pollute your global namespace with a bunch of short lived identifiers. Any time you put id="" on an element you're doing exactly that (same thing for any top level function). By relying on jQuery, HTML5 data and CSS there's a solution to my problem which I think is quite elegant.

What I do is that I reserve a CSS class for a specific behavior and then use HTML5 data to parameterize the behavior. When the document is ready, I query the document (using Query) for the CSS class that represents the behavior and initialize the client-side behavior.

I've been doing a lot of ASP.NET and within this context both the id="" and name="" belongs to ASP.NET and is pretty useless for anything else than internal ASP.NET stuff. What you typically find yourself doing is to get at a server-side property called ClientID you can refer to this from client-side JavaScript, it's a lot of hassle. They made it easier in 4.0 but fundamentally I think it's pretty much broken.

Using this hybrid of CSS, HTML5 data and jQuery solves this problem altogether. Here's an example of an attached behavior that uses regular expressions to validate the input of a textbox.

<input type="text" class="-input-regex" data-regex="^[a-z]+$" />

And here's the script:

$(function () {

    function checkRegex(inp) {
        if (inp.data("regex").test(inp.val()))
            inp.data("good-value", inp.val());
        else
            inp.val(inp.data("good-value"));
    }

    $(".-input-regex")
        .each(function () {
            // starting with jQuery 1.5 
            // you can get at HTML5 data like this
            var inp = $(this);
            var pattern = inp.data("regex");
            inp.data("regex", new RegExp(pattern));
            checkRegex(inp);
        })
        .keyup(function (e) {
            checkRegex($(this));
        })
        .change(function (e) {
            checkRegex($(this));
        })
        .bind("paste", undefined, function (e) {
            checkRegex($(this));
        })
        ;

});

Totally clean, no funky id="" or obtrusive dependency.

Improve this answer

Comments

1

In HTML5 there are HTML5 data attributes introduced exactly for the case.

<!DOCTYPE html>
<div data-my-custom-attribute='Hi!'></div>

is now corect, validating html. You can use any name starting with data- in any quantity.

There is jQuery .data method for interaction with them. Use .data( key ) to get, .data(key, value) to set data-key attribute. For example, 

$('div').each(function () {
     $(this).html($(this).data('myCustomAttribute')).data('processed', 'OK');
});
Improve this answer

Comments

0

How about this?

<script>
    function LoadElement(myDiv)
    {
        alert(this.myCustomAttribute);
    }
</script>

<div onload="LoadElement(this)"></div>

not tested btw

Improve this answer

1 Comment

The onload event is only fired by the IE web browser and it's not standards compliant, but it's exactly what I want to do.
0

Since you're trying to do this for multiple elements, you may try name attributes and getElementsByName.

<div name="handleonload">...</div>

window.onload = function () {
    var divs = document.getElementsByName('handleonload');
    for (var i = 0; i < divs.length; i += 1) {
        divs[i].foo = 'bar';
    }
};

Alternatively, you can use selectors, using libraries (such as jQuery and Prototype) and their respective iterators. This will also allow for you to search by other attributes (such as class).

Though, be cautious with your terminology:

obj.property = value;

<tag attribute="value">
Improve this answer

1 Comment

getElementsByName doesn't work in Internet Explorer unless the field officially supports the name attribute. A selector library is probably the better option.
0 
<div style="width:100px;height:100px;border:solid black 1px" myCustomAttribute='Hi!' onclick="alert(myCustomAttribute);"></div>
Improve this answer

Comments

0

The onload event is used for server side events. Its not part of the standard html element events.

Improve this answer

2 Comments

No it's not, the onload event is a client side javascript event.
is it, for html elements? sorry pal, its not.
0

Take a look at the following functions (especially the walk_the_dom one):

// walk_the_DOM visits every node of the tree in HTML source order, starting
// from some given node. It invokes a function,
// passing it each node in turn. walk_the_DOM calls
// itself to process each of the child nodes.
var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

// getElementsByAttribute takes an attribute name string and an optional
// matching value. It calls walk_the_DOM, passing it a
// function that looks for an attribute name in the
// node. The matching nodes are accumulated in a
// results array.
var getElementsByAttribute = function (att, value) {
    var results = [];

    walk_the_DOM(document.body, function (node) {
        var actual = node.nodeType === 1 && node.getAttribute(att);
        if (typeof actual === 'string' &&
                (actual === value || typeof value !== 'string')) {
            results.push(node);
        }
    });
    return results;
};

With the above two functions at hand, now we can do something like this:

<a href="#" dreas="">some link</a>
<script>
var els = getElementsByAttribute('dreas');
if (els.length > 0) {
    els[0].innerHTML = 'changed text';
}
</script>

Notice how now I am making finding that particular element (which has an attribute called dreas) without using an id or a class name...or even a tag name

Improve this answer

Comments

0

Looks like jQuery is the best bet for this one based on my searching. You can bind an object to a DOM node by:

var domNode = ...
var myObject = { ... }
$(domNode).data('mydata', mymyObj);

then you can call the data back up the same way, using your key. 

var myObect = $(domNode).data('mydata');

I assume you could also store a reference to this within this object, but that may be more info then you really want. Hope I could help.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.