I'm trying implement my own pre-fetching logic in rx.js. Here is example marble diagrams:
I've modeled the problem as follows: There is a stream of hints that lets my program know that a user might want to click a certain link. I want to immediately send a request, but only render the result if the user indeed clicks the link.
Based on this, there are (at least) 3 things that can happen by the time the user clicks the link:
The correct result already returned form the server.
The request is still in progress
(Special) There is no request -- finished or in progress -- because the user somehow didn't trigger a hint first.
Some extra requirements:
Only the latest hint should have a request in progress (i.e. cancel previous requests).
Once the user clicks on a link, new hints should not trigger a request until the result is rendered
New clicks should trigger new requests and cancel the previous request
I've actually found a solution, but it is convoluted, maybe incorrect, and mostly I'd just like to know if there is a better way of doing it (see below).
EDIT: Now implemented in hy-push-state.
Related
I have an application where users can take part of puzzle solving events. I have an API endpoint /events/{id} that is used to get data associated to a certain event.
Based on whether the event has ended, the response will differ:
If the event has ended, the endpoint will return event name, participants, scores etc. with status code 200
If the event has not ended, the endpoint will return event name, start time, end time, puzzles etc. with status code 200.
On the client-side, what is the best way to distinguish these two responses from each other to decide which page to display, results page or event page? Is this a good way to accomplish my goal?
Some might answer that I should already know on the client-side whether the event has ended and then query for data accordingly. But what if user uses the address bar to navigate to an event? Then I will have no data to know, whether it truly has ended. I wouldn't like to first make an API call to know that it has (not) ended and then make another one for results/puzzles.
pass a boolean isFinished and return it inside of response object. If your response object is already defined, create a wrapper that has the previous response dto and a boolean flag.
Also we did use a solution like this in one of our projects at work for a big company so I would say it is somewhat industry accepted way of doing it.
Background
I'm working on a web application utilizing AJAX to fetch content/data and what have you - nothing out of the ordinary.
On the server-side certain events can happen that the client-side JavaScript framework needs to be notified about and vice versa. These events are not always related to the users immediate actions. It is not an option to wait for the next page refresh to include them in the document or to stick them in some hidden fields because the user might never submit a form.
Right now it is design in such a way that events to and from the server are riding a long with the users requests. For instance if the user clicks a 'view details' link this would fire a request to the server to fetch some HTML or JSON with details about the clicked item. Along with this request or rather the response, a server-side (invoked) event will return with the content.
Question/issue 1:
I'm unsure how to control the queue of events going to the server. They can ride along with user invoked events, but what if these does not occur, the events will get lost. I imagine having a timer setup up to send these events to the server in the case the user does not perform some action. What do you think?
Question/issue 2:
With regards to the responds, some being requested as HTML some as JSON it is a bit tricky as I would have to somehow wrap al this data for allow for both formalized (and unrelated) events and perhaps HTML content, depending on the request, to return to the client. Any suggestions? anything I should be away about, for instance returning HTML content wrapped in a JSON bundle?
Update:
Do you know of any framework that uses an approach like this, that I can look at for inspiration (that is a framework that wraps events/requests in a package along with data)?
I am tackling a similar problem to yours at the moment. On your first question, I was thinking of implementing some sort of timer on the client side that makes an asycnhronous call for the content on expiry.
On your second question, I normaly just return JSON representing the data I need, and then present it by manipulating the Document model. I prefer to keep things consistent.
As for best practices, I cant say for sure that what I am doing is or complies to any best practice, but it works for our present requirement.
You might want to also consider the performance impact of having multiple clients making asynchrounous calls to your web server at regular intervals.
I am just wondering what general best practice is for saving data in Ajax Forms. In Spree ECommerce for example, every time you change a value in a list of objects (say you change the quantity of a certain Item in an Order), it updates the database with an Ajax call.
Is it better to have the User manually press "Save" or "Update" when they're done editing a form, or if you can (you have setup an ajax alternative), to just automatically save the data every time something changes?
It seems like Stack Overflow Careers saves a "Draft" of your profile every few seconds using some ajax thing.
As such, it seems like there's 3 ways to save data in a form if you have Ajax going:
User presses button, saves all data at once, not good if data is important
Save every time interval
Save every change
What do you recommend?
Good question. I don't think there's a one-size-fits-all best-practice that covers all situations. Generally, the more user-friendly your solution is, the greater the complexity of implementation, the less likely the potential for a proper gracefully degrading solution (unless you have been very, very careful).
Also, there are implications to whichever approach you have opted to go with. For example, autosaving periodically might not be a good idea where substantial data validation is involved. A user might type some stuff in, and get an error message after a few seconds. Instant feedback would be much more beneficial to the user in such a situation, as it is possible that the input which led to the failed validation was, say, a few actions ago, so it might be somewhat confusing to the user.
Saving whenever the user changes something (a keypress, a checkbox selection, etc.) would seem to be the way to go from a usability perspective, but again, it depends on what you are doing and could have negative side-effects. For example, if the user is on a slow connection, he/she might feel that your site is slow or buggy. It would also yield a lot more database queries than the old-school 'click save' method.
I guess an obvious way to get around some of the above caveats would be to incorporate on-the-spot client side validation, but what works in the end might well be down to what your hallway testers say.
Final recommendation: create the old-style 'click save to save' forms and enhance from there, making sure things don't break without javascript (unless you have express permission from a higher authority). Hope that wasn't all nonsense.
It all depends on the situation. If the form is going to change due to user input then you may be better served save/update form on every change. Otherwise wait for an explicit user action.
I can only see trouble on the horizon if you adopt an autosave strategy for a form..
I know this post is old, but I like this simple solution, if the user change som data on your form and try to leave page without saving it, I prompt a remember message
In a global .js:
var validate=false;
window.onbeforeunload = function() { if(validate) return "You made some changes, are you sure you want to leave?"; };
In the form page, (i did it in jquery):
$('input,textarea,select').change(function(){ validate=true; });
$('form').submit(function() { validate=false; });
BR!
I am working on a form filling program and I'm looking for suggestions on implementing data validation.
I'm considering a two-phase approach:
Interactive - after user enters data and attempts to move to the next field, flag invalid data with something non-obtrusive, like a balloon message but let the user continue on.
Preflight Checklist - Once the form is filled and the user attempts to print/send it, re-validate the form, notify user of errors and refuse to continue until corrections are made.
Any other ideas, suggestions?
I would always recommend validating at the server as well.
Otherwise, what you describe is what I typically see. Oh... and don't flag a required field as invalid if a user tabs through it, unless it's still blank when they submit, but if they enter "wrong" data into a field, indicate it immediately, as you describe.
OK, if you are asking about user experiace, then i would apply both 1 and 2.
As users input fields, highlight fields, that are required, incorrect with colours/icons (no blloons, they are in the way). Icons can then be clicked for explanation of why it is incorrect.
Also validate the form at the end, before submit, and highlight the incorrect fields/required missing fiels, but try to avoid step by step acceptance (click ok, and message per field missing, incorrect).
You could rather then have a display that tells the user the messages, but dont remove this, otherwise you are back where you started from, click and go.
I want a "Check all" check box in a grid to let the data get updated in DB thru ajax.. but due to restriction of 2 calls at a time I am not able to make it happen. Help me to resolve the issue.
Your question is a little vague, but I suppose you are sending one Ajax request for each checkbox that's being checked, when the user clicks the "check all" button ?
If so, you should modify your code, so only one Ajax request is sent ; it should say the server "oh oh, all checkboxes have been checked, do your stuff", instead of just saying "one checkbox has been checked".
This way, no matter what the user does, you only have one Ajax request, which means :
Faster
No (well, less) problem with concurrency
No problem of too many Ajax requests in parallel
No risk of one request not making it to the server
Less load on the server (and the client)
(But, yes, I admit, it means modifying your code a little bit ;-) )