CODEWITHSUNDEEP
javascripthtmlajax
ritesh
ritesh

Reputation: 229

Render HTML returned through AJAX call in JavaScript

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);

Upvotes: 0

Views: 2603

Answers (3)

Ashish Chopra
Ashish Chopra

Reputation: 1449

df.innerHTML = data;

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

innerText will just display HTML code as normal text.

Upvotes: 0

Christian-G
Christian-G

Reputation: 2361

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>

Upvotes: 2

Evan Trimboli
Evan Trimboli

Reputation: 30092

You should use df.innerHTML = data;

innerText just gets/sets the value as plain text.

Upvotes: 3

Related Questions