jquery同位素過濾與數據庫

Question

我想要Metafizzy的同位素插件工作。這是我的設置，除了我從SQL數據庫拉容器項目 - http://jsfiddle.net/trewknowledge/jJZEN/

任何人都可以幫我找出爲什麼它不工作？

這是我使用

的JavaScript

//Load all items straight away 
    $(document).ready(function(){ 
     showEntries('*'); 
    }); 

    //Isotope filter 
    function filterEntries() { 
     var $container = $('#entries'); 
      $select = $('#filters select'); 

     $container.isotope({ 
      itemSelector: '.item' 
     }); 

     $select.change(function() { 
      var filters = $(this).val(); 
      $('.active').removeClass('active'); 
      if (filters != '.item') { 
       $(filters).addClass('active'); 
      } 
      $container.isotope({ 
       filter: filters 
      }); 
     }); 

    }; 


    //Pull in data from database 
    function showEntries(str) { 

     if (str=="") { 
      document.getElementById("entries").innerHTML=""; 
      return; 
     } 
     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("entries").innerHTML=xmlhttp.responseText; 

       } 
     } 
      xmlhttp.open("POST","<?php bloginfo('template_url'); ?>/getentries.php?q="+str,true); 
      xmlhttp.send(); 

      //Fire filter function 
      filterEntries(); 
     } 
</script> 

HTML

<section id="filters"> 
     <select name="entries" onchange="showEntries(this.value)"> 
     <option value="*">show all</option> 
     <option value=".item323" >323</option> 
     <option value=".item266" >266</option> 
     <option value=".item277" >277</option> 
     <option value=".item289" >289</option> 
     </select> 
</section> <!-- #filters --> 

<div id="entries" class="clearfix"> 

</div><!--entries--> 

PHP

0碼

Answer 1

的Javascript

//Pull in data from database 
    function showEntries() { 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      "use strict"; 
      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("entries").innerHTML=xmlhttp.responseText; 
       //Fire filter function once data loaded 
       filterEntries(); 
      } 
     } 
     xmlhttp.open("POST","<?php bloginfo('template_url'); ?>/getentries.php?",true); 
     xmlhttp.send(); 
    }; 

    //Load all items straight away 
    showEntries('*'); 

    //Isotope filter 
    function filterEntries() { 
     var $container = $('#entries'); 
      $select = $('#filters select'); 

     $container.isotope({ 
      itemSelector : '.item', 
      layoutMode : 'fitRows' 
     }); 

     $select.change(function() { 
      var filters = $(this).val(); 

      $container.isotope({ 
       filter: filters 
      }); 
     }); 
    }; 

HTML

<section id="filters"> 
    <select name="entries" onchange="filterEntries()"> 
     <option value="*">show all</option> 
     <option value=".item323">323</option> 
     <option value=".item266">266</option> 
     <option value=".item277">277</option> 
     <option value=".item289">289</option> 
    </select> 
</section> <!-- #filters --> 

<div id="entries" class="clearfix"> 

</div><!--entries--> 

PHP

$con = mysql_connect("localhost", "root", "root"); 
    if (!$con) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    mysql_select_db("awards", $con); 

    $sql="SELECT * FROM entry WHERE status = 'registered'"; 

    $result = mysql_query($sql); 


    while($row = mysql_fetch_array($result)) { 
     //Get award cat ids 
     $awardcat = $row['awards_subcategory_id'] ; 

     print "<div class='item item$awardcat'>";//add award cat id to each div 
     print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />'; 
     print "<p > Studio: " . $row['studio'] . "</p>"; 
     print "<p class='client'> Client: " . $row['client'] . "</p>"; 
     print "<p class='description'> Description: " . $row['description'] . "</p>"; 
     print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>"; 
     print "</div>"; 

    } 


    mysql_close($con);