Display HTML formatted text in div after retrieving from DB via AJAX

Posted on 2008-11-03
Last Modified: 2012-05-05
Hi Experts,

I've probably done the hardest part of my spec but mind's boggled by something very strange. I'll explain:

I have a simple cfm page with a div and a textarea, plus AJAX code. The idea is when a user type something into the text area and presses 'add' it does so through AJAX, and then displays the results in the div's innerhtml.

All this works fine.

The problem is when i update div with a new note, i want to add some HTML (<br> & <font>) around parts of the text.

This gets updated to the database fine but when i get it back and display it in the div, it displays it with all the HTML tags around it! ie: <br> will be displayed as <br> not an actual line break!

The weird thing is, when i run this on my machine at home, using 'longtext' data type in MYSQL it works fine. But when i run it at work, storing the data in a 'ntext' field on MSSQL, it displays the HTML code!

Please can some one tell me how to ensure the HTML returned from the db is displayed as HTML?

When i put <pre> tags around it, it just displays as pure text!

Do i need to encode/decode? serialize/deserialize?

Please give code as examples and tell me hy it would work at hme but not work?

Thanks a million!
Question by:cfmalik
    LVL 29

    Expert Comment

    when you view the html source are you seeing <br> or are you seeing & lt; br & gt;  ?What is actually stored in the DB?Is ntext not binary? I have no idea if this would have affect on your data (in relation to your problem). Have you tried nvarchar or even varchar?
    LVL 29

    Expert Comment


    Author Comment

    this is how it is saving in db:
    hiii (Modified by: Test Comms on 3/11/2008 17:10:43) <br>hi again (Modified by: Test Comms on 3/11/2008 17:11:4)

    and this is how it is also displaying on the page, not html escaped (& lt; br & gt;)

    How can i ensure the <br> is actually a line break?

    Author Comment

    sorry, just checked again and it saves in db as & lt; br & gt;

    but when the variable is put in between <cfoutput> tags, it shows <br>

    Accepted Solution

    Dont worry guys, found my answer:

    as i said, it was escaping the html tags and storing them in db, when brought back from db, i just did the following to the variable;

    <cfset tempnotes = "#Replace(rs_Notes,"<","<","All")#">
    <cfset tempnotes = "#Replace(tempnotes,">",">","All")#">

    and this to the ajax response text;

          var reponsetxt = oXmlHttp.responseText;
          reponsetxt = reponsetxt.replace(/</g, "<");
          reponsetxt = reponsetxt.replace(/>/g, ">");

    This has fixed it!

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    JSON is being used more and more, besides XML, and you surely wanted to parse the data out into SQL instead of doing it in some Javascript. The below function in SQL Server can do the job for you, returning a quick table with the parsed data.
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    Viewers will learn how to use the UPDATE and DELETE statements to change or remove existing data from their tables. Make a table: Update a specific column given a specific row using the UPDATE statement: Remove a set of values using the DELETE s…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now