1

I'm creating a web app in which users can bookmark certain places.

For this I've created a span element which initially has a class no-bookmark. Whenever a user clicks this span element I would check whether the span has the above class or not. If it has it means the user wants to bookmark the place and I would send a ajax request to server and then change the class to has-bookmark.

If when the user clicks the span and it doesn't have the class no-bookmark, then I assume that the user wants to delete the bookmark, and send a request for that to the server.

Is there a better way to maintain state, or is this method good enough?

Kartik Anand
  • 4,513
  • 5
  • 41
  • 72

2 Answers2

3

It isn't too bad way a to do it though it does mix logic with the UI which can be difficult to maintain long term.

One catch though. What happens if you submit a request (whether to set or delete the bookmark) and it fails? Then your class is out of step with reality.

You also need to remember that other things could change the CSS class. Any manner of client-side code could change the classes so be wary of that too.

Also what happens when the user closes the page and later reopens it? You still have to have another setting somewhere to track unless you don't care about longer-term state.

If you do care about long-term state, you could use cookies, local storage or indeed back-end storage to maintain that state depending on the design of your system. In that case, there is probably no benefit in trying to maintain the state purely in the class, it would be more robust to track state in a JS variable though the class is probably still useful but only for UI purposes.

You could look at something like REACT to help you with these things. At the cost of some initial load "weight", you get a LOT of help with maintaining state and being reactive.

Julian Knight
  • 4,716
  • 2
  • 29
  • 42
  • Yeah I've worked with React and know how it can help in saving state. But if a user closes the page, won't the variables will still be gone? For error conditions, I save a js variable in the onclick handler itself to determine for what the request came, so I guess that won't be an issue? – Kartik Anand Jan 23 '16 at 18:01
  • Also without keeping an sort of attribute on the html element, how would I determine whether the user wants to delete bookmark or edit it? – Kartik Anand Jan 23 '16 at 18:02
  • Even with react, you still need to store the state somewhere yes. It only helps with the in-browser reactiveness. It does, though, have standards for maintaining state and ensuring the correct flow of state if your app gets more complex (e.g. using REDUX). Without the class, you would likely use the same JavaScript variable or object you use when reading/writing the state for use on reload. – Julian Knight Jan 23 '16 at 18:06
0

For this answer, I suppose that you have access to the server API, and that the state - some user ID and the bookmarked item, can be retrieved by the API anytime. If I'm not supposing correctly, stop reading now.

So the server, possibly by some database, always knows if a certain user, say user087 has currently item item118 bookmarked. I would get, when the list of <span>s has loaded, for each item, by ajax, a value of true/false for the given user id and item id, whether it's a bookmark or not. Then I'd set the appropriate style to the span.

This way you effectively separates logic from user interface, and you always have the correct state, as soon as the <span>s load, and independently of browser behavior.

EDIT

Following the asker's comment. Moreover, you can populate the loaded states to an object. An example of usage of such an object would be to count (and present) user's bookmarks total, or search for a bookmark if there is plenty, without having to ajax. So, between loads, you can have a temporary local database of your states.

guysigner
  • 2,822
  • 1
  • 19
  • 23
  • This I'm doing already while rendering the view in Django. So is this enough or duing page load i should populate a JavaScript object as well by iterating over all spans? – Kartik Anand Jan 24 '16 at 07:38
  • If, **between loads**, you do not need to use the state, then don't populate an object. An example of usage of such an object would be to count (and present) user's bookmarks, or search for a bookmark if there is plenty, **without having to ajax**. So you can create a temporary local db of the user's bookmarks. – guysigner Jan 24 '16 at 07:45
  • I'm just concerned that this would break if the users starts manually changing the classes on the span. – Kartik Anand Jan 24 '16 at 07:46
  • In such case, you can update the server of the class name, or class property that has changed. For example, send and ajax: `{user: 'user809', item: 'item002', bgcolor: '#ff00ff', font-size: '2em'}`. Just interact with your server, that's what ajax is for. – guysigner Jan 24 '16 at 07:54