Pemfilteran Isotop Jquery dengan database

Saya mencoba membuat plugin Isotop Metafizzy berfungsi. Ini adalah pengaturan yang saya miliki, kecuali saya menarik item kontainer dari database sql - http://jsfiddle.net/trewknowledge/jJZEN/

Adakah yang bisa membantu saya mencari tahu mengapa ini tidak berhasil?

Ini adalah kode yang saya gunakan

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

person Allan    schedule 07.08.2012    source sumber
comment
Apa yang tidak berfungsi? Anda memiliki kotak pasir atau jsfiddle online tempat seseorang dapat mengalami apa yang tidak berfungsi? Bantu kami untuk membantu Anda...   -  person Systembolaget    schedule 07.08.2012
comment
Yang ada di jsfiddle tidak terhubung ke database sql. Item yang difilternya diberi kode keras dalam html, bukan dinamis. Saya hanya menunjukkannya sebagai contoh apa yang ingin saya capai. Saya menemukan cara melakukannya sekitar 20 menit yang lalu dan akan segera memposting jawaban saya   -  person Allan    schedule 07.08.2012
comment
Selamat, itu menyenangkan; orang lain mungkin mengalami masalah yang tidak berfungsi dalam kasus Anda.   -  person Systembolaget    schedule 07.08.2012


Jawaban (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);
person Allan    schedule 07.08.2012