Single & double quotes problem when using AJAX inplace editor

Ok this is a long shot and I'll try and make sense here - apologies for the massive post and for adding to the many existing posts on problems with single/double quotes already out there, but I'm really stuck with this one.

I've developed an area of a school's website where teachers can create homework tasks, and after some initial difficulties with both single and double quotes being used by teachers, I'm using the following process:

To prepare for saving to the database...


$task = mysql_real_escape_string($_POST['task']);
$instructions = mysql_real_escape_string($_POST['instructions']);

Then, after having problems displaying data containing single and double quotes, I used the htmlentities approach, which works perfectly fine:


<td><span id='topic-|||-$id' class='editText'>".htmlentities($row['topic'], ENT_QUOTES)."</span>&nbsp;</td>
<td><span id='instructions-|||-$id' class='editText'>".htmlentities($row['instructions'], ENT_QUOTES)."</span>&nbsp;</td>

I now have another problem. To make the homework data as user friendly as possible, I used an AJAX in-place editor which allows teachers to directly edit content within the table, without having to go to a separate edit page.
When a teacher clicks on a cell, the AJAX script takes the value of the selected cell and places it in an editable textfield - at this point, if there are single and double quotes in the data, i have a problem in that the data in the textfield is cut off at the offending quote.
The javascript which creates the textfield is :


actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";

Then when the teacher is finished editing in the textfield, a php script is called by the AJAX script to update the database with the new value retrieved from the text field, which processes the data in the same manner as before:


//preparing for database entry
$content = mysql_real_escape_string($_GET['content']);
....the sql etc
//then returning the result to the page
if($updateQuery) echo htmlentities($content, ENT_QUOTES).";

But what happens is that slashes are added for any quotes present in the data, and I don't understand why this is working differently here from the earlier example above.

So an example of the problem would be as follows:

1.Teacher creates new homework task, one of the entries contains the following string:
Some instructions's"s

2. This entry is saved correctly into the database, and by using htmlentities when retrieving it - it is displayed as follows on the webpage:
Some instructions's"s [source: Some instruction's&quot;s]

3. The teacher wants to edit this data directly using the inplace editor. By clicking on this entry, a textfield is created containing the following:
Some instructions's (cut off at the double quote)

4. The teacher clicks away from the textfield, which calls the php script to save the data. The following is the saved result:
Some instruction\'s

If anyone reads as far as this, then thanks for your patience! Any help would be massively appreciated.

What is happening is that your actual.innerHTML has the quotes in it, and thus cutting it off, i.e. you're getting a value like value="instruction's"s". You need actual.innerHTML's text to be converted to html entities when displaying. Then, when you go to store it in the DB, you need to reverse the entities back to their actual representations.

As for the slash before the single quote, you need to find what is causing that in your AJAX. Look in the generated source of your AJAX to see if actual.innerHTML is returning the value with the slash. If it is, when you use mysql_real_escape_string, it's escaping a slash that's already there, i.e. value="instruction\'s"s". With a value like that in your javascript, the "s is cut off, and the single quote is displayed without the slash, but when storing in the DB, it stores the slash with it, and thus mysql_real_escape_string escapes the string like so: instruction\\\'s

-Shane

What is happening is that your actual.innerHTML has the quotes in it, and thus cutting it off, i.e. you're getting a value like value="instruction's"s". You need actual.innerHTML's text to be converted to html entities when displaying. Then, when you go to store it in the DB, you need to reverse the entities back to their actual representations.

As for the slash before the single quote, you need to find what is causing that in your AJAX. Look in the generated source of your AJAX to see if actual.innerHTML is returning the value with the slash. If it is, when you use mysql_real_escape_string, it's escaping a slash that's already there, i.e. value="instruction\'s"s". With a value like that in your javascript, the "s is cut off, and the single quote is displayed without the slash, but when storing in the DB, it stores the slash with it, and thus mysql_real_escape_string escapes the string like so: instruction\\\'s

-Shane

Thanks for the reply Shane. I've managed to sort out the slashes issue by doing the following when my php update script is being called by the ajax script - not sure if it's the best way but it's working for now :

//content passed from AJAX script
$content = $_GET['content'];
//update db.....
//return html encoded content
if($updateQuery) echo stripslashes(htmlentities($content, ENT_QUOTES));


The problem I still have is with the javascript cutting off my text at the double quote, which means that if a teacher wants to edit something on the fly, when they click on a table cell they wish to edit, the text which appears in the textfield will cut off at any double quotes.

This is probably more of a javascript issue now, any ideas how to encode the actual.innerHTML content to prevent this happening?