Question

Code below is supposed to append a textarea onto a div, with the contents of the div going into the textbox (the <?php echo $section[foo]; ?> parts). The main & sidebar parts work as expected, but the 3 footer parts throw an Uncaught SyntaxError: Unexpected token ILLEGAL message. They use exactly the same code, bar the PHP array name (copied + pasted exactly). Any ideas?

        <script>
        function textarea(location,text)
        {
            window.alert(location);
            var textarea=document.createElement("textarea");
            var node=document.createTextNode(text);
            textarea.appendChild(node);
            var element=document.getElementById(location);
            element.appendChild(textarea);
        }
        </script>

               <div id="main">
                    <span onclick="textarea(this.parentNode.id,'<?php echo htmlentities($section['main']);?>');" class="edit"><img src="images/edit.png" alt="Edit" /> Edit Section</span>
                    <?php echo $section['main']; ?>
                </div>
                <div id="sidebar">
                    <span onclick="textarea(this.parentNode.id,'<?php echo htmlentities($section['sidebar']);?>');" class="edit"><img src="images/edit.png" alt="Edit" /> Edit Section</span>
                    <?php echo $section['sidebar']; ?>
                </div>

               <div id="left_column">
                    <span onclick="textarea(this.parentNode.id,'<?php echo htmlentities($section['footer_left']);?>');" class="edit"><img src="images/edit.png" alt="Edit" /> Edit Section</span>
                    <?php echo $section['footer_left']; ?>
                </div>
                <div id="right_column_outer">
                    <div id="right_column_left">
                        <span onclick="textarea(this.parentNode.id,'<?php echo htmlentities($section['footer_middle']);?>');" class="edit"><img src="images/edit.png" alt="Edit" /> Edit Section</span>
                        <?php echo $section['footer_middle']; ?>
                    </div>
                    <div id="right_column_right">
                        <span onclick="textarea(this.parentNode.id,'<?php echo htmlentities($section['footer_right']);?>');" class="edit"><img src="images/edit.png" alt="Edit" /> Edit Section</span>
                        <?php echo $section['footer_right']; ?>
                    </div>
                </div>

The full array. I didn’t write the HTML markup here (NicEdit generated)

array(5) {
  ["footer_left"]=>
  string(365) "<h2 class="article">About</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed justo in quam scelerisque pellentesque. Suspendisse erat tellus, sagittis eu venenatis non, eleifend vel arcu. Sed tempus magna sit amet nisi euismod ac cursus turpis faucibus. In eget nulla quam. Donec sagittis facilisis leo at porta. In libero lorem, aliquet vel vehicula a, fringilla ut odio. Praesent tincidunt porta hendrerit. Donec interdum augue eu nunc elementum bibendum. Etiam feugiat rhoncus quam, quis tincidunt justo imperdiet non. Donec bibendum congue arcu. Cras sollicitudin turpis ut tellus vehicula non ornare leo consectetur. Suspendisse dignissim faucibus felis non tempor. Mauris venenatis lorem in turpis facilisis tincidunt. Proin gravida, quam id ultrices ullamcorper, augue dolor porta massa, iaculis rhoncus felis purus quis diam. Morbi ultrices ultricies ipsum id placerat."
  ["footer_middle"]=>
  string(424) "<h2 class="article">Location</h2>
                        <iframe id="location_map" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=narre+warren&amp;aq=&amp;sll=-37.916385,145.019321&amp;sspn=0.057691,0.132093&amp;ie=UTF8&amp;hq=&amp;hnear=Melbourne+Victoria,+Australia&amp;t=m&amp;z=13&amp;ll=-38.027115,145.30304&amp;output=embed"></iframe>"
  ["footer_right"]=>
  string(294) "<h2 class="article">Contact</h2>
                        <strong>Skype:</strong> <a href="skype:sample?call">sample</a><br />
                        <strong>Phone Number:</strong> 999999999<br />
                        <strong>Email:</strong> <img id="email_address" src="images/email.png" alt="Email Address" />"
  ["main"]=>
  string(66) "<b>Hello. </b><i>This is sam </i><u>Testing this website&nbsp;</u>"
  ["sidebar"]=>
  string(721) "<blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><div style=\"text-align: right;\"><h5><span style=\"font-family: \'courier new\'; font-size: xx-large;\">This should all be right aligned.d</span></h5></div></blockquote></blockquote><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><div style=\"text-align: right;\"><h5><span style=\"font-family: \'courier new\'; font-size: xx-large;\">I don\'t think lists work.</span></h5></div></blockquote></blockquote></blockquote>"
}

Thankyou in advance.

EDIT: Here’s the jsfiddle > it works as intended now (click on the ‘edit sections’, it is supposed to alert you what the parent div id is, and then add a text box with the contents of that div is) that I’ve taken out the PHP…I wonder why this isn’t working within my website.

Answer 1

so i updated your fiddle. i removed all inline javascript, added jQuery and a click handler to all spans with the class ‘edit’. see that i added a div-wrapper with the class ‘.content’ to make it easier to retrieve the html.

your js then is as short as that:

$(document).ready(function () {
  var $parent;
  $('span.edit').on('click', function () {
    $parent = $(this).parent();
    $parent.append('<textarea>' + $parent.find('.content').html() + '</textarea>');
  });
});

updated fiddle is here: http://jsfiddle.net/fXPkQ/1/