[jQuery] Problem with lock of browser after $.ajax call

[Michael Holm Kristensen]

Hi,

I have a problem with some of my jquery code.. i will make this short
an straight ahead.

What i want is:

1. page that will print a loader bar to begin with.
2. make a ajax call to some information from an external source.
3. print the information from external source when i get the response.

Everything works just fine.. by now:

here is some of my code:

server:
<?php
$sample = array(  'name' => 'Michael' );

echo(json_encode($sample));
?>

client:
<script type="text/javascript">
$(document).ready(function(){
       $("#ForecastSchema").html('<p>&#160;</p><p align="center"><img
src="/img/ajax-loader.gif" width="220" height="19" /></p><p>Please
wait while we fetch the lastest data from weather.com.</p>');

       $.ajax({
               type: "GET",
               url: "/ajax/get_forecast.php",
               async: true,
               success: function(msg){ $("#ForecastSchema").html
(msg); },
       });
});

</script>
<div id="ForecastSchema"></div>

And everything above works just fine..

My problem is if i put a sleep(120); in my server, and fake a delay..
My browser will suddently just lock the page, i cannot click on any
links on the page untill the 2 minutes has past.

I have also tried to put a timeout in the ajax call, but nothing
helps.. i have also tried to play with async, and nothing help here
neither..

hope that someone can help me, how i can ex. navigate back to the
frontpage while the page is loading..?