contentEditable working only after close and reopen browser

user_14029775 0
Viewed 171

I am following the contentEditable demo here: https://codepen.io/Shokeen/pen/eJRRVw. My code is the exact same for the CSS and JS, but I made some slight changes to the HTML below:

<div id="wrapper">
<section>
<h1 class="headline">contentEditable Demonstration</h1>

<button id="editBtn" type="button">Edit Document</button>
<div id="editDocument">    
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited by <span id="author">Monty Shokeen</span></p>      
  <div id="content">{{temp_df | safe}}</div>
</div>

Basically, I replaced the paragraph id="content" line with a div id="content" line where the temp_df is a Pandas data frame.to_html imported from Python using the Flask framework. Ideally what would show up is a table that is editable just like every other editable item in the code pen above. However, when I run this, the table does not show up at all. After some testing, the interesting thing I found is that if I run the program, open it up in the browser (which does not show the table), then close the browser, then reopen the browser, the table shows up. I have tried this in multiple browsers so it is likely not a problem unique to anyone browser. I have also included the messages in my terminal throughout this whole process.

enter image description here

1 - When I run the Flask program

2 - When I click a button on my website to show table (table does not show)

3 - When I close the browser and reopen the program in a new browser (table now shows)

flask contenteditable css html javascript
1 Answers

The CodePen demo, modified as described, seems to work. Here is what I did:

  1. Replace HTML with HTML from your question.
  2. Replace {{temp_df | safe}} with simple HTML table.

So it seems there is not enough information to fully answer your question. Something not described in your question is probably causing the unexpected behavior.

Some ideas:

  1. The button on your web site apparently behaves differently from the button in the CodePen demo. What does your button do?
  2. What HTML does temp_df result in?
  3. Are there any JavaScript errors/warnings in the browser dev console?
  4. Was any part of the CodePen demo improperly copied? (Copy-paste error.)

Here is my best guess: Examine the code related to localStorage. That is the part of the code we have been shown with the highest chance of running differently between runs.

The original CodePen demo used localStorage as an ad hoc "database" to store information in the browser. However, I presume your website wants to read and write data from a real database that is not localStorage.

Just removing all code related to localStorage may solve your problem.

user_1170300
Related