2

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

1 に答える 1

0

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);
于 2012-08-07T10:08:57.300 に答える