Using javascript:function syntax versus jQuery selector to make Ajax calls

Question

I do front-end dev only like 10% of the time and am curious which is the better way to handle making ajax calls. These calls are just posting data to a web app that specifies an action name and an id.

<a href='javascript:addToList({'action':'set-default-time-zone','id':23})'>set default timezone</a>
<div class='add-to-list action-set-default-time-zone id-23'>set default timezone</div>

I have used both over the years but am not sure which one is preferred. It seems like they get to the same point in the end. Would you consider these to be the two best alternatives and is one better than the other?

I've implemented the div method as follows:

$(document).ready(function(){
    $('.add-to-list').click(function(){
        var id=getId($(this).attr("class"));
        var action=getAction($(this).attr("class"));
        $.post('/api/' + action,function(data){
          ...
        },'json')
    });
});


function getAction(str){
    var parts=str.split(' ');
    var phrase='action-';
    for(i=0; i<parts.length; i++){
        var val=parts[i].match(phrase);
        if(val!=null){
            var action=parts[i].split('action-');
            return action[1];
        }
    }
}

function getId(piece){
    var parts=piece.split('id-');
    var frag_id=parts[parts.length-1];
    var part_id=frag_id.split('-');
    var id=part_id[part_id.length-1];
    return id;
}

The link method would seem straightforward.

thx

Answer 1

Well the second approach is what you would call Unobtrusive JavaScript . It is believed to be a more robust approach (I'll avoid the term better here.)

However, your implementation is a bit over-complicated. It could be tuned down to:

HTML:

<div class="add-to-list" data-action="set-default-time-zone" data-id="23">
    set default timezone
</div>

JavaScript:

$(document).ready(function () {
    $('.add-to-list').click(function () {
        var id = $(this).attr("data-id");
        var action = $(this).attr("data-action");

        $.post('/api/' + action, function(data) {
          // ...
        }, 'json')
    });
});

The HTML5 specification allows for attributes starting with data- to be carrying user-defined data. And it's also backward compatible (will work with older browsers.)

Answer 2

Method 1:

<a href='javascript:addToList({'action':'set-default-time-zone','id':23})'>set default timezone</a>

Method 2:

<div class='add-to-list action-set-default-time-zone id-23'>set default timezone</div>

Method 2 is preferred because you would be practicing unobtrusive style of coding with a much clearer separation of your markup and your scripting code. It is alot easier to read and debug, and there for more maintainable. Also, i would propose instead of using CSS classes to pass data, to use the jQuery.data() method to store data on elements.