0

I have now spent literally days trying to debug a simple replace in javascript and it is driving me crazy. Would appreciate any help.

When I create a simple html file with a javascript function in the header and call to function in body, I can grab the contents of an element and replace certain characters of innerHTML such as line breaks using replace method. I can also do this with jsfiddle.

toedit = toedit.replace(/\n/g, '<br />');

However, in the actual application where I want to use it, where the script is in the header of the page and the html is placed in a div on the page through some ajax, it fails. Can anyone spot problem?

Following works in HTML page or JSFiddle

<html>
    <head>
    <script type="text/javascript">
    function editText(editThis)
      {
    alert(editThis);
    //alert("hi");
    var toedit = document.getElementById(editThis).innerHTML;
 //       alert(toedit);
    toedit = toedit.replace(/\n/g, '<br />');
    alert(toedit);
      }
    </script>
    </head>
    <body>
    <textarea id="text" name="text" rows=9 cols=30 placeholder="Type Notes">A whole bunch
     of text with
     line breaks goes here</textarea><a href="#" onclick="editText('text');return false;">edit</a>
    </body>
    </html>

Following script does not run with line that has * next to id. Does work with that line deleted. Script breaks when line merely commented out.

In header of page:

 <script type="text/javascript">
    function editText(editThis)
      {
         alert(editThis);
         //alert("hi");
         var toedit = document.getElementById(editThis).innerHTML;
         alert(toedit);
         toedit = toedit.replace(/\n/g, '<br />'); //****problem line
         alert(toedit);
      }
    </script>

//following function called from page, fills div with html that includes link to above js

function loadSteps(id) 
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("stepsDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getsteps.php?id="+id,true);
xmlhttp.send();
} //end function

getsteps.php called from above js function

echo '<textarea id="text" rows=9 cols=30 placeholder="Type text">'.$text.'</textarea><a href="#" onclick="editText(\'text\');return false">edit</a>
user1904273
  • 4,562
  • 11
  • 45
  • 96
  • You have `alert(to edit);` which should be `alert(toedit)` in your first code sample... I don't suppose that's causing the problem? (As you say it works fine in [jsfiddle](http://jsfiddle.net/a8Rmc/). Also, according to [this answer](http://stackoverflow.com/questions/5314186/javascript-get-textarea-input-via-value-or-innerhtml), you should use .value instead of .innerHTML for a textarea – Stuart Dec 28 '12 at 02:40
  • hi, I fixed the alert typo. I thought it might be value to but innerHTML does work in test and value does not work in real environment. – user1904273 Dec 28 '12 at 02:58
  • 1
    is your whole page generated by PHP or just the textarea bit? Have you checked what is being generated, e.g. using Inspect element in Chrome? – Stuart Dec 28 '12 at 03:01
  • The element looked ok in ff--I don't have chrome on this machine--however I think I narrowed down the problem. If I take the \n out of the replace it does not crash. So maybe I need to escepat that or something... – user1904273 Dec 28 '12 at 03:11
  • 1
    Yep, if your javascript originates in a PHP programme then you may need to escape the \n as \\n – Stuart Dec 28 '12 at 03:25
  • OK. Got it to work. Problem was I needed to add an extra backslash to escape \n so I used toedit = toedit.replace(/\\n/g, '
    '); No idea why extra \ is necessary in my environment but not in the jsfiddle or in a simple html file but anyway got it to work. Thanks for inspiration all.     – user1904273 Dec 28 '12 at 03:26

2 Answers2

0

You are setting a variable which is a copy of the innerHTML, you need to actually update the innerHTML directly

  document.getElementById(editThis).innerHTML=toedit;//once you've done your replace

But why do you set the innerHTML at all in the onreadystatechange before doing your
replace(/\n/g, '
')

Once it's in the HTML, it may not preserve line breaks.

.responseText.replace(/\n/g, '<br />')

Or

.responseText.replace(/\r\n/g, '<br />')
chwagssd
  • 181
  • 6
  • In the onclick function, the OP is trying to manipulate the text inside the textarea inside the div with id 'stepsDiv' whose innerHTML was set earlier in onreadystatechange. – Stuart Dec 28 '12 at 03:09
0

Your problem lies on the following line:

var toedit = document.getElementById(editThis).innerHTML;

You are grabbing the innerHTML of the DOM object, namely the text area with id "text". The innerHTML of this object has not been updated. What you need instead is the value of the text area which will give you the actual text that was typed in the text area. Change the above mentioned line to the following:

var toedit = document.getElementById(editThis).value;

That should fix your problem! Happy Coding!

Jeremy
  • 771
  • 6
  • 15