Question

I’m currently creating a custom-built CMS. The specific section I’m working on is to do with managing a photo gallery. On the page where the user can update details in a certain album, I use jQuery’s $.ajax to do a lot of the updating.

For example, each image has a caption field next to it, and I bind the focusout event to my ajax call, which works really nicely, and makes it quick for the user to tab through and update all the captions for the photos.

However, since I am binding the focusout event, it is likely to be called a lot, especially when it isn’t necessary. Say for example, they tab through three fields which they don’t change. A $.ajax call will be made for each time they pressed tab, even though they haven’t changed the input value.

So, my question is how can you store and detect if a value is different from what it was originally (or the last time an ajax call was made)?

Can this be done using jQuery’s .data()?

Answer 1

Solved using very simple jQuery:

in document.ready:

$('.caption_field').each(function() {
    var startval = $(this).val();
    $(this).data('setval',startval);
});

Then when the ajax call is made:

if (caption == $(this).data('setval')) return; // not changed

When the call returns successful:

field.data('setval',caption);