I realized after I posted that the hide() function might be returning as
finished as the element is being unhidden. I'm not sure why this would
be (doesn't the element's "display" property get set to "inline"
immediately? Perhaps the "display" attrib gets set in that way on
-every- size and opacity adjustment, so it was immediately unhidden
again?)... In any case, I seem to have corrected the problem by putting
everything in a chain of callbacks, as so:
$('#content_inner').fadeOut('slow',function() {
$('#indicator').show(function() {
$.ajax({
Thanks for your time. :)
-Jess
mann_jess wrote:
> 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>
>
