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.

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

Answer 2

I actually tried that. I got this working using php, but the person I'm working with wanted straight html so they could view it in frontpage if they needed....

I'm trying to decide if it can be done.

Answer 3

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.

Answer 4

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.

Answer 5

responsText is the contents of the file which does have html tags in it. What's strange is that it actually works on my pc when I view it, but when I put the page on the server it doesn't work.

Answer 6

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

Answer 7

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?

Answer 8

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.

Answer 9

The contents is the text from a TXT file, that has some html tags in it. The text in the TXT file is formatted the way we want it to be.

Answer 10

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

Answer 11

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?