views:

322

answers:

3

After pressing a button, I'm sending the whole HTML content from a webpage (the part within the <html> tags) to a CGI script which manipulates the content and sends it back.

Now I'm trying to replace the existing content with the new one. Unfortunately after assignment, every single <head> or <body> tag (as well as the closing ones) will be killed.

By using some alerts I looked through the returning value as well as the original HTML stuff. Both are absolutely as expected.

But after the assignment there is some magic going on. Please help me to figure out what's going on.

Here is the used JavaScript code I used:

var originalBodyInnerHTML = document.body.innerHTML;
var htmlNode = document.getElementsByTagName('html')[0];
var post_parameters = encodeURIComponent(htmlNode.innerHTML);

makePOSTRequest("POST", "http://whatever.com/cgi-bin/doit.cgi", post_parameters, htmlNode);

function makePOSTRequest(method, url, parameters, htmlNode) {
  var http_request = getRequestObj();

  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
  }

  http_request.onreadystatechange = function() 
  {
     if (http_request.readyState < 4)
     {
        var waitingPageBody = '< img src="/img/ajaxloader.gif" alt="in progress..."/>';
        document.body.innerHTML = waitingPageBody;
     }
     else //if (http_request.readyState == 4)
     {
        if (http_request.status == 200)
        {
           alert('1response: ' + http_request.responseText);
           alert('2innerhtml: ' + document.getElementsByTagName('html')[0].innerHTML);
           document.getElementsByTagName('html')[0].innerHTML = http_request.responseText;
        }//end of if (http_request.status == 200)
        else
        {//other http statuses
           alert("There was a problem (" + http_request.statusText + ", " + http_request.status + ' error)');
           bodyNode.innerHTML = originalBodyInnerHTML;
        }
     }//end of else if http_request.readyState == 4
  }

  http_request.open(method, url, true); //async
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Accept", "application/atom+xml,application/xml,text/xml");
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
}

function getRequestObj() {
  var http_request = false;

  if (window.XMLHttpRequest) 
  { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();

     if (http_request.overrideMimeType) 
     {
       http_request.overrideMimeType('text/html');
      }
  } 
  else if (window.ActiveXObject) 
  { // IE
     try { 
       http_request = new ActiveXObject("Msxml2.XMLHTTP");  
     } 
     catch (e) 
     {
        try {
          http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch (e) {}
     }
  }

  return http_request;
}
+1  A: 

well, with this

document.getElementsByTagName('html')[0].innerHTML = http_request.responseText

you are replacing everything insidee the html, "killing" body, head and everything... maybe you wanted

document.body.innerHTML = http_request.responseText

Also, I'd use jquery, it makes your life sooo much easier

Victor
+1 for jquery advice
nexneo
yes im replacing everything. but the response from the server includes those tags already. so replacing would be exactly what i need. unfortunatelly THIS asignment kills my body and head tags ;(.Sure i also like jquery or prototype, but can't use it in my special context...
dforce
+1  A: 

You cannot do that. It's not possible to replace the contents of the whole html tag. You can get away with replacing only the contents of the body tag. The head element is kind of magical and browser generally don't support replacing it.

If you want to change the whole document, redirect to it.

If you want to change only parts of the head, try sending them in a different form (like JSON), and make appropriate changes using javascript APIs.

qbeuek
A: 

Thanks qbeuek for your answer!

To change only the header, Firefox in fact will allow something like this:

document.getElementsByTagName('head')[0] += "e.g. some scripts"
But for Internet Explorer it is necessary to add each element separately to the DOM tree.

var script = document.createElement("script");
script.setAttribute('type','text/javascript');
objHead.appendChild(script); 

However, it is really weird that Firefox behaves like this and not popup with some error...

dforce
If you liked my answer, please accept it :-)
qbeuek