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:

Expand|Select|Wrap|Line Numbers

 
<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:

Expand|Select|Wrap|Line Numbers

 
  <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

Quote:

Originally Posted by 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

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

Quote:

Originally Posted by gits

... 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 ...

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:

Expand|Select|Wrap|Line Numbers

 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

Quote:

Originally Posted by 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 ..

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:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 
           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:

Expand|Select|Wrap|Line Numbers

 
  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:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 
//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...

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

 
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

Quote:

Originally Posted by Frinavale

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

Expand|Select|Wrap|Line Numbers

 
//this would be a closure

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

window.onload = myFunction;
 
function myFunction(){/*do something*/}

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.

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
<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:

Expand|Select|Wrap|Line Numbers

 
<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:

Expand|Select|Wrap|Line Numbers

 
<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:

Expand|Select|Wrap|Line Numbers

 
<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

Quote:

Originally Posted by gits

ahhh ... please don't ever use that syntax with strings ... it is just ugly and needs eval to be executed

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.

Quote:

Originally Posted by gits

it is just ugly and needs eval to be executed

Is eval automatically called in this case?

Quote:

Originally Posted by gits

the function-reference way is always to prefer ;)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about