AJAX and HTML entities

I am using AJAX to request data from a database. The data retrieved is a string that contains HTML tags. Here is an example:

Bill<br />
Tom<br />
Steve<br />
Joe<br />

Code (markup):

After the data is retrieved, I'm placing it in a <div> container using the innerHtml property.

The problem is that the HTML tags are being converted to HTML entities in the process.

Here is what they look like after they are received:

Bill<br />
Tom<br />
Steve<br />
Joe<br />

Code (markup):

Is there anyway that I can avoid this conversion process? I would like the string to retain its HTML characters.

When I access the data without using AJAX methods, everything works just fine.

Thanks in advance.

 

IMO you'll need to do it manually with Javascript, because as you said data received through AJAX has been converted yet.
One solution could be using the "replace" javascript function (called several times for each entity) before the assignment to your innerHtml.

 

Thanks for the reply. I'm a bit new to AJAX. So let me make sure that I understand completely.

All strings received through AJAX that have HTML in them will have the HTML converted to their HTML entities. Is that correct?

 

Well, the reason is that the format used to transfer data through AJAX is with XML format, and in that format you can't place some characters like '<', '>', '&', etc.
If you put those characters the XML is invalid, so those characters must be placed using entities or other formats as hexadecimal: &#3C ; &#3E ; &#26; ...

 

You can convert html entities back to original form.
Use PHP html_entity_decode($yourString) function

 

Thanks for the explanation. I'll keep that in consideration while I do my coding. It is things like this that make learning something new quite difficult. It is such an easy thing for people who already know, that it is usually difficult to find this info out there.

Unfortunately, I'm using ColdFusion for this project, and it doesn't have a function similar to html_entity_decode($yourString). However, based on the information I have now, I think it would always be best to send lists of information over in a comma delimited format, and then have the JavaScript handle the replacing the commas with HTML tags.

 

Heh, comma delimited.

You could (heaven forbid!) send the data over in some kind of universal XML format, then have javascript navigate through the returned tree.

For example:

<names>
<name>Bill</name>
<name>Tom</name>
<name>Steve</name>
<name>Jo</name>
</names>

Code (xml):

// put this in usual callback function
var div = document.getElementById('myDiv');
var names = responseXML.getElementsByTagName( 'names' );

foreach( var i = 0; i < names.length; i++ ) {
     div.innerHTML += names[i].getElementsByTagName( 'name' )[0].firstChild.data + "<br />\r\n";
}

Code (javascript):

 

You shouldn't use that function to return data to the AJAX query because those characters (&, <, >, ...) are not allowed if XML format.