Hello there,
I am experiencing some problems using $.load and $.ajax to pull
content from a url and display it in a div. I created the attached
example page to show what I mean.
I expect that when I click the link, the indicator.gif image (or
"Loading...") will appear for a moment, then disappear as the
"response.html" page appears.
Instead, sometimes the indicator.gif image doesn't disappear, leaving
both the response.html page and the indicator.gif image on the page
indefinitely. Also, occasionally the response.html page will not
appear (though the content will change, the "fadeIn" effect will just
never be called) and the indicator will stay on the page forever,
alone.
I'm sure I must be doing something wrong here, but I can't figure out
what it is. I've tried chaining the effects in a variety of orders,
changing the effect speeds, putting different effects in the callback,
and using $.ajax and the "success" parameter instead of $.load with a
callback. All yield the same result.
Any help, or pointers in the right direction, would be greatly
appreciated.
Thanks,
-Jess
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/
jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="test_link" style="float: left; width: 100px;"><a href="./
response.html">Click me</a></div>
<div id="content_inner" style="float: left; width: 200px;">
Some example text
</div>
<img id="indicator" src="indicator.gif" alt="Loading..."
style="display: none; float: left;" />
<script>
$('#test_link').click(function(e) {
e.preventDefault();
link = $(this).find('a:first').attr('href');
$('#content_inner').hide('slow',function() {
$('#indicator').show();
}).load(link,function() {
$('#indicator').fadeOut();
$('#content_inner').fadeIn('slow');
});
});
</script>
</body>
</html>
