Is there an obvious reason from the code below why this wouldn't work?
When i run, the "ajaxBusy" div never hides, and the "content" div never changes it's visibility settings. So i'm inclined to believe that .ajaxStop is never happening. I tried deleting all other javascript functions, but that didn't change anything.
In the head of an HTML document, I have:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript">
$(function() {
$("#content").css('visibility','hidden');
$('#ajaxBusy').ajaxStop(function(){
alert('it ran!');
$('#ajaxBusy').hide();
$("#content").css('visibility','visible');
});
});
</script> -->
<script src="sliding.form.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
where "ajaxBusy" contains a loading GI. It is the commented code this is not running properly.
hide() sets element css property display:none check in Firebug to confirm. visibility: visible will do nothing as the display and visibility properties hide a div in different ways. visibility hides to div but leaves it in the DOM, i.e. whereever the div is will show up empty. display:none displays the DOM as if the div was never there.
Try using
$('#ajaxBusy').ajaxStop(function(){
$(this).hide();
$("#content").show();
});
As that's how it's used on the jquery api docs. http://api.jquery.com/ajaxStop/. Use .show(); and .hide(); instead of setting the visibility css attribute.
Also, I would just drop an alert('it ran!'); inside the callback to get quick feedback in your browser as to whether it's being called or not.
Make sure you bind .ajaxStop before calling your ajax request. I don't see any ajax in your code, I'm assuming that's not the problem. :)