用Jpery调用Php后Javascript重新加载

时间：2011-08-05 15:33:54

标签： php javascript jquery ajax

我有一个问题，我过去几天一直试图解决。我有一个Jquery更新HTML并在div标签内创建新内容。问题是javascript不适用于生成的代码。换句话说，我可以采取Php给我的确切输出，直接将它放在html代码中并且它可以工作，但是如果它来自php而页面正在运行它将无法工作，它不会显示幻灯片jflow中的图像正确。

这是HTML标题

    <!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>

以下是生成新HTML（getMain.php）

的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>&nbsp;
        <span class="slide_slash">/</span>&nbsp;
        <a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>&nbsp;</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;
    }

    ?>

由于

过去工作的真实HTML就像这样

    <!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>&nbsp;
        <span class="slide_slash">/</span>&nbsp;
        <a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>&nbsp;

    </div>

    <div id="credits2">
        BEIJING BLUE<br>
        Photographed by: Karim V Tabar<br>


    </div>

    </div>



    </div>  


    </div>

    </body>
    </html>

2 个答案:

答案 0 :(得分：1)

当你绑定事件或调用jQuery函数时，元素需要存在于DOM中以供jQuery查找。

由于您在脚本执行后填充了页面，因此无法选择任何元素（尽管将选择放在document.ready回调中。

如果您在console.log上执行$('div#controller')，则会看到一个空的jQuery对象。

如果您使用完整的回调来注册jsFlow来电，那么您应该看到事情正常运作。

您是否有理由不使用jQuery的规范化ajax函数？

答案 1 :(得分：0)

您在代码中使用<div id="contentMain">，但是在div#controller上调用了它？无论如何，即使你指定了正确的选择器它也行不通，因为当zzzzBov回答时，当页面加载时，你的div是空的。更新内容后，您必须调用jFlow函数：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById("contentMain").innerHTML=xmlhttp.responseText;

    $("div#contentMain").jFlow({
        slides: "#slides",
        width: "785px",
        height: "480px"
    });
}
相关问题
最新问题