FireFox (version 2) Ajax call to update page times out if child window is closed

[Frinavale]

I have 2 FireFox (version 2) browser windows opened.

One is the child of the other.

When the user is finished with the child window, a method in the parent window is called to refresh a section of the page.

This is the JavaScript code that I'm using to refresh the content in the parent page:

<script type="text/javascript">           
            function UpdateList() {
                showUpdatingMessage();
                document.getElementById('myHiddenFieldForStuff').value = true;
                __doPostBack('myASPButtonClientID', '');
}
 </script>

Please note that the __doPostBack() method is supplied by ASP.NET. This method submits the page to the server and indicates that the control that caused this to happen was a button with the ClientID of "myASPButtonClientID". This method determines whether or not the whole page should be updated or if an asynchronous call to the server should take place. Since the button with the clientID of "myASPButtonClientID" is within an ASP.NET UpdatePanel, the __doPostBack() method preforms an asynchronous call to the server and only a portion of the page is updated.

This is the JavaScript code in the child page that is used to call the UpdateList JavaScript method in the parent page:

  <script type="text/javascript">
            window.onbeforeunload = CloseEvent;
 
            function CloseEvent() {
                if (window.opener && !window.opener.closed) {
                    window.opener.UpdateList();
                }
            }
            function CloseBrowserWindow() {
                //window.close();
                CloseEvent();
            }
        </script>

The "CloseBrowserWindow" method is called when a Button is clicked. It's supposed to close the window, which triggers the window.onbeforeunload event to fire, which calls the method in the parent window.

Right now the JavaScript responsible for closing the browser window is commented-out. The reason is because in FireFox version 2, when the child window is closed, the postback to the server times out.

When the child window remains opened, the request does not time out and everything works as it should (as it does in FireFox 3).

I'm not sure why this is happening (in FireFox version 2..) It'd be nice to know the reason but I'm not expecting JavaScript experts to know the mysteries of FireFox (version 2)

As a work around, I was thinking that if I were able to close the child window from the parent window the problem could be averted.

The only thing is, I have no idea how to do this.

I'd really appreciate any insight on this topic.

Thanks,

-Frinny

[gits]

could you try to trigger the close event after the request is completed? i guess that the problem is that by closing the browser-window the reference to the current request object is dropped ... you could even try a timeout for the close-operation which should even avoid that behaviour ... i say i guess it because i don't know the exact reason but anytime we have that problem both of the solutions fix it ...

may be i'll investigate it a bit and could give a better answer ;)

kind regards

[Frinavale]

@gits
I'm not following? I don't understand what you're getting at here.....

@gits
I have no idea how long the update's going to take. It's a very complicate page with many things that need updating. So, it's not a very quick process...and when you combine that with a little bit of lag, how can you tell how long it's going to take?

[edit]
Oh wait, do you mean put put a timeout in the parent window to allow the close-operation in the child window to take place before raising the post back to the server?
[/edit]

[gits]

is UpdateList() an Ajax-operation? then you could just call to close the window in the callback of the request.

in case you want to use the timeout then you just need a short one ... as i said ... it fixes such issues and i guess again :) that the timeout just avoids the reference dropping and let the browser instantiate and bind the requestobj correctly

[gits]

regarding your edit ... i thought that something like this:

function CloseBrowserWindow() {
    CloseEvent();
    window.setTimeout(function() { 
        window.close(); 
    }, 100);
}

should help.

kind regards

[Frinavale]

So, you don't close the child window from the parent window then?

[gits]

as far as i'm aware of this behaviour that doesn't matter ... it is a problem of closing a window 'the same time' when starting a request ... so it could be circumvented by using a timeout ... that is just the experience i made ..

[Frinavale]

I added the suggested code and it did not solve the problem.
I'm still getting a time out message in the parent window if the client window is closed even though there is a timeout set.

[Frinavale]

@gits
This behaviour seems to be linked to my earlier question...

[gits]

is it an Ajax-Request that does the update?

[Frinavale]

>>>quite response: yes..................<<<

Let's just say that I have no control over the Ajax request....

Well, I do but Please don't make me do it!
It's torture!

[gits]

ahh ... and please drop the onbeforeonload when using the timeout-solution ... does it work then? because this will start the request again ...

[Frinavale]

But then it won't be called when the user clicks the browser's "X" button.

[gits]

of course ... because that will close the window immediatly ... and we have the same problem again - does it work with the 'normal' button then?

[Frinavale]

Testing...give me a sec (well few minutes as it times out)

[Frinavale]

The timeout solution does not work.

[gits]

hmmm ... strange ... with our own-framework it always works reliably ... anyway: we could try another (but a bit ugly) solution ;) ... when you open the window then start an interval that observes whether the window is open or already closed ... as soon as it sees that the window is closed then you could start the update-call ... and from the child window you just set the needed params in the parent in case you need to ... so everything request-related is handled by the parent ... even when it is an ugly 'poll'-solution ... or you could try another timout-solution ... like this:

function CloseEvent() {
    if (window.opener && !window.opener.closed) {
        window.opener.setTimeout(function() {
            window.opener.UpdateList();
        }, 100);
    }
}

may be this timeout helps? ... i hate such trial&error ... but may be i'm not aware enough of the ms-ajax-framework ...

[Frinavale]

The following works:

           function CloseEvent() {
                if (window.opener && !window.opener.closed) {
                    window.opener.setTimeout(function() {
                      window.opener.UpdateList();
                  }, 100);
                }
            }
            function CloseBrowserWindow() {
                CloseEvent();
                window.setTimeout(function() {
                    window.close();
                }, 100);
            }

[Frinavale]

Thanks again for your help Gits.

Now off to try and solve the tons of JS related issues in IE8.

[Frinavale]

Ok, now I'm really confused.

Check out the following code:

  window.onbeforeunload = CloseEvent;
            function CloseEvent() {
                if (window.opener && !window.opener.closed) {
                    window.opener.setTimeout(function() {
                      window.opener.UpdateList();
                  }, 100);
                }
            }
            function CloseBrowserWindow() {
                //CloseEvent();
                //window.setTimeout(function() {
                    window.close();
                //}, 100);
            }

The UpdateList method is called when I close the browser using the "X" button.
But when I use the "exit" button, it doesn't work....the UpdateList method is never even called.
Why? Really! Why?

[gits]

we need to use a closure here ... because the window is already closed then, and the window.opener reference is wrong ... try the following:

window.onbeforeunload = function() {
    var win = window.opener;
 
    window.opener.setTimeout(function() {
        win.UpdateList();
    }, 100);
}

kind regards

[Frinavale]

I have a bunch of questions....

When you're talking about a "closure" are you talking about an "inline" function.
For example:

//this would be a closure
window.onload = function(){/*do something*/}
 
//this would not be a closure
window.onload = myFunction;
 
function myFunction(){/*do something*/}

Is there a difference between the two?



How can the window be closed in the CloseEvent function here?
It's called during the onbeforeunload event....before the document's unloaded...

         window.onbeforeunload = CloseEvent;
            function CloseEvent() {
                if (window.opener && !window.opener.closed) {
                    window.opener.setTimeout(function() {
                      window.opener.UpdateList();
                  }, 100);
                }
            }
            function CloseBrowserWindow() {
                //CloseEvent();
                //window.setTimeout(function() {
                    window.close();
                //}, 100);
            }}

How it is this different from what you're suggesting (see comments)?

window.onbeforeunload = function() {
//here you're making a reference to the window.opener
    var win = window.opener;
 
//here you are directly referencing the window to opener.
    window.opener.setTimeout(function() {
 
//Here you are not directly referencing the window.opener....
//you're using a "copy" (??) of the window.opener?
//Does this make a difference?
        win.UpdateList();
    }, 100);
}

Thanks for clarifying things.

-Frinny

[Dormilich]

@Frinavale
neither of those are a closure (at least how I understand it). a closure is a function defined inside another function, which preserves its parameters/variables (not so sure about the last one), hence the name.

function myFunction()
{
    var x = "some value";
 
    // this is the closure
    var mf = function(x)
    {
         // do some cool stuff with parameter x
    }
 
    // use the closure
    element.onclick = mf;
}

[gits]

that is right ... and window.opener refers to the window's opener ... when we store the reference first and then closure it then the garbage-collector doesn't drop the reference because it finds a variable that is referencing it. so window.close() closes the window and when we use the timeout the onbeforeunload would have triggered a function that refers to window.opener some time later where the window was closed already ... and so JavaScript would try to refer to the parent's opener ... but that wouldn't work. so we just make use of the closure-construct and store the reference in a variable ... it is a similar problem with the this keyword that is often used in ajax-callbacks.

what you have written above is just showing a anonymous function and a named function ... but every function could be used for closuring variables ...

kind regards

[Frinavale]

Ok :)
Things are making much more sense now.

Thanks for taking the time to explain it to me.

The following works:

window.onbeforeunload = function() {
  var win = window.opener;
  window.opener.setTimeout(
    function() {
       win.UpdateList();
     }, 
    100);
}
function CloseBrowserWindow() {
  window.close();
}

[Frinavale]

I lied..this solution does not work in IE7.
If I don't use the window.opener.setTimeout(), then it works fine...but of course if I remove the window.opener.setTimeout portion it won't work in FF...

[Frinavale]

I was able to fix it...the following doesn't look like much of a change from the original but I tried a whole bunch of things to get to this stage.

The only difference is that instead of calling the function in the setTimeout method, I pass it the function name instead:

window.onbeforeunload = function() {
  if (window.opener && !window.opener.closed) {
    var win = window.opener;
    window.opener.setTimeout( win.UpdateList, 100);
  }
}
function CloseBrowserWindow() {
  window.close();
}

There is some interesting things I discovered about the setTimeout method!

For instance, the first parameter to the setTimeout method should be a String...but the string can contain a call to method.

For example, the following code will display an alert after 2 seconds:

<html>
<head>
  <script type="text/javascript">
    function timedMsg()
    {
      var t=setTimeout("alert('2 second delayed Hello World!')",2000);
    }
  </script>
</head>
 
<body>
  <form>
    <input type="button" value="Click Me!" onClick = "timedMsg()">
  </form>
</body>
 
</html>

Note that the first parameter is a String that contains a method call to the alert function. Of course you can do the same thing providing your own function instead of an alert:

<html>
<head>
  <script type="text/javascript">
    function timedMsg()
    {
      var t=setTimeout("delayedHelloWorld()",2000);
    }
    function delayedHelloWorld()
    {
      alert('2 second delayed Hello World!')
    }
  </script>
</head>
 
<body>
  <form>
    <input type="button" value="Click Me!" onClick = "timedMsg()">
  </form>
</body>
 
</html>

The only thing is that you can't easily pass variables as parameters to your method that is in a String as the first parameter of the setTimeout function. You can do it but it looks a bit nasty:

<html>
<head>
  <script type="text/javascript">
    function timedMsg()
    {
      var message = "2 second delayed Hello World!";
      var firstParameter="delayedHelloWorld('" + message +"')";
      var t=setTimeout(firstParameter,2000);
    }
    function delayedHelloWorld(message)
    {
      alert(message);
    }
  </script>
</head>
 
<body>
  <form>
    <input type="button" value="Click Me!" onClick = "timedMsg()">
  </form>
</body>
 
</html>

Anyways, after much playing around I finally figured it out. Providing a function name (I'm assuming this is like C++ and is actually the memory location of the function??) ended up solving my problem:

<html>
<head>
  <script type="text/javascript">
    function timedMsg()
    {
      var t=setTimeout(delayedHelloWorld,2000);
    }
    function delayedHelloWorld()
    {
      alert('2 second delayed Hello World!')
    }
  </script>
</head>
 
<body>
  <form>
    <input type="button" value="Click Me!" onClick = "timedMsg()">
  </form>
</body>
 
</html>
 

[gits]

ahhh ... please don't ever use that syntax with strings ... it is just ugly and needs eval to be executed ... the function-reference way is always to prefer ;)

[Frinavale]

@gits
It is absolutely disgusting and I probably will never use it again. I was working my way through w3c and this is how they tell you to do things. I decided to give it a chance and was surprised to see it worked....it didn't really help me much, so I started trying to pass the function reference instead....hoping it was like c++ in this regard.

@gits
Is eval automatically called in this case?


@gits
So it is passing a memory location then.

[gits]

puhhh ... personally i don't like w3schools ;) ... and yes ... internaly this style requires to eval the passed string ... there is never a need to use it except one thing: when you need to eval a ajax-json-response ...

kind regards