I created this question before but in another way and got no answers. So today I wrote some simple code to share my problem in a clear way.
- I used
jQueryto call an image slideshow function. - The AJAX function in
show.phpwill callget.phpand print the results in a DIV.
My problem is that sliding (prev – next) inside the DIV supplied by get.php does not work in show.php. But if I call get.php directly in my browser, then it works.
I am confused, I guess I have an error in my div when calling AJAX.
My Files
show.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test </title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="newscript.js"></script>
<link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/2/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include("samiloxide.php");
$sql=mysql_query(" select * from section ");
while($r=mysql_fetch_array($sql)){
echo "<li><a onclick='loadpage($r[id])' >$r[section]</a></li>" ;
}
?>
<div id="pageContent"></div>
</body>
</html>
newscript.js
var section;
function loadpage(section){
var section = section.toString();
$.ajax({
type: "POST",
url: "get.php",
dataType: "script",
data: ({section : section}),
success: function(html){
$("#pageContent").empty();
$("#pageContent").append(html);
}
});
}
get.php
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
<!--
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
#gallery{position: relative; left: 0; top: 0;}
#gallery li{float: left; margin: 0 20px 15px 0;}
#gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;}
#gallery-controls{margin: 0 auto; width: 732px;}
#gallery-prev{float: left;}
#gallery-next{float: right;}
-->
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
// Gallery
if(jQuery("#gallery").length){
// Declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
-->
</script>
<?php
include("samiloxide.php");
//if(!$_POST['page']) die("0");
$section = (int)$_POST['section'];
$sql=mysql_query(" select * from images where section='$section'");
echo "
<div id='gallery-wrap'>
<ul id='gallery'>
";
while($rr=mysql_fetch_array($sql)){
echo " <li><a href='$rr[image]'><img src='$rr[image]' alt='' /></a></li>";
}
echo "
</ul>
</div>
<div id='gallery-controls'>
<a href='#' id='gallery-prev'><img src='images/prev.png' alt='' />next</a>
<a href='#' id='gallery-next'><img src='images/next.png' alt='' />last</a>
</div>
";
?>
This is a bit complicated, and I am unable to provide a quick fix to your code that you could just copy, paste and verify.
In
get.php, you load a document with a gallery, and you make it a working gallery from$(document).ready().But in
show.php, when you load theget.phpfile,$(document).ready()is not called. The$(document).ready()ofshow.phpwas already called long before, and your document is now in theinteractivestate. So when you load the layout, you do not automaticallly execute the code that makes that layout work.You have to move the
$(document).ready()code in yourget.phpintoshow.php, and then bind it to the AJAX call completion. Or unbind the code inget.php: just call it from the end of the HTML without wrapping it in$(document).ready().This is not guaranteed in all browsers all the time, though, because while
$(document).ready()is called properly on document being ready, inshow.phpwhat you do is you ask to load a HTML file.And the HTML gets loaded, and so
onLoadgets fired. You can’t expect different.Then that HTML asks to load other assets (such as images), but the browser did not know this. It has already fired the
onLoadand so you already executed the gallery setup code. If the layout requires the images’ SRC to be already loaded in order to style properly, then it will not always work. It might work the second time because the images are in the browser cache. It may work on fast connections and not on slow connections; it may work with small images, quickly loaded, and not with larger images. All these behaviours indicate that images being already loaded is necessary.Again, a quick and dirty fix is to fire the setup after a suitable delay (but what is suitable? You can’t know). Another possibility, if all the images are of known sizes, is to supply those sizes in HTML or CSS. After all, the layout usually requires images being loaded so that they occupy space on the page, but for that, you don’t need images to be actually displayable. They might be empty spaces (maybe styled with a background).
A third possibility, more complicated but guaranteed to work in all browsers, is to save the image SRC’s into another kind of tag (e.g. DIVs with a class of imageloading, by default hidden), and after the load() success to analyze these tags and convert them to IMGs attaching an
onloadto them. When all those onloads have fired, you know that it’s OK to launch the gallery setup. While longer to describe (and code), this last method is actually much faster than the naive “quick fix: wait a bit and fire setup” one.