how to be able to keep using a page(clickin,tasks etc..) while a javascript is still being loaded

Question

i have designed a dashboard that auto refresh every 30 seconds.

i am using jquery and so i we take the tab "new users" on the dasboard, it has a code like that:

<li>New users Today: <span id="NbOfNewUsers">
  <script>refreshStatContent('Users')</script></span>
</li>

now the script resfreshStatContent uses jquery $.ajax to get users content:

$.ajax({
   type: "GET",
   url: "usersctnt.php",
   dataType: "xml",
   success: function(xml)
   {
        }
       });

ok the problem is, even though ajax goes asynchronous, but still the fact that am using <script>refreshStatContent(\\'Users\\')</script> imposes that this javascript function finishes loading before i can do any task on the page. Right now if i try to click on a link on the page while the user content is loading, it doesn't let me... until the refreshStatContent(\\'Users\\') is finished...

is there a way to be able to still use the page even when a script is loading?

thanks a lot, much appreciated

Answer 1

instead of using you script like this:

<li>New users Today: <span id="NbOfNewUsers">
  <script>refreshStatContent('Users')</script></span>
</li>

you should include all of your javascript at the bottom of the page. Make a function that calls refreshStatContent on the span like this:

include jQuery

<script type="text/javascript">
     $(document).ready(function() {
       // do stuff when DOM is ready
       var usrList = efreshStatContent('Users');
       $(#NbOfNewUsers).append(usrList);       
     });
</script>
</body> 

Or you might even want to extract all of you js to an external file, so it is need and clean.