Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Save editions using ajax #358

merged 22 commits into from Jan 29, 2015

Save editions using ajax #358

merged 22 commits into from Jan 29, 2015


Copy link

@fofr fofr commented Jan 23, 2015

Allow all editions except Simple Smart Answers to be saved over ajax, allowing users to save as they go and to not lose their place or context. eg when making small changes whilst 2i reviewing something.

  • Allow saving via keyboard shortcuts ctrl+s and cmd+s
  • Test editing of editions with and without javascript to ensure feature parity
  • Allow adding, removing and rearranging of parts to be saved over ajax
  • Prevent saving with ajax when a form field wouldn't allow it, (eg a file upload), or a change of state that needs a page refresh (eg deleting a video caption file)
  • Keep the form's "dirty" state until the page has been saved successfully, preventing users from accidentally leaving unsaved changes mid ajax request or if validation fails

Suggest reviewing with ?w=1 as test changes lead to indentations.


fofr and others added 22 commits Jan 28, 2015
* When clicking on a `js-save` element, post the form using ajax
* Serialise the values of the form
* Toggle classes and text on a message element to indicate state
* Pickup on returned validation errors and display those messages
alongside the erroring inputs
Create workflow message styles which transition up and down on
* Add an assertion that the dynamic saving message is displayed
* Create helper methods for asserting a save with success/error
* Update local transaction, licence, help page, business support,
completed transactions and major change tests to run with and without
javascript. This is to help ensure the behaviour is the same between a
standard form save and an ajax one.
Some fields such as file uploads, or checkboxes for removing file
uploads, need a full form submit and page refresh to work correctly.

* Use a class, ‘js-no-ajax’ to indicate these fields
* Default input type file as one of these field types
* Apply these changes to the video caption and campaign image fields
* Update video and campaign tests to run with and without javascript
Javascript form construction is too complex to handle validation
without a full page reload, at least for now.
* When attempting to save, modify the edition as being clean
* If the save errors, return to a dirty state
* Any changes after saving will mark the form as dirty, as before
* Store dirty state as accessible data rather than local variable, for
access by other js modules
Allow other modules to respond to the success and error states. This
allows us to split an ajax save module that needs to handle parts into
a separate module.
* Create a separate ajax-save-with-parts module and apply to parted
edition types
* When saving a part over ajax, update the part’s title
* Also update the toggle target id and link so that Bootstrap panels
continue to hide/show
* When creating a new part over ajax, use the server generated ID to
prevent creating duplicates on multiple saves
This enables the ajax-save error handler to know which help-blocks to
remove before attempting to save. Otherwise there’s no way of
distinguishing between these and some actual help text.

* Update default formtastic list error class
* Update reviewer field class which handles errors manually
The reviewer field isn’t generated, and was missing an ID on the
container, “edition_reviewer_input”.

The IDs in the form “edition_XXX_input” are used by the ajax save as an
indicator of where an error has occurred and where to put the messages.
Test that parts get removed, and refresh to confirm display and state.
Use Mousetrap to trigger the save function, as if the save button had
been pressed.
Mimic the non-ajax version, but refer to the form above.
Inputs generated via formtastic have IDs on form groups and a
‘control-label’ class on labels. Add these to the custom tag inputs to
allow tag error messages to be correctly displayed.
When updating parts, a title could match another part or could be left
blank accidentally. Use the order attribute instead, which will be
Identify the invalid part based on its ID or order (order if there is
no ID, eg a new part) and show the validation message against the right

* Open any parts that have errored so the warning messages can be seen
* Allow multiple validations to show against each field
* Use similar logic to the error messages in the ajax-save module;
finding fields based on patterns like [id*=slug_input]
* Fix edition_test by matching a less specific message, the content
models update now includes individual part validation messages
* Avoid nested for loops by using jQuery’s each method.
* Avoid using Object.keys which is only available in IE9+
Prevent users from navigating away while there is a pending ajax

Formerly it was reset when initiating a save, to prevent the confirm
prompt from appearing when saving with a condition that prevents ajax.
However this is handled by publications.js already.
Use the mousetrap global bind shortcut so that the save() method is
triggered whenever “ctrl+s” or “command+s” are keyed in, even if that
happens to be while using an input (which is probably the most common
use case)
vinayvinay added a commit that referenced this issue Jan 29, 2015
@vinayvinay vinayvinay merged commit 69a695d into master Jan 29, 2015
1 check passed
@vinayvinay vinayvinay deleted the ajax-save branch Jan 29, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants