Autosaved text is not forgotten after the form is submitted

[christophe-lejeune]

I use EasyMDE to allow students to record their essays at different stages, so that I can comment their results before they are completed. Students work in teams, which means that a single text may be modified by different people (only one at a time, of course). Since I have (recently) enabled autosave option, some students report me that they lose data when editing their essay.

Here is an illustrative case. After an essay is created (let's say that Amy wrote one paragraph and submitted it on the online platform), it is modified by another student (Barry wrote a second paragraph). The result is correctly recorded, so that Amy is able to read the whole on her computer. She decided to edit the essay and she is surprised to find, in the edit textarea, the essay she originally submitted (only one paragraph instead of two).

My understanding of what happens is that EasyMDE did not forget the content of the textarea when it is submitted... as if it considers that the text is not submitted yet. This is not a problem when one user works on the same computer with the same browser all the time. As soon as two different browsers/computers/users edit the same text, this behavior becomes an issue. However, it is likely that the issue comes from the way I am using EasyMDE . Here are some details.

• The html page contains one textarea with id "content" and one button with id "save".
• EasyMDE is loaded with the following options :

  var easymde = new EasyMDE({
    element: $("#content")[0],
    autosave: {
      enabled: true,
      uniqueId: "abcdefg",
      delay: 1000,
    },
    toolbar: ["bold", "italic", "strikethrough", "|", "heading-3", "unordered-list", "horizontal-rule", "|", "link", "image", "table", "|", "guide"],
    placeholder: "Type your essay here",
    spellChecker: false
  })

• A JS function is triggered by a "click" event on the "#save" button. It calls Ajax that (a) loads the essay from the database, (b) replaces the content of the essay with easymde.value() and (c) saves the essay in the database.

At this stage, I have three hypotheses of what could be wrong:

1. Perhaps the code of the button should contain some reference to a submit form, to ensure EasyMDE forgets the autosaved value when it is hit;
2. Perhaps it is wrong to use easymde.value() as the content to be saved in the database. However, I think this comes from an example in the documentation... but I may be wrong;
3. Perhaps I should explicitly force EasyMDE to forget (with easymde.clearAutosavedValue())... but, if I understand correctly, a simple usage like mine should not require this.

I thank you all for your advices, help and corrections. Christophe

[nhymxu]

I think you should control by yourself. Because many way to submit form and hard to catch this.

Sample:

• normal form can manual clear with onSubmit
• ajax submit can manual clear after get response

[christophe-lejeune]

This is what I have done for my project.

@nhymxu Thank you very much for your answer !