Nested textareas

Discussion in 'HTML & Website Design' started by Tim_Myth, Dec 2, 2008.

  1. #1
    I'm working on a template for one of my WhyPark sites, and if I enter a textarea tag into the page layout box, save it, then go back to the layout editor page, the page layout box ends prematurely and parts of my template show up on the layout page. In otherwords, their page has a textarea where I am supposed to enter the html for my template. My template includes a textarea as well. If I paste my template into their textarea, save it, then come back to look at my template, my textarea closes their textarea. So:
    
    Top part of WhyPark template layout page
    <textarea>
      Top part of my template
      <textarea>
        Some text in my text box
      </textarea> <-- THIS CLOSES THEIR TEXTAREA TAG
      Bottom of my template
    </textarea>
    Bottom part of WhyPark template layout page
    
    HTML:
    I know I can get around this by doing something like this:
    
    Top part of WhyPark template layout page
    <textarea>
      Top part of my template
      <textarea>
        Some text in my text box
        <script type="text/javascript>
          document.write('</text' + 'area>');
        </script>
      Bottom of my template
    </textarea>
    
    Code (markup):
    Any other way of bypassing this limitation?
     
    Tim_Myth, Dec 2, 2008 IP
  2. i.run.shit

    i.run.shit Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If the initial textarea tag in your first code is your example of the editor textarea, then you really need to take it up with the person who coded the page with the editor on it. Why not check out the code for the editor itself and see if you can find any flaws in the code itself that would cause this issue. It sure is an odd one. Maybe it's because you're not using the <form> tag before and after the textarea code?
     
    i.run.shit, Dec 2, 2008 IP
    Tim_Myth likes this.
  3. Tim_Myth

    Tim_Myth Peon

    Messages:
    741
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It's not an issue with their editor because this code performs exactly the same way:
    <html>
    <body>
    Top part of WhyPark template layout page<br />
    <textarea>
      Top part of my template<br />
      <form>
        <textarea>
          Some text in my text box
        </textarea><-- THIS CLOSES THEIR TEXTAREA TAG (You should see a closing textarea tag in the text box instead of this line appearing below a text box)
      </form><br />
      Bottom of my template<br />
      And As you see, wrapping a form tag around it doesn't work either. :(<br />
    </textarea><br />
    Bottom part of WhyPark template layout page<br />
    </body>
    </html>
    HTML:
    Their "editor" by the way is a simple textarea. It isn't a wysiwyg like fck or tinymce.

    I think this is a "feature" of textareas. :(
     
    Tim_Myth, Dec 2, 2008 IP
  4. i.run.shit

    i.run.shit Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can't nest textareas. You can not put a textarea within a textarea.
     
    i.run.shit, Dec 2, 2008 IP
  5. Tim_Myth

    Tim_Myth Peon

    Messages:
    741
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah, I figured as much. :( I've asked WhyPark to implement a fix, and I even came up with a possible solution. Now we'll see if they use it.
    <html>
    <body onload="unencode_form();">
    <p>Top part of WhyPark template layout page<br />
    Notice how the textarea is not actually part of the form and that it arrives at the browser without the template.<br />
    We actually transport the template to and from the server in the hidden text field.<br />
    We encode it before shipping simply to ensure it does not "break" the webpage at any point and that spacing is maintained. We also must save the line breaks.</p>
    
    <textarea id="layout" rows="20" cols="100">
      You must have javascript enabled in order to use the editor.
    </textarea><br />
    <p>Bottom part of WhyPark template layout page<br />
    When the template comes back from the server, we decode it and put it in the textarea once again.<br />
    After the user is finished editing it and clicks the save button, we encode it and submit the form.</p>
    
    <form name="template_submit" action="save_temnplate.php">
      <input type="hidden" id="encoded_layout" value="Top%20part%20of%20my%20template<br%20/>%20##crlf##%20<textarea>%20##crlf##%20%20%20%20Some%20text%20in%20my%20text%20box%20##crlf##%20</textarea><br%20/>%20##crlf##%20<--%20THIS%20CLOSES%20THEIR%20TEXTAREA%20TAG<br%20/>Bottom%20of%20my%20template<br%20/>" /><br />
      <input type="submit" id="submit" value="Save" onclick="encode_form();" />
    </form>
    
    <script type="text/javascript">
    function encode_form() {
      var strLayoutHTML = document.getElementById("layout").innerHTML;
      var strEncodedLayout = escape(strLayoutHTML.replace(new RegExp("\\n", "g"), " ##crlf## "));
      document.getElementById("encoded_layout").setAttribute("value", strEncodedLayout);
      document.forms("template_submit").submit();
    }
    
    function unencode_form() {
      var strEncodedLayout = unescape(document.getElementById("encoded_layout").getAttribute("value"));
      var strLayoutHTML = unescape(strEncodedLayout.replace(new RegExp(" ##crlf## ", "g"), "\n"));
      var myLayout = document.getElementById("layout");
      if (document.selection) { 
        myLayout.focus();
        sel = document.selection.createRange(); 
        sel.text = strLayoutHTML;
      } else if (myLayout.selectionStart || myLayout.selectionStart == '0') {
        var startPos = myLayout.selectionStart; 
        var endPos = myLayout.selectionEnd; 
        myLayout.value = myLayout.value.substring(0, startPos)+ strLayoutHTML+ myLayout.value.substring(endPos, myLayout.value.length); 
      } else {
        myLayout.value += strLayoutHTML;
      }
    }
    </script>
    
    </body>
    </html>
    
    Code (markup):
     
    Tim_Myth, Dec 2, 2008 IP
  6. i.run.shit

    i.run.shit Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Why exactly, may I ask, would you want nested textareas anyway?
     
    i.run.shit, Dec 2, 2008 IP
  7. Tim_Myth

    Tim_Myth Peon

    Messages:
    741
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I don't really want to nest textareas, I am forced to nest textareas. WhyPark is a domain hosting service that is kind of like a CMS. In my admin control panel, I can create a template for my site (the default choices really look cookie cutter made). The box I enter my templates code in is a textarea. If my template also contains a textarea, I end up nesting text areas. If you visit my site, www.timmyth.com, you'll see the text box on the right that has teh code for my rss feed widget. That bit is part of my template. Now if I want to go back and edit my template, I'm a little screwed because the textarea I used to display my widget code breaks the textarea they give me for editing my template. *shrug*
     
    Tim_Myth, Dec 2, 2008 IP