Javascript Обновить после вызова Jquery с Php - PullRequest
Новая
       0

Javascript Обновить после вызова Jquery с Php

0 голосов
/ 05 августа 2011

У меня есть проблема, которую я пытался решить в последние дни. У меня есть 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>

А вот код Php, который генерирует новый 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>&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 ]

1 голос
/ 05 августа 2011

Когда вы связываете события или вызываете функции jQuery, элемент должен существовать в DOM, чтобы jQuery мог его найти.

Поскольку вы заполняете свою страницу после выполнения сценария, нет элементов для выбора (несмотря на размещение выбора в document.ready обратном вызове.

Если вы наберете console.log на $('div#controller'), вы увидите пустой объект jQuery.

Если вместо этого вы использовали полный обратный вызов для регистрации вашего вызова jsFlow, вы должны увидеть, что все работает как положено.

Есть ли причина, по которой вы не используете нормализованные * jQuery ajax функции?

0 голосов
/ 05 августа 2011

Вы используете <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"
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...