How to detect if javascript is executing on page

Is there a way to detect if javascript is executing a script using either JQuery, javascript, WebDriver, or C# (like a browser API or something)?

For example, say I'm on a webpage and I just selected a U.S. State (let's say California) from a picklist, and some javascript is now loading a second picklist with all the cities found in California. How can I detect if javascript is executing, and when it has finish开发者_StackOverflow社区ed?

I'm running into problems with WebDriver since it doesn't know how to wait for a script to stop executing aside from pausing for a few seconds.

you can create a callback function, when the call for the picklist ends it triggers the callback.

example: http://api.jquery.com/jQuery.ajax/

$.ajax({
  url: "test.html", //your url to call
  success: function(){ //your function that is a callback
    $(this).addClass("done");
  }
});

Your question could be taken several ways.

Are you trying to see if javascript is enabled on the browser from your server-side code? I have done this by sending a small page with a form field and some javascript to populate that field and post-back. if the post-back doesn't happen, the page says something about 'javascript must be enabled.' If it DOES postback, I know Javascript is enabled.

If you're are client-side and you need to wait for something to complete, like loading your US State pull-down you need to wire up on-completion type events. Browsers are asynchronous by nature (that's a good thing) so you need to 'register' callbacks for key things to know when they've completed.

Without specific markup or situations it's tough to offer more.

Nice way to detect if some functions are running is to make them to signal when they are start working and when they are done. For example, function can trigger to some page element that it's working (I'm using jQuery here):

function Announcer() {
   $('body').triggerHandler('startworking')

    //... do something useful...

   $('body').triggerHandler('endworking');
   return something;
}

so you can listen the element for the events and control how your code is running by callback functions:

$('body').bind('startworking', function () {
  alert('Whoa, Announcer is started to work');
})

$('body').bind('endworking', function () {
   alert('Announcer just ended');
})

It's simple mechanism of pub/sub concept. By the way, you can read for some more advanced technique, like OpenAjax specification and it's Hub realisation: http://www.openajax.org/member/wiki/OpenAjax_Hub_2.0_Specification

Oh, if pub/sub is not exactly what you want, maybe jQuery Deffered object will be helpfull: http://api.jquery.com/category/deferred-object/

I think you can do something if JavaScript is not Enabled ,like adding tags <noscript>Do Whatever You Want</noscript> so you can invalidate or something ,be creative .

You can actually make an ajax call to fetch the data for the city in javascript. Doing this using an XMLHttp object actually allows you to make calls asynchronously. With this you can even attach a Javascript function which gets invoked on its state change. For example,

try {

  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

  try {

   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  } catch (E) {

   xmlhttp = false;

  }
}

.....
.....

xmlhttp.onreadystatechange=function() {

  if (xmlhttp.readyState==4) {

    alert(xmlhttp.getAllResponseHeaders())

  }
}