I'm trying to write a fairly plex dynamic web page, using JQuery AJAX, and I am struggling with how to relate my links (<a ...>) with the the data their tied to, such as action names, and data element ids. I have pondered several different schemes, but I'm not sure I like any of them.

Building it into onclick, which means I have to configure it in the link generation.

<a onlick="func('abc', 123)">...</a>

Inserting it into the id of the link, which means parsing it out in JavaScript.

<a id="link_abc_123">...</a>

Putting the link in a div with hidden input elements...

<div>
   <a>...</a>
   <input type="hidden" name="action" value="abc"/>
   <input type="hidden" name="id" value="123"/>
</div>

Is there a best practice or a monly accepted way of structuring this data?

I'm trying to write a fairly plex dynamic web page, using JQuery AJAX, and I am struggling with how to relate my links (<a ...>) with the the data their tied to, such as action names, and data element ids. I have pondered several different schemes, but I'm not sure I like any of them.

Building it into onclick, which means I have to configure it in the link generation.

<a onlick="func('abc', 123)">...</a>

Inserting it into the id of the link, which means parsing it out in JavaScript.

<a id="link_abc_123">...</a>

Putting the link in a div with hidden input elements...

<div>
   <a>...</a>
   <input type="hidden" name="action" value="abc"/>
   <input type="hidden" name="id" value="123"/>
</div>

Is there a best practice or a monly accepted way of structuring this data?

• javascript
• jquery
• ajax

5 Answers 5

Best practice should always be, to strictly separate Code.

That means, you shouldn't include any Javascript into your backend-source code. So personally I'm a big fan of either putting the necesarry data into the elements (your last example) when using a template-engine, or sending just the necesarry data on a separate request (JSON for instance) to the client.

Using jQuery, it's a very convinient way to create data- attributes, where you can store any information, while jQuery will translate the values from those attributes into the data expandos. For instance:

<div id="test" data-foo='bar' data-test='{"cool": "stuff"}'>Just a div</div>

When selecting that element with jQuery var $test = $('#test'), you can access:

$test.data('foo') // === 'bar'
$test.data('test').cool // === 'stuff'

Read more: http://api.jquery./data/

With HTML5, you have the luxury of using data-* attributes - for example:

<a href="somewhere" data-action="do-this" data-foo="bar">...</a>

Which jQuery actually has support for - calls to $('a').data() will include the data-* values in it.

For simple things, I use a function like:

function getIdStr(i, sDelim) {
    if (typeof i != "string") {
        var i = $(i).attr("id");
    }
    var arr = i.split(sDelim || /_|-/);
    if (arr.length > 1) {
        return arr[arr.length-1];
    } else {
        return "";
    }
}

// usage
$(function(){
    $(".data .action").click(function(){
        doSomething(getIdStr(this)); // -> 123
    });
});

For something heavier, you might try to attach a data to the topmost container.

i would go with the new Custom Data Attributes HTML5 brings along.

Just use this <a data-action="foo" data-id="bar">...</a>

Also, jQuery already has support to get these data-attributes

You can add a custom property to the input and access it in javascript. eg

<input type="hidden" name="action" value="abc" yourproperty='<%= Eval("YourDataID") %>'/>