Format lost after putting text in div (IE) using jQuery

**method8** · 09-23-2009 05:25 PM

Dear all,

I came across the following problem.

I'm switching formatted text (programming code) between a pre and a text area, programmatically using jQuery. Since I'm using a syntax highlighter on the pre, I'm also putting a copy of the code in an invisible div to use it as a temporary store before moving the code back undistorted to the textarea.

Code:

<pre> </pre>
<textarea> </textarea>
<div style="display:none"></div>

It works beautifully everywhere except on any version of IE. Transferring the text out of the div (using .html() on jQuery) removes all sorts of formatting from IE. Any ideas or workarounds you know about are appreciated.

I feel that some sort of escaping is involved but don't know how or why.

Cheers!

**method8** · 09-24-2009 06:33 AM

I wrote this small piece of code to show you better what I mean. Try putting in text with spaces etc, in your code in IE and other browsers. It keeps the formatting (spaces and tabs etc) in Firefox but not in IE.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#switch").click(function() {
                if ($(this).attr("value") == "div") {
                    $(this).attr("value", "textarea");
                    $("#mydiv").html($("#mytextarea").val());
                    $("#mytextarea").val("");
                } else {
                    $(this).attr("value", "div");
                    $("#mytextarea").val($("#mydiv").html());
                    $("#mydiv").html("");
                }
            });
        });
    </script>
</head>
<body>
    <textarea cols="20" rows="20" id="mytextarea" style="width:200px; height:200px"></textarea>            
    <div id="mydiv" style="width:200px;height:200px"></div>
    <input type="submit" value="div" id="switch" />    
</body>
</html>

**method8** · 09-24-2009 06:37 AM

Dear All,

I finally managed to sort it. It was in fact related to escaping. Escaping the code before and unescaping afterwards helps solve the problem across the browsers including Internet Explorer. Here's the corrected version of my example snippet

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#switch").click(function() {
                if ($(this).attr("value") == "div") {
                    $(this).attr("value", "textarea");
                    $("#mydiv").html(escape($("#mytextarea").val()));
                    $("#mytextarea").val("");
                } else {
                    $(this).attr("value", "div");
                    $("#mytextarea").val(unescape($("#mydiv").html()));
                    $("#mydiv").html("");
                }
            });
        });
    </script>
</head>
<body>
    <textarea cols="20" rows="20" id="mytextarea" style="width:200px; height:200px"></textarea>            
    <div id="mydiv" style="width:200px;height:200px"></div>
    <input type="submit" value="div" id="switch" />    
</body>
</html>

Thread: Format lost after putting text in div (IE) using jQuery

Thread Tools

Display

Format lost after putting text in div (IE) using jQuery

Format problems under IE divs and textarea

Escaing and IE

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions