Jquery and multiple AJAX calls on one page

Question

I have thumbnails on a page, as such:

<div id="credits">
<a href="largeimage1.jpg" alt="credits1.php"><img src="thumb1"></a>
<a href="largeimage2.jpg" alt="credits2.php"><img src="thumb2"></a>
<a href="largeimage3.jpg" alt="credits3.php"><img src="thumb3"></a>
</div>

<div id="zoom"></div>

<div id="credits"></div>

I'm looking to do the following:

• user clicks thumb1 > largeimage1 loads in #zoom AND credits1.php loads in #credits
• user clicks thumb2 > largeimage2 loads in #zoom AND credits2.php loads in #credits
• etc.

Is this possible with jquery? ie. is it possible to make TWO (2) ajax calls on the same page with one click as in above?

I currently have the following code working for the LARGE image ajax call:

<script type="text/javascript">
$(document).ready(function(){
    $("a").click(function(){
        var largePath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
                $(this).attr({ src: largePath }).fadeIn("slow");
        });
        return false;
    });
});
</script>

and it works like a charm - but I now have a situation where I'd like to load up credits for the images in another div.

Any help is greatly appreciated. :)

Answer 1

Above this line:

return false;

Add this:

$('#credits').load($(this).attr('alt'));

The whole point of asynchronous requests is that you can fire as many as you want while you keep going. You might want to have some kind of loading indicator that something is happening when you use load, as well as maybe some error handling, but the above should do the trick at a basic level.

Answer 2

Just to make sure I'm not missing something about jquery (I'm more familiar with mootools), your first bit of code won't work unless you have an image already inside the zoom div. I don't see anything in your code that injects a new image into the div... it only targets an existing image and updates its attributes. Or am I missing something?

Answer 3

Mate, that's not ajax. All it does is hide elements on the page by editing the css display:block; to display:none;