Question

I have a very simple issue. I am using toggleEdit to allow the user to edit/preview some html. For those who are unfamiliar with toggle edit, all it does is when you call toggleEdit() on an <input/> it creates a <div/> with whatever value is in your <input/> element. When you toggleEdit("preview") it shows the <div/>, and when you toggleEdit("edit") it shows your <input/> field.

For my case I am using it to show “embedded html.” The user basically enters some html, clicks preview and it shows. I am trying to find a way to “rerender” the div so that embedded style elements can be used.

For example.

In the text area the user enters:

<style type="text/css">
   ul {  list-style-type: circle;  }
</style>

<ul> <li> This is a test </li>  </ul>

In my case, the style is ignored. But if I were to use inline styles they would work. I tried replacing the div text, but that did not work.

I’m sure this is a simple rerednering issue.. just can’t find an easy way to search for it.

---

Edit

As requested here is a JSFiddle

Answer 1

It would help greatly if you were to post a live version of your code for proper examination to take place. In any case, it doesn’t seem like style=type declarations through js insertions are supposed to work. Inline however does and that is why you see tools like firebug and so forth relying upon line-styles for on-the-fly css additions to the dom that work on real-time.