www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Sep 2009
    Posts
    5

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

    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!

  2. #2
    Join Date
    Sep 2009
    Posts
    5

    Format problems under IE divs and textarea

    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>

  3. #3
    Join Date
    Sep 2009
    Posts
    5

    Escaing and IE

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles