How do I efficiently write a "toggle database value" function in AJAX?

Question

Say I have a website which shows the user ten images and asks them to categorise each image by clicking on buttons. A button for "funny", a button for "scary", a button for "pretty" and so on. These buttons aren't exclusive. A picture can be both funny and scary.

The user clicks the "funny" button. An AJAX request is sent off to the database to mark that image as funny. The "funny" button lights up, by assigning a class in the DOM to mark it as "on".

But the user made a mistake. They meant to hit the next button over. They should click "funny" again to turn it off, right?

At this point I'm not sure whats the most efficient way to proceed.

The database knows that the "funny" flag is set, but it's inefficient to query the database every time a button is clicked to say, is this flag set or not, then go on with a second database call to toggle it.

Should I infer the state of the database flag from the DOM, i.e. if that button has the class "on" then the flag must be set, and branch at that point?

Or would it be better to have a data structure in Javascript in the page which duplicates the state of each image in the database, so that every time I set the database flag to true, I also set the value in the Javascript data to true and so on?

Answer 1

The page state should be plenty. After all, the page state is what the user sees and manipulates; and they expect the result of their manipulations to reflect what they see.

Answer 2

I would keep the state of the element in the js on the page and just issue state-change requests via Ajax. On the server side it is reasonable to either process directly or introduce a state validation check.

This depends on various aspects of your system architecture, however. If the rating is shared between users or other similar scenarios you may need to enforce the round-trip to check what the current status is (or if you have additive nominal flags)...