Inserting of file into an html page using Javascript?

Question

I'm currently trying to read text from a file and append it to a element in my html page using the DOM and Javascript. I can't get the text to format though. I've tried using innerHtml but isn't formating at all( no line breaks ).

Here is the javascript:

http = new XMLHttpRequest();
http.open("GET",FILE,false);
http.send();       
document.getElementById("tbody").innerHTML = http.responseText

Like I said the text gets added to the tbody element but isn't formatted what so ever.

I got it working with this code( with the pre tag ), but like I said it works on my pc but not on the server which doesn't help.

           http.open("GET",FILE ,false);
           http.send();
           var newtext = document.createTextNode(http.responseText);
           var para = document.getElementById("tbody");
           para.appendChild(newtext);

Here is all my javascript code:

function getHTTPObject() { var http = false;

/*@cc_on
    @if (@_jscript_version >= 5)
    try
    {
        http = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
            http = false;
        }
    }
    @else
    {
        http = false;
    }
@end @*/

if (!http && typeof XMLHttpRequest != 'undefined')
{
    try
    {
        http = new XMLHttpRequest();
    }
    catch (e)
    {
        http = false;
    }
}
return http

}

    function loadData()
    {

     http = getHTTPObject();

        if (http)
        {
           http.open("GET","my file name",false);
           http.send();
           var newtext = document.createTextNode(http.responseText);
           var para = document.getElementById("tbody");
           para.appendChild(newtext);   
        }
    }

You'll need to give more detail for people to help you further. What exactly are the contents of the response? What does the html you are starting with look like? What's the state of the DOM when you get the request? — rz.
– rz., Commented Dec 8, 2008 at 0:04

sblundy · Accepted Answer · 2008-12-07 23:47:37Z

1

You might have luck wrapping the text in a <pre> tag. What's in the response? If it's XML, you might want to use responseXML.

http = new XMLHttpRequest();
http.open("GET",FILE,false);
http.send();       
document.getElementById("tbody").appendChild(http.responseXML);

answered Dec 7, 2008 at 23:47

sblundy

61.5k22 gold badges124 silver badges124 bronze badges

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

Comments

rz. · Accepted Answer · 2008-12-07 23:54:52Z

1

It all depends in what kind of data is in the response. If it is plain text there is no reason it should be formatted. If you'd like the html to "respect" the whitespace, as suggested above, put the text inside a pre tag.

If the response is html make sure that #tbody is a div or something similar.

You should also look into using something like jquery for your DOM manipulation and ajax. It'll save you headaches with cross-browser compatibility and it is nicer to write.

answered Dec 7, 2008 at 23:54

rz.

20.1k10 gold badges58 silver badges47 bronze badges

Comments

Zagrev · Accepted Answer · 2008-12-08 02:27:17Z

1

I would bet the answer is related to your statement: "It works on my PC but not on the server". I'm guessing that you are having problems because the file doesn't exist on the server, or the path to the file is different. have you checked that the file is sent to your client by trying the URL for the file in the browser directly?

answered Dec 8, 2008 at 2:27

Zagrev

Comments

olliej · Accepted Answer · 2008-12-07 23:51:24Z

0

innerHTML takes (and parses) and html string, so what should result is a DOM tree similar to

(assuming )

<tbody>{responseText}</tbody>

But without knowing what type of content is in the response text it's difficult to know the exact cause of your problem.

answered Dec 7, 2008 at 23:51

olliej

36.9k9 gold badges61 silver badges55 bronze badges

Comments

Chris · Accepted Answer · 2008-12-08 00:11:34Z

0

The reason it works on your PC but not on the server is probably timing. AJAX is asynchronous, but you're treating it like it's synchronous.

answered Dec 8, 2008 at 0:11

Chris

28.1k26 gold badges132 silver badges227 bronze badges

Collectives™ on Stack Overflow

Inserting of file into an html page using Javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related