AJAX (IE 6.0) responseText partially disappear?

[ManWithNoName]

I hate to bug you guys with more of my problems but IE is trying to make me climb my walls for the past several hours...

I thought I just explain the problem and if it sounds familiar I could get some clues on what to search for.

I haved used a simple XhttpRequest, POST method, for a good while now, and it worked fine both in IE and FF.

function XR( uses POST ) // called form ajax.js

document.onchange = function(){ does stuff, then calls XR and sends data back to database; database returns a string containing basic html  } // called from sendStuff.js

Now I wanted to use the same XR function again in another function, on the same page:

function A() { does some stuff, then calls XR and sends more stuff back to database; database returns a string containing basic html

The html string is returned as a js var and is eval'd, which js then picks up and prints out.

All functions are run on the same page.

The first function (the anonymous one) works in all browsers IE, FF and Opera. And all is good. The second function however only works in FF and Opera; IE is giving me some weird vibes.

I've used bugzilla, venkman and operas debugger, but none of them gave any error messages, and I don't know where to look besides that.

IE debugger higlights three instances in the code and tells me that an unexpected error has occured etc, but it doesn't provide any further (useful) information. I have however "pin pointed" the problem down to the last line in the second function, and it is one of the weirdest problems I have encountered hitherto.

The two variables that are passed back from PHP to the JS are safely returned. One of them however is, how should I put it, twisted and turned to something evil; the second variable is suppose to be something like this:

[HTML]
<element1>
<element2>
<element3>(...) </element3>
<element3>(...) </element3>
<element3>(...) </element3>
</element2>
</element1>
[/HTML]

But only element 1 and 2 are returned ??? !!! I don't get it?! Why?

And why can't explorer print that as is? Why does it respond with a fatal error?

I'm going nuts over here... Why doesn't FF and Opera, or Venkman tell me anything?

Forgot: the error occurs when the god forsaken js var (which contains basic html elements) is trying to replace the innerHTML of another element on the page.

[acoder]

Can you show the code and how/when it's called or a test link, if possible?

[ManWithNoName]

The code

(thanks for your reply :D)

Here is the code:

The XhttpRequestObj ect loader

function XhttpRequest() {
  var XhttpRequestObject=null;
    try { // FIREFOX | OPERA 8.0+ | SAFARI
      XhttpRequestObject=new XMLHttpRequest();
    }
    catch (e) { // INTERNET EXPLORE
      try {
        XhttpRequestObject=new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch (e) {
        try {
          XhttpRequestObject=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (e) {
          alert('error');
          return false;
        }
      }
    }
    return XhttpRequestObject;
}

The XhttpRequest fn

function XhttpRequestPHP(POST){
  var XhttpRequestObject=new XhttpRequest();
  XhttpRequestObject.open('POST','/ajax.php',true);
  XhttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhttpRequestObject.setRequestHeader("Content-length",POST.length);
  XhttpRequestObject.send(POST);

  XhttpRequestObject.onreadystatechange = function() { 
    switch(XhttpRequestObject.readyState) {
      case 0: // REQUEST NOT INITIALIZED
        alert('error');
        return false;
        break;
      case 1: // REQUEST HAS BEEN SET UP
        break;
      case 2: // REQUEST HAS BEEN SENT
        break;
      case 3: // REQUEST IS IN PROCESS
        break;
      case 4: // REQUEST IS COMPLETE
        window.eval(XhttpRequestObject.responseText);
        document.getElementById(ElementId).innerHTML = CallbackString ;
        break;
    }
  } 
}

The function that works

document."onevent" = function(e){
  // event handler; nothing fancy
  // when event
  XhttpRequestPHP('the string to be posted to php');
}

The functions is called when the user clicks on a button. This functionen is not embedded in the html code (and that is why I have a event handler)
I get a back a very complex html element node set, no problems at all.

The function that gives me a problem

function B(ThisObject){
  // do stuff with "this"; extract values etc; nothing fancy
  // post values back as string
  XhttpRequestPHP('the string to be posted to php');		
}

The functions is also called when the user clicks on a button. This function is however embedded in the html (<button onclick="B(this ); />")

This function makes IE throw an error at "document.getEl ementById(Eleme ntId).innerHTML = CallbackString; "

However, when I use the MS debugger "command window" and type "alert(ElementI d)" or "alert(Callback String)" I do get a sucessful answer... Sort of; In the IE window I get the CallbackString alerted it is however only partially returned, and in the IE debugger "command window" I get an "undefined" reponse... So...

An interesting note that I didn't understand, but I know think may have something to do with this: in the MS debugger when it throws an error there is a window called "call stack" and it says (the heading) "running thread (000000A1C) and beneath it is an item: "<JScript> - JScript anonymous function", is it saying that the functions are colliding? 'Cause that would make sense, sort of... I still get the error if I remove the first function...

The only difference between those two functions are otherwise that one is runned anonymously and the other is not...

My head hurts...

[acoder]

Why can't you return the HTML text only from the PHP script instead of a string which has to be eval'd? If responseText contains HTML, you can set it directly to the element using innerHTML.

[ManWithNoName]

Why can't you return the HTML text only from the PHP script instead of a string which has to be eval'd? If responseText contains HTML, you can set it directly to the element using innerHTML.

Thanks for your reply;
if I understand you correctly, I'd say that, the reason I do as I do is because:
sometimes I need to change the content of two elements simultaneously, and then I need to send them back as two different variables. The only reason it needs to eval is because the variables need to be activated as JS var.

But that shouldn't cause any problems. When I

alert(XhttpRequestObject.status); // returns 200
alert(XhttpRequestObject.statusText); // returns OK
alert(XhttpRequestObject.responseText); // returns the partiall html code, i.e. the same code as when "eval'd"

If you mean why I don't do this "return XhttpRequestObj ect.responseTex t", then call it like "var a = XhttpRequestPHP (POST)", I'd have to say that I can't... The result will be "undefined"

I believe the error is either because I run two XhttpRequest functions at the same time, or because the second XhttpRequest is called within a static (declared) function.

Now, I'm no JS expert, but that's the only logical conclusion I can draw, no?

Can't I run my XhttpRequestPHP function as "new XhttpRequestPHP ()"? Is this relevent?

I'm sorry if my conclusion sounds stupid, but I haven't had any time to learn much JS (more advanced stuff anyway).

[ManWithNoName]

I fixed the problem with the "partiall response text"...

It seems that IE (6.0) doesn't accept the html '<button type="submit">I thought I was a button until IE told me otherwise</button>'-tag; you have to use '<input type="submit" value="I am a button" name="button"/>'

I do believe this is a IE 6.0 bug, or "rendering incompetence".

Anyway, the AJAX response is however the same, it refuses to populatet the innerHTML on response... :(

That shuld leave my previous conclusion still valid: the error is because

1. two XhttpRequest functions are run at the same time/page, or
2. the second XhttpRequest is called within a static (declared) function.

Is the answer to this question that I should run my second function as "new XhttpRequestPHP ()"?

Please I'm so close to eternal happiness; prove Buddha wrong, help me.

[acoder]

if I understand you correctly, I'd say that, the reason I do as I do is because:
sometimes I need to change the content of two elements simultaneously, and then I need to send them back as two different variables.

In which case, parse the response. Use a delimiting character and split using the split() method.

I believe the error is either because I run two XhttpRequest functions at the same time

This is probably the cause of the problem. Use a different variable for each request.

[ManWithNoName]

I found the solution... And it had nothing to do with AJAX--go figure.

http://domscripting.com/blog/display/99

It seems that there is a[nother] bug in IE regarding how it handles innerHTML.

You got to love the irony: one of the most popular self-defined functions created by Microsoft which they themselves can't implement properly.

Anyway, I appreciate the time you put down in trying to help me, thanks!

PS. I'm sticking with eval() ;p

[acoder]

A bug in IE6?! Well, I never... ;)

Thanks for posting the solution.