JQuery and ajax - using link to insert file content
I want to achieve the following. I have an initially empty absolutely positioned div (#description) sitting on top of another div (#zoom) that gets large images injected into it when users select one of 15 or so thumbnails on the side of the page.
I have a link on the side like:
<div id="whatisit"><a href="description.php"></div>
so that when the INJECT button is clicked, the content of the description.php file is contained in a #description div on the site. First, of course, it will need to "fadeOut", which is the content of #zoom.
I have the following code that I tried to put together to make this work.
<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 disappears from the content of #zoom, but does not insert or disappear into the content of the "description.php" description file. Am I doing something wrong? Or is something missing?
Thanks a lot for any help.
a source to share
You will need to use an AJAX fetch request, so do 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 content of description.php into #description.
a source to share
Well, it looks like you are trying to insert content in div
by setting its attribute the src
way you would in the image, which is not going to do anything. Perhaps if it were iframe
, it would make sense. Otherwise, you'll have to do a little bit of fiddling to pull the description.php content into the div, it says.
a source to share