Avoiding duplicate data with jQuery
I have an idiotic client who does not seem to understand the English text in an alert telling him that his data has been successfully saved. It constantly hits the submit button and inserts a new row of data into the database. Can anyone suggest a solution to prevent this please? I am using jQuery to post data so that updates are not updated.
a source to share
Create a unique token on the page from which the insert appears in the hidden field to be submitted when the form is submitted. Store this token somewhere in the database. When a message containing this token is being processed, note that the token has been consumed if it has not already been marked. If you see a post with a token that has already been used, refuse to process it and present the user with an error (or redirect to the edit / update page so they can make changes).
EDIT : based on comments
If you need multiple attachments from the same page, then you probably have multiple input fields containing the new data. When you submit data, set up a modal dialog that says "Wait while I update your data." This will prevent the user from taking any action during the update. When the update is completed successfully, clear the input fields and release the dialog. If the request takes too long, open a dialog box, show an error message, and leave the details in the fields for resubmission.
a source to share
Wordpress has great animation when deleting post via AJAX. Perhaps you could do something similar, except add a new line to the screen (use JSON to return data) and fade, green at first, to show the end user is green.
As for not resetting form values, you can do something like this in jQuery
$('#myForm input[type=text]').val('');
Good luck to Frank!
EDIT I think that if you return the results via AJAX and then update something on the screen, the end user will be less likely to think that their input was not entered into the db.
You can get a cool ajax loader from www.ajaxload.info and show it while AJAX (I'm assuming when you say the user doesn't leave the page, that's what you're talking about) processing.
a source to share
You can fit this data onto the screen using the yellow fade effect to highlight it on the screen in a list. As new data is inserted at the top of the table or list item, temporarily select it, use the new jQuery live methods to add the ability to delete a row via AJAX.
Also, since you just got the data, you don't have to wait to add it to the screen, just make sure you check the database, gives a successful result so you can delete it or use a placeholder until the database succeeds completely then add data to it on success.
a source to share