Javascript Reload after Jquery call with Php
I have a problem I've been trying to solve for the past days. I have a Jquery that updates an HTML and creates new content inside a div tag. The thing is that the javascript does not apply on the generated code. In other words, I could take the exact output that the Php gives me, put it in the html code directly and it works, but if it comes from the php while the page is running it won't work, it doesn't display the images correctly in a slideshow jflow.
Here is the HTML header
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.robwalsh.randomImageOnload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
/* SLIDESHOW AT HOMEPAGE */
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<script type="text/javascript">
/* Function to show/hide the side menu for all images */
function showDIV(e)
{
var notEmpty = true;
var count = 0;
while(document.getElementById('subCat'+count) != null)
{
document.getElementById('subCat'+count).style.display = 'none';
count++;
}
document.getElementById(e).style.display = 'block';
}
/* MENU INTERACTION */
function showContent(cmd, id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
开发者_运维知识库 document.getElementById("controller").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getMain.php?cmd="+cmd+"&id="+id,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<link rel="stylesheet" type"text/css" href="css/stylesheet.css" />
<link rel="shortcut icon" href="logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper" >
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
<a href="#" title="Go Back">KARIM VICTOR TABAR</a>
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<?php
$count = 0;
foreach (new DirectoryIterator('images/menuImages') as $fileInfo)
{
if($fileInfo->isDot()) continue;
echo "<h2 class='acc_trigger' onclick=\"showDIV('subCat".$count."'); showContent(1, '".$fileInfo->getFilename() ."');\"><a href='#'>".$fileInfo->getFilename() ."</a></h2><div class='acc_container' id='container".$count."'><div class='block' name='subCats' id='subCat".$count."'><ul>";
foreach (new DirectoryIterator('images/menuImages/'.$fileInfo) as $fileInfo2)
{
if($fileInfo2->isDot() || $fileInfo2 == "thumbnails") continue;
echo "<li><a href='#' onclick=\"showContent(2, '".$fileInfo->getFilename() ."/".$fileInfo2->getFilename()."');\">".$fileInfo2->getFilename() . "</a></li>";
}
echo "</ul></div></div>";$count++;
}
?>
<div id="navigationlinks">
<ul>
<li><a href="pages/bio.html">BIO</a></li>
<li><a href="pages/contact.html">CONTACT</a></li>
<li><a href="http://blog.karimtabar.com/" target="_blank">BLOG</a></li></ul>
</div>
</div>
<!-- Images Thumbnails Categories -->
<div id="contentMain">
<div id="slideshow">
<img src="images/homepage/bb1.jpg" width = "750px" alt="" class="active" />
<img src="images/homepage/et1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga2.jpg" width = "750px" alt="" />
<img src="images/homepage/hkartwalk.jpg" width = "750px" alt="" />
<img src="images/homepage/homepagegirl.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo2.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo5.jpg" width = "750px" alt="" />
<img src="images/homepage/silverwig_gaga.jpg" width = "750px" alt="" />
<img src="images/homepage/wavy1.jpg" width = "750px" alt="" />
<img src="images/homepage/Wenya.jpg" width = "750px" alt="" />
</div>
</div>
</body>
</html>
And Here is the Php code that generates the new HTML(getMain.php)
<?php
$cmd=$_GET["cmd"];
$id = $_GET["id"];
/* The Thumbnail Display */
if($cmd == 1)
{
echo "<div id='thumbnailcontentplaceholder'>";
echo "<div id='thumbnailcontent'>";
echo "<ul>";
$dir = "images/menuImages/".$id."/thumbnails";
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<li>";
echo "<a href='#' title='".$file."'><img src='".$dir."/".$file."' alt='' /></a>";
echo "<div id='thumnailtitle'>".substr($file, 0, strpos($file, "."))."</div>";
echo "</li>";
}
closedir($dh);
}
}
echo "</div></div>";
}
if($cmd == 2)
{
$dir = "images/menuImages/".$id;
$count = 1;
$nFiles = countFiles($dir);
echo "<div id='imageplaceholder'> \n";
/* No1 No2 No3 ... */
echo "<div id='controller' class='hidden'>\n";
for($i =1; $i < $nFiles; $i++)
{
echo "<span class='jFlowControl'>No ".$i."</span>\n";
}
echo "</div>";
echo "<div id='slides'>";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<div><img src='".$dir."/".$file."'></div>\n";
}
closedir($dh);
}
}
echo "</div>\n";
echo '<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a> </div>';
echo '<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br></div></div>';
}
function countFiles($dir)
{
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
}
if ($files)
$num_of_files = count($files) - 2; // we substract 2 because . and .. are included
else
die('there is an error');
return $num_of_files;
}
?>
Thanks
Real HTML that used to work was like this
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="../../js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container$(document).ready(function(){
//On Click
$('.acc_trigger').click(function(){
('#open').click()
});
});
</script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type"text/css" href="../../css/stylesheet.css">
<link rel="shortcut icon" href="../../logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper">
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
<a href="../../index.html" title="Go Back">KARIM VICTOR TABAR</a>
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<h2 class="acc_trigger"><a href="../editorial.html">EDITORIAL</a></h2>
<div class="acc_container">
<div class="block"> <ul> <li><a href="beijingblue.html">BEIJING BLUE</a></li>
<li><a href="gaga.html">GAGA</a></li>
<li><a href="dtrouble.html">DOUBLE TROUBLE</a></li>
<li><a href="et.html">EXTRATERRESTRIAL DREAMS</a></li>
<li><a href="liferush.html">LIFE RUSH</a></li>
<li><a href="rodeoglam.html">RODEO GLAM</a></li>
<li><a href="wanderlust.html">WANDERLUST</a></li>
<li><a href="runawayangel.html">RUN AWAY ANGEL</a></li>
<li><a href="russianstandard.html">RUSSIAN STANDARD</a></li>
<li><a href="hollywoodhills.html">HOLLYWOOD HILLS</a></li></ul>
</div>
</div> <h2 class="acc_trigger"><a href="../travel.html">TRAVEL</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="../t/hk.html">HONG KONG</a></li> </li>
<li><a href="../t/dubai.html">DUBAI, UAE</a></li>
<li><a href="../t/kyoto.html">KYOTO, JAPAN</a></li>
<li><a href="../t/miami.html">MIAMI, USA</a></li>
<li><a href="../t/la.html">L.A., USA</a></li></ul>
</div>
</div>
<h2 class="acc_trigger"><a href="../art.html">ART</a></h2>
<div class="acc_container">
<div class="block">
<ul> <li><a href="../a/mirrorangel.html">MIRROR ANGEL</a></li>
<li><a href="../a/rouge.html">ROUGE</a></li>
<li><a href="../a/violet.html">VIOLET</a></li>
<li><a href="../a/noire.html">NOIRE</a></li></ul>
</div>
</div> <h2 class="acc_trigger"><a href="../video.html">VIDEO</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="../v/zigmat.html">ZIGMAT - BETWEEN BULLETS VIDEO</a></li><li><a href="../v/zigmat-1.html">ZIGMAT - BEHIND THE SCNES</a></li></ul>
</div>
</div>
<h2 class="acc_trigger"><a href="../exhibitions.html">EXHIBITIONS</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="../e/intemporelle.html">2009 RESIDENT, MONTRÉAL, CANADA</a></li><li><a href="../e/hkartwalk.html">2011 ART WALK, HONG KONG, CHINA</a></li>
</ul>
</div>
</div><!-- <h2 class="acc_trigger"><a href="#">PRESS</a></h2>
<div class="acc_container">
<div class="block">
<ul>
<li><a href="press1.html">NME</a></li>
<li><a href="press2.html">LIVE FAST MAG</a></li>
<li><a href="press3.html">GURU</a></li></ul>
</div>
</div>
--><div id="navigationlinks">
<ul>
<li><a href="../bio.html">BIO</a></li>
<li><a href="../contact.html">CONTACT</a></li>
<li><a href="http://blog.karimtabar.com/" target="_blank">BLOG</a></li></ul>
</div> <!-- <div id="buyherelogo">
<a href="../../store.html"><img src="../../store/buyhere.png" width="150" border="0"></a>
</div>
--></div>
<!--IMAGE // RIGHT PORTION -->
<div id="imageplaceholder">
<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowControl">No 3</span>
<span class="jFlowControl">No 4</span>
<span class="jFlowControl">No 5</span>
<span class="jFlowControl">No 6</span>
<span class="jFlowControl">No 7</span>
</div>
<div id="slides">
<div><img src="../../images/fashion/beijingblue/bb1.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb2.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb3.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb4.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb5.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb6.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb7.jpg" width="785" height="480"></div>
</div>
<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>
</div>
<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br>
</div>
</div>
</div>
</div>
</body>
</html>
When you bind events, or call jQuery functions, the element needs to exist in the DOM for jQuery to find it.
Because you are populating your page after the script has executed, there's no element's to be selected (despite placing the selection in a document.ready callback.
If you did a console.log on $('div#controller') you'd see an empty jQuery object.
If you, instead, used the complete callback to register your jsFlow call, you should see things working as expected.
Is there a reason you're not using jQuery's normalized ajax functions?
You use <div id="contentMain"> in the code, but you call it on div#controller? Anyways, it wouldn't work even if you specified the correct selector, because as zzzzBov answered, when the page loads, your div is empty. You have to recall the jFlow function after you update the content:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
$("div#contentMain").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
}
加载中,请稍侯......
精彩评论