Scriptaculous Ajax.InPlaceEditor does not work with HTML

Question

I'm using the Scriptaculous Ajax.InPlaceEditor to edit data from my database.

Actually, it works perfectly at first, when there is no data in the database ; Here is what I have in my navigator source code :

<p id="edit" title="Click to edit" >
New text to edit here
</p>

I can create a new record, automaticly add some HTML to change design, and change again and again with no problem thanks to the Ajax.InPlaceEditor. At this time, here is how looks the source code :

<p id="edit" title="Click to edit" >
<ol>
<li>item1</li>
<li>item2</li>
</ol>
</p>

Ok, this is just perfect. And this is perfect too in the database...

But if I reload the full page, then the initial value of the editable paragraph is now HTML coming straight from the database, and here is what I have in the source code :

<p id="edit" title="Click to edit"/>
<ol>
<li>item1</li>
<li>item2</li>
</ol>

As you can see, the < / p > is mysterously missing, and the paragraph is not editable any more... Rich noticed that the paragraph was actually self closing... I also tried to manually set HTML text into the database, and the result is the same : < / p > is missing...

Would you have any idea of what's going on, and how to fix it ?

Thank you so much..

Answer 1

You can't wrap ols in ps. That is, the <ol> closes the p earlier than you think. I suggest using a div intsead.

Answer 2

Assuming you copied the HTML correctly, the p tag at the end of the original HTML block is superfluous, since you have closed the p tag in the first block with the slash:

<p id="edit" title="Click to edit"/>
                                  ^closes the p tag

I assume the editor "fixes" HTML so removed the final closing p tag since the p tag was closed before the ordered list begins