next »

[ChristFollower]

I have an application that contains several frames (HTML <FRAME> tag). One frame on the left handles menu options and another frame on the right display web application pages. I added Struts actions to the application that's launched from the left frame with a target set to the right frame. Everything works as it is supposed to. I want to avoid the page redraw so I thought of using Ajax to modify the page on the right frame. I re-engineered my application based on this article example (http://today.java.net/lpt/a/236). The "official browser" for the company at this time is IE6. So, basically it calls ActiveXObject("Microsoft.XMLHTTP"); I also added new Struts actions for Ajax calls, by passing in Struts .do as URL to the retrieveURL() function in the Javascript.

Here is my problem. After a Struts action call via Ajax (triggered from the right frame), the right frame was updated correctly. However, it seems to forget that it is a child window and it has a sibling, the left frame. As I click on any link on the left frame, IE6 opens a new window as if the target="right" is not there.

Can anybody think of an explanation and a solution to this problem?

Thanks.

[perkiset]

Yikes... there are so many moving parts in the example and yet so few real symptoms... I don't think that XMLHTTPRequest itself has anything to do with it, because of the way it works... I am inclined to believe that it is Struts, but not being much of a Struts guy I cannot say for sure either.

In any case, I am pretty durn sure that it is not related *directly* to XMLHTTPRequest, although it might be involved in a function or something that makes the ajax call. Another interesting thing is that it might be that Struts (or something) has created another DIV or JS variable with the name "left" or "right" - you might think about renaming them to something clearly unique, like "__MyLeftDiv" and such to see if the symptoms are the same.

/p

[ChristFollower]

Perkiset,

Thank you for your response. I tested the same code with FireFox 2 and it works as it should, just not for IE6. Since IE 6 uses ActiveXObject and FireFox uses XMLHttpRequest, I think it is browser specific and not a Struts problem. Furthermore, the "right" frame that fires off Struts action via Ajax is the same JSP that was called by Struts so all the tags (element IDs, names, etc) are still the same. I just wanted to replace one <TD> content. I will give it a try by renaming "right" to "my_right" to see if that makes any difference.

Thanks again.

[perkiset]

No worries CF -

... what you've offered is an interesting symptom. There are 3 reasons (IME) that something is available in FF but not in IE after an Ajax call:

1) You're trying to access something on the DOM in the same function that it was added to the DOM. In IE, this falls into the same problem as trying to access something on the DOM in the root-level script ie., it is not necessarily available yet. In FF, as soon as something is added to the DOM it is available. For example, in IE, this code may fail:

Code:

<div id="myDiv">Hello World</div>
<script>document.getElementById('myDiv').innerHTML = 'Changed';

2) ActiveX troubles - as outlined in the 12030 error thread, somethings things fail in the IE remote request. This doesn't sound like your issue, but it's one possible thing to watch out for.

3) FF is OK with variables that have the same name as elements on a page - IE is not. The reason for this, is that IE did a weird thing a while ago and let you access elements on a page directly by their ID rather than having to getElementById. So this code is a problem for IE as well:

Code:

<div id="myID">Hello World</div>
<script>
myID = 4;
</script>

The worst part of that last example is that it might not rear its ugly head until later in the code - when you either try to do something to the variable or the DIV ... and it's here that I think might be some troubles for you.

In any case, happy hunting - hope this helps.
/p

[ChristFollower]

This is the Javascript that initiates Ajax calls. Is there a concept of "target" where I can specify target="right"? Any help with ActiveXObject("Microsoft.XMLHTTP") API will be great.

Code:

function retrieveURL(url,nameOfFormToPost) {
   
    //get the (form based) params to push up as part of the get request
    url=url+getFormAsString(nameOfFormToPost);
   
    //Do the Ajax call
    if (window.XMLHttpRequest) { // Non-IE browsers
      req = new XMLHttpRequest();
      req.onreadystatechange = processStateChange;
      try {
      req.open("POST", url, true); //was get
      } catch (e) {
        alert("Problem Communicating with Server\n"+e);
      }
      req.send(null);
    } else if (window.ActiveXObject) { // IE
     
      req = new ActiveXObject("Microsoft.XMLHTTP");
      alert(req);
      if (req) {
        req.onreadystatechange = processStateChange;
        req.open("POST", url, true);
        req.send();
      }
    }
  }

[ChristFollower]

I think I have a solution now. I still don't know how exactly this happens but the window name in the DOM is changed after the Ajax call. So I just need to add

Code:

self.name="right"

to my Javascript to "fix" it. This is very patchy... I know. Any better suggestion is appreciated.

One interesting observation: I added

Code:

alert("self.name="+self.name);

for testing purpose. Both IE6 and Firefox 2 report a new name other than the original "right". So IE 6 is doing what it is supposed to do since the "right" window no longer exist. Firefox 2 may have it cached somewhere without checking the name again.