Best Practice with jQuery and AJAX calls

Question

I have a question about best practices when using jQuery/JavaScript/Ajax. Lets say that I have some tasks and there is a calendar for every task. The User is able to click on a day in a task calendar and book the task at the specific day via AJAX. I have to store the date and the ID of the task somewhere and i am using really bizarre IDs for that such as:

<span class="day_field" id="date_13-02-2013_task_4">13.02.2013</span>

Then i just attach an listener like this:

$('.day_field').on('click',function(){
    var date = $(this).id.split('_')[1];
    var task_id = $(this).id.split('_')[3];
    //place for some validation
    $.post('book_task.php',{task_id: task_id, date: date},function(data){
        //something cool with the result
    });
});

My question is: Is this the right way how to do it? I am not pretty sure, because the IDs can be really long + it contains ID in database which is not probably save at all.

Thanks! T.

Answer 1

Use HTML5 data attributes:

<span class="day_field" data-date="13-02-2013" data-task="4">13.02.2013</span>

$('.day_field').on('click',function(){
    var date = $(this).data("date");
    var task_id = $(this).data("task");
    //place for some validation
    $.post('book_task.php',{task_id: task_id, date: date},function(data){
        //something cool with the result
    });
});

Answer 2

The right wayA better way to do it would be to store the data in either data attributes, or make the span an anchor tag and store the param string desired in the href attribute.

<span class="day_field" data-date="13-02-2013" data-task="4>13.02.2013</span>

or

<a class="day-field" href="?task_id=4&date=13-02-2013">13.02.2013</a>

with this for the anchor tag:

$('.day_field').on('click',function(e){
    e.preventDefault();
    $.post("foo.php",this.href,handler);
});

Answer 3

Instead of an ID, you can use custom data attributes, like this:

<span class="day_field" data-date="date_13-02-2013_task_4">13.02.2013</span>

And then you can access the value like this in jQuery:

$(".day_field").data("date");