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 way A 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");

Answer 4

Exposing the actual ID of something in your database is only as insecure as your database.

Using the id of the element seems fine to me, too, if it uniquely identifies a thing. Using the data attributes is a possibility to save on splitting logic if you like, but you could still use id in tandem.

Conventionally speaking, this is very tame code compared to much of what jQuery is.

Answer 5

One more elegant way to associate data to an element is to use jQuery's data . However, I would consider building a jQuery plugin and using one instance of it for each task. A plugin encapsulates all of the data it needs, so you wouldn't need to store it tied to the element, which is not great.