Render HTML returned through AJAX call in JavaScript

Question

I am a complete novice in the JavaScript and AJAX stuff. I am trying to make a call to the server using AJAX and display the returned HTML. However instead of rendering the HTML, the browser displays the HTML code. I am not using JQuery and I would prefer not using it (an acute shortage of time and my complete unfamiliarity with JQuery are two major reasons for sticking to basic JavaScript). Is there some way to render the HTML as it is supposed to be using just the basic JavaScript. Here is my code

function gotoNext(button){
try {
    xmlHttp = new XMLHttpRequest ();
}
catch (e) {
    try {
        xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
    }
    catch (el) {
        try {
            xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (el1) {
            alert ("Your browser does not support AJAX! Please use a compatible browser!!");
        }
    }
}

xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var df = document.getElementById ("dataForm");
        var data = xmlHttp.responseText;
        df.innerText = data;
    }       
};

var id = document.editEnv.id.value;
var sId = document.editEnv.sId.value;
var fileName = document.editEnv.fileName.value;
var group = document.editEnv.group.value;

xmlHttp.open("POST", "newData.jsp", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send ("flag=" + flag + "&id=" + id + "&sId=" + sId + "&fileName=" + fileName + "&group=" + group);

Evan Trimboli · Accepted Answer · 2013-04-14 09:09:16Z

3

You should use df.innerHTML = data;

innerText just gets/sets the value as plain text.

answered Apr 14, 2013 at 9:09

Evan Trimboli

30.1k6 gold badges49 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian-G · Accepted Answer · 2013-04-14 09:09:26Z

2

You can try to replace innerText with innerHTML The difference lies in the fact that innerText doesn't include any HTML tags whereas innerHTML does. For example

Here is a <a href="what.html">link</a>

will display:

Here is a link

if you call innerText on it. However, if you call it with innerHTML it will display:

Here is a <a href="what.html">link</a>

answered Apr 14, 2013 at 9:09

Christian-G

2,3614 gold badges28 silver badges47 bronze badges

1 Comment

ritesh Over a year ago

Thanks a lot! That worked! But shouldn't it be the other way round - the first one will be displayed by innerHTML and the second one by innerText?

Ashish Chopra · Accepted Answer · 2013-04-14 09:14:40Z

0

df.innerHTML = data;

should work!! Because using innerHTML will render that html on browser.

innerText will just display HTML code as normal text.

answered Apr 14, 2013 at 9:14

Ashish Chopra

1,4599 silver badges24 bronze badges

Collectives™ on Stack Overflow

Render HTML returned through AJAX call in JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related