php - Jquery 同位素过滤数据库

Question

我正在尝试让 Metafizzy 的 Isotope 插件正常工作。这是我的设置，除了我从 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

    $q=$_GET["q"];

    //Remove the '.item' before the cat id
    $q= ltrim ($q,'.item');

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

    mysql_select_db("awards", $con);

    if ($q === "all" || $q === "*" ) {
        //Show all entries that have status registered if all is selected
        $sql="SELECT * FROM entry WHERE  status = 'registered'";
    } else {    
        //Else just show category entries of people who are registered
        $sql="SELECT * FROM entry WHERE awards_subcategory_id = '".$q."' && status = 'registered'";
    }
    $result = mysql_query($sql);


    while($row = mysql_fetch_array($result)) {

        print "<div class='item item$q'>";
        print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
        print "<p class='studio'> 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);

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);