Jquery and ajax - using a link to inject a files content

Question

I'm looking to achieve the following. I have an initially-empty absolutely positioned div (#description) sitting on TOP of another div (#zoom) which gets large images injected into it when users select one of the 15 or so thumbnails on the side of the page.

I have a link on the side such as:

<div id="whatisit"><a href="description.php"></div>

that when clicked should INJECT the "description.php" file contents into the #description div on the site. First, of course it would need to "fadeOut" what the contents of #zoom.

I have the following code which I tried to put together to do the job.

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

It fades out the contents of #zoom, but doesn't inject or fadeIn the "descriptions.php" file content. Am I doing something wrong? Or missing something?

Many thanks for any help.

Answer 1

Well, it looks like you're trying to push content into a div by setting its src attribute the way you would on an image, which isn't going to do anything. Possibly if it were an iframe that would be meaningful. Otherwise, you're going to have to get a bit fancier to pull description.php's content into the div, methinks.

Answer 2

You'll have to use an AJAX get request, so do something like this:

<script language="javascript">
$(document).ready(function() {
    $("#whatisit a").click(function() {
        var descPath = $(this).attr("href");
        $.get(descPath, function(html_returned) {
            $("#zoom img").fadeOut("slow", function() {
                $("#description").html(html_returned).fadeIn("slow");
            });
        }, "html");
        return false;
    });
});
</script>

This should inject the contents of description.php into #description.