Search code examples
jquerycssinternet-explorer-7stylesdhtml

Modifying a STYLE block in IE7 w/ jQuery

I'm letting the user update the styling of their customizable widget by giving them an editable textarea with CSS code that updates a <style> element onchange.

JS:

function updateWidgetStyling() {
    $("#stylePreview").html( $('#WidgetviewCustomCSS').val() );
}

HTML:

<style id="stylePreview">
...
</style>

<textarea name="data[Widgetview][customCSS]" cols="30" rows="6" 
onchange="updateWidgetStyling()" id="WidgetviewCustomCSS">...</textarea>

This works in Chrome, Firefox, & IE9, but not in IE7.

Any idea how to get this working there? It's unfortunate, but we're a B2B and require IE7 support.

Thanks in advance.

Solution

  • Instead of updating the stylesheet, remove it from the DOM and insert a new one. This should trigger a full re-rendering of the page.