[multi checkbox based data filter]

Thanks a lot DaveyK and Xaotique for replying on my post.and sorry for my incomplete post. i was not much aware about the forum posting. But it's not really true that i haven't try yet.

i am trying to create a product filter with it's properties. here is the exactly thing that i want to create.

 

http://meradukan.in/ss/

 

this filter search fine but load time is too bad. i am looking for a script that can work faster. without submit the form, when we check or unchecked it , result should change.

 

source code can be download by this link http://meradukan.in/ss/ss.zip

 

 

 

Here is the index page

 

 

<div id="options">

    <div class="option-set" data-group="core">

      <input type="checkbox" value id="core-all" class="all" checked><label for="core-all">all cores</label>

      <input type="checkbox" value=".core1" id="core1"><label for="core1">core1</label>

      <input type="checkbox" value=".core2" id="core2"><label for="core2">core2</label>

      <input type="checkbox" value=".core4" id="core4"><label for="core4">core4</label>

      <input type="checkbox" value=".core6" id="core6"><label for="core6">core6</label>

       <input type="checkbox" value=".core8" id="core8"><label for="core8">core8</label>

       <input type="checkbox" value=".core12" id="core12"><label for="core12">core12</label>

       <input type="checkbox" value=".core16" id="core16"><label for="core16">core16</label>

    </div>

    <div class="option-set" data-group="thread">

      <input type="checkbox" value id="thread-all" class="all" checked><label for="thread-all">all thread</label>

      <input type="checkbox" value=".thread1" id="thread1"><label for="thread1">thread1</label>

      <input type="checkbox" value=".thread2" id="thread2"><label for="thread2">thread2</label>

      <input type="checkbox" value=".thread4" id="thread4"><label for="thread4">thread4</label>

      <input type="checkbox" value=".thread6" id="thread6"><label for="thread6">thread6</label>

      <input type="checkbox" value=".thread8" id="thread8"><label for="thread8">thread8</label>

      <input type="checkbox" value=".thread12" id="thread12"><label for="thread12">thread12</label>

    </div>

    <div class="option-set" data-group="ram">

      <input type="checkbox" value id="ram-all" class="all" checked><label for="ram-all">all ram</label>

      <input type="checkbox" value=".ram2" id="ram2"><label for="ram2">2 GB</label>

      <input type="checkbox" value=".ram4" id="ram4"><label for="ram4">4 GB</label>

      <input type="checkbox" value=".ram8" id="ram8"><label for="ram8">8 GB</label>

      <input type="checkbox" value=".ram16" id="ram16"><label for="ram16">16 GB</label>

      <input type="checkbox" value=".ram32" id="ram32"><label for="ram32">32 GB</label>

      <input type="checkbox" value=".ram64" id="ram64"><label for="ram64">64 GB</label>

    </div>

    <div class="option-set" data-group="uplink">

      <input type="checkbox" value id="uplink-all" class="all" checked><label for="uplink-all">all uplink</label>

      <input type="checkbox" value=".uplink100" id="uplink100"><label for="uplink100">100 Mbps</label>

      <input type="checkbox" value=".uplink1000" id="uplink1000"><label for="uplink1000">1 Gbps</label>

    </div>

        <div class="option-set" data-group="ssd">

      <input type="checkbox" value id="ssd-all" class="all" checked><label for="ssd-all">all ssd</label>

      <input type="checkbox" value=".ssdyes" id="ssdyes"><label for="ssdyes">Yes</label>

      <input type="checkbox" value=".ssdno" id="ssdno"><label for="ssdno">No</label>

    </div>

   <div class="option-set" data-group="dcount">

      <input type="checkbox" value id="dcount-all" class="all" checked><label for="dcount-all">All Disk Count</label>

      <input type="checkbox" value=".dcount1" id="dcount1"><label for="dcount1">1 Disk</label>

      <input type="checkbox" value=".dcount2" id="dcount2"><label for="dcount2">2 Disk</label>

      <input type="checkbox" value=".dcount3" id="dcount3"><label for="dcount3">3 Disk</label>

      <input type="checkbox" value=".dcount4" id="dcount4"><label for="dcount4">4 Disk</label>

      <input type="checkbox" value=".dcountmore" id="dcountmore"><label for="dcountmore">More Disk</label>

   </div>

      <div class="option-set" data-group="dcapacity">

      <input type="checkbox" value id="dcapacity-all" class="all" checked><label for="dcapacity-all">All Disk Capacity</label>

      <input type="checkbox" value=".dcapacity500" id="dcapacity500"><label for="dcapacity500">0-500 GB</label>

      <input type="checkbox" value=".dcapacity1000" id="dcapacity1000"><label for="dcapacity1000">501-1000 GB</label>

      <input type="checkbox" value=".dcapacity2000" id="dcapacity2000"><label for="dcapacity2000">1001-2000 GB</label>

      <input type="checkbox" value=".dcapacity3000" id="dcapacity3000"><label for="dcapacity3000">2001-3000 GB</label>

      <input type="checkbox" value=".dcapacity4000" id="dcapacity4000"><label for="dcapacity4000">3001-4000 GB</label>

      <input type="checkbox" value=".dcapacitymore" id="dcapacitymore"><label for="dcapacitymore">More than 4000 GB</label>

      </div>

    <div class="option-set" data-group="raid">

      <input type="checkbox" value id="raid-all" class="all" checked><label for="raid-all">all raid</label>

      <input type="checkbox" value=".raids" id="raids"><label for="raids">Software Raid</label>

      <input type="checkbox" value=".raidh" id="raidh"><label for="raidh">Hardware Raid</label>

    </div> 

   <div class="option-set" data-group="cpuscore">

      <input type="checkbox" value id="cpuscore-all" class="all" checked><label for="cpuscore-all">All Cpu Scores</label>

      <input type="checkbox" value=".cpuscore2000" id="cpuscore2000"><label for="cpuscore2000">0-2000</label>

      <input type="checkbox" value=".cpuscore4000" id="cpuscore4000"><label for="cpuscore4000">2001-4000</label>

      <input type="checkbox" value=".cpuscore6000" id="cpuscore6000"><label for="cpuscore6000">4001-6000</label>

      <input type="checkbox" value=".cpuscore8000" id="cpuscore8000"><label for="cpuscore8000">6001-8000</label>

      <input type="checkbox" value=".cpuscore10000" id="cpuscore10000"><label for="cpuscore10000">8001-10000</label>

      <input type="checkbox" value=".cpuscore12000" id="cpuscore12000"><label for="cpuscore12000">10001-12000</label>

      <input type="checkbox" value=".cpuscoremore" id="cpuscoremore"><label for="cpuscoremore">More Than 12000</label>

      </div>

    <div class="option-set" data-group="prange">

      <input type="checkbox" value id="prange-all" class="all" checked><label for="prange-all">All Price Range</label>

      <input type="checkbox" value=".prange50" id="prange50"><label for="prange50">$0-$50</label>

      <input type="checkbox" value=".prange100" id="prange100"><label for="prange100">$51-$100</label>

      <input type="checkbox" value=".prange150" id="prange150"><label for="prange150">$101-$150</label>

      <input type="checkbox" value=".prange200" id="prange200"><label for="prange200">$151-$200</label>

      <input type="checkbox" value=".prange250" id="prange250"><label for="prange250">$201-$250</label>

      <input type="checkbox" value=".prange300" id="prange300"><label for="prange300">$251-$300</label>

      <input type="checkbox" value=".prangemore" id="prangemore"><label for="prangemore">More Than $300</label>

      </div>

      

       <div class="option-set" data-group="sloc">

      <input type="checkbox" value id="sloc-all" class="all" checked><label for="sloc-all">All Server Location</label>

      <input type="checkbox" value=".slocusa" id="slocusa"><label for="slocusa">USA</label>

      <input type="checkbox" value=".sloccanada" id="sloccanada"><label for="sloccanada">Canada</label>

      <input type="checkbox" value=".slocfrance" id="slocfrance"><label for="slocfrance">France</label>

      </div>

 

    </div>

 

  <p id="filter-display"></p>

 

  <div id="container"></div>

  

 

<script src="index_files/jquery00.js"></script>

<script src="index_files/jquery01.js"></script>

<script>

  var data = {

    cores: 'core1 core2 core4 core6 core8 core12 core16'.split(' '),

    cpuThreads: 'thread1 thread2 thread4 thread6 thread8 thread12'.split(' '),

    rams: 'ram2 ram4 ram8 ram16 ram32 ram64'.split(' '),

    uplinks: 'uplink100 uplink1000'.split(' '),

    ssds: 'ssdyes ssdno'.split(' '),

    dcounts: 'dcount1 dcount2 dcount3 dcount4 dcountmore'.split(' '),

    dcapacitys: 'dcapacity500 dcapacity1000 dcapacity2000 dcapacity3000 dcapacity4000 dcapacitymore'.split(' '),

    raids: 'raids raidh'.split(' '),

    cpuscores: 'cpuscore2000 cpuscore4000 cpuscore6000 cpuscore8000 cpuscore10000 cpuscore12000 cpuscoremore'.split(' '),

    pranges: 'prange50 prange100 prange150 prange200 prange250 prange300 prangemore'.split(' '),

    slocs: 'slocusa sloccanada slocfrance'.split(' ')

      }

 

 

  $(function(){

 

    var cores, cpuThreads, rams, uplinks, ssds, dcounts, dcapacitys, raids, cpuscores, pranges, slocs;

    var items = ''

    // dynamically create content

    for (var i=0, len1 = data.cores.length; i < len1; i++) {

      core = data.cores;

      for (var j=0, len2 = data.cpuThreads.length; j < len2; j++) {

        cpuThreads = data.cpuThreads[j];

          for (var l=0, len3 = data.rams.length; l < len3; l++) {

          ram = data.rams[l];

          for (var k=0, len4 = data.uplinks.length; k < len4; k++) {

            uplink = data.uplinks[k];

               for (var t=0, len5 = data.ssds.length; t < len5; t++) {

                 ssd = data.ssds[t];

                  for (var p=0, len6 = data.dcounts.length; p < len6; p++) {

                   dcount = data.dcounts[p];

                   for (var q=0, len7 = data.slocs.length; q < len7; q++) {

                   sloc = data.slocs[q];

                     var itemHtml = '<div class="item ' + core + ' ' +

              cpuThreads + ' ' + ram + ' ' + uplink + ' ' + ssd + ' ' + dcount + ' ' + sloc + '">' +

              '<p>' + core + '</p>' +

              '<p>' + cpuThreads + '</p>' +

              '<p>' + uplink + '</p>' +

              '<p>' + ram + '</p>' +

              '<p>' + ssd + '</p>' +

               '<p>' + dcount + '</p>' +

               '<p>' + sloc + '</p>' +

                  '</div>'

              items += itemHtml;

              }

            } 

          }

        }

      }

    }

   }

    

    

 

    var $container = $('#container');

    var $filterDisplay = $('#filter-display');

    $container.append( items );

    $container.isotope()

    

    var filters = {};

    

    $('#options').on( 'change', function( jQEvent ) {

 

      var checkbox = jQEvent.target;

      var $checkbox = $( checkbox );

      var value = checkbox.value;

      var isAll = $checkbox.hasClass('all');

 

      var group = $checkbox.parents('.option-set').attr('data-group');

      // create array for filter group, if not there yet

      if ( !filters[ group ] ) {

        filters[ group ] = [];

      }

 

      var index = $.inArray( checkbox.value, filters[ group ] );

 

      if ( isAll ) {

        delete filters[ group ];

        if ( !checkbox.checked ) {

          checkbox.checked = 'checked';

        }

      }

 

 

      if ( checkbox.checked ) {

        var selector = isAll ? 'input' : 'input.all';

        $checkbox.siblings( selector ).removeAttr('checked');

 

 

        if ( !isAll && index === -1 ) {

          // add filter to group

          filters[ group ].push( checkbox.value );

        }

 

      } else if ( !isAll ) {

        // remove filter from group

        filters[ group ].splice( index, 1 );

        // if unchecked the last box, check the all

        if ( !$checkbox.siblings('[checked]').length ) {

          $checkbox.siblings('input.all').attr('checked', 'checked');

        }

      }

 

      var i = 0;

      var comboFilters = [];

      var message = []

 

      for ( var prop in filters ) {

        message.push( filters[ prop ].join(' ') );

        var filterGroup = filters[ prop ];

        // skip to next filter group if it doesnt have any values

        if ( !filterGroup.length ) {

          continue;

        }

        if ( i === 0 ) {

          // copy to new array

          comboFilters = filterGroup.slice(0);

        } else {

          var filterSelectors = [];

          // copy to fresh array

          var groupCombo = comboFilters.slice(0); // [ A, B ]

          // merge filter Groups

          for (var k=0, len3 = filterGroup.length; k < len3; k++) {

            for (var j=0, len2 = groupCombo.length; j < len2; j++) {

              filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]

            }

            

          }

          // apply filter selectors to combo filters for next group

          comboFilters = filterSelectors

        }

        i++

      }

      

      // console.log( message );

      // console.log( comboFilters.join(', ') );

 

      $container.isotope({ filter: comboFilters.join(', ') });

 

      $filterDisplay.text( comboFilters.join(', ') );

 

    });

 

  });

  

  

</script>

  

 

 

 

in red color, there script create dynamic content within a loop, i am trying to replace that with

 

<?php 

include "db.php";

$sql="SELECT * FROM server order by price_mo asc";

$result = mysql_query($sql) or die(mysql_error());

  while($row = mysql_fetch_array($result)) 

   {

   ?>

 

    var items = ''

    var itemHtml = '<div class="item core1 thread1 ram2 uplink1000 ssdyes dcount3 slocusa isotope-item">' +

              '<p>' + <?php echo $row["cpu_name"]; ?> + '</p>' +

              '<p>' + <?php echo $row["cpu_cores"]; ?> + '</p>' +

              '<p>' + <?php echo $row["ram"]; ?> + '</p>' +

              '<p>' + <?php echo $row["size"]; ?> + '</p>' +

                '</div>'

              items += itemHtml;

             <?php

             }

             ?>

 

 

i am not getting what is the problem.

[form submit and check the upcheck values]

these are my page. when i select atleast one option from one group. it works f9.

but when i not select any value in any group it give an error. Please Help me out and Sorry for my bad english.

 

INDEX.HTML

 

<!DOCTYPE html>

 

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<SCRIPT language="javascript">

$(function(){

 

    // add multiple select / deselect functionality

    $("#selectall").click(function () {

          $('.case').attr('checked', this.checked);

    });

 

    // if all checkbox are selected, check the selectall checkbox

    // and viceversa

    $(".case").click(function(){

 

        if($(".case").length == $(".case:checked").length) {

            $("#selectall").attr("checked", "checked");

        } else {

            $("#selectall").removeAttr("checked");

        }

 

    });

});

</SCRIPT>

 

</head>

<body>

 

<form action="parse.php" method="post">

 

  Choose the items you want:<br>

  <input type="checkbox" id="selectall" name="core[]" checked="checked">All Cores <br> 

 

  <input type="checkbox" name="core[]" class="case" value="2"> Cpu Core 2 <br>

 

  <input type="checkbox" name="core[]"  class="case" value="4"> Cpu Core 4 <br>

 

  <input type="checkbox" name="core[]"  class="case" value="6"> Cpu Core 6 <br>

  

  Choose the items you want:<br>

 

  <input type="checkbox" name="thread[]" value="2"> Cpu Thread 2 <br>

 

  <input type="checkbox" name="thread[]" value="4"> Cpu Thread 4 <br>

 

  <input type="checkbox" name="thread[]" value="8"> Cpu Thread 8 <br>

 

Choose the items you want:<br>

 

  <input type="checkbox" name="ram[]" value="2"> Cpu ram 2 <br>

 

  <input type="checkbox" name="ram[]" value="4"> Cpu ram 4 <br>

 

  <input type="checkbox" name="ram[]" value="8"> Cpu ram 8 <br>

  

  Choose the items you want:<br>

 

  <input type="checkbox" name="hdd[]" value="50-100"> 50 to 100 GB <br>

 

  <input type="checkbox" name="hdd[]" value="100-150"> 100 to 150 GB <br>

 

  <input type="checkbox" name="hdd[]" value="150-200"> 150 to 200 GB <br>

  

  <input type="submit" value="Submit Form">

 

</form>

 

</body>

 

</html>

 

 

 

 

 

PARSE.PHP

 

 

 

 

<?php

$cbArray = $_POST['core'];

$cbArray1= $_POST['thread'];

$cbArray2= $_POST['ram'];

$cbArray3= $_POST['hdd'];

 

$core="";

$thread="";

$ram="";

$hdd="";

if(empty($cbArray)){

 

  $core=all;

 

} else {

 

    $count = count($cbArray);

 

    echo("You selected $count items: <br>");

 

    for($i=0; $i < $count; $i++){

if($i==0)

{

$core=$cbArray[$i];

}

 if($i>0)

 {

      $core=$core." or ".$cbArray[$i];

     }

    }

 

}

 

if(empty($cbArray1)){

 

   $thread=all;

 

} else {

 

    $count1 = count($cbArray1);

 

    echo("You selected $count1 items: <br>");

 

    for($i=0; $i < $count1; $i++){

 if($i==0)

 {

 $thread=$cbArray1[$i];

 }

 if($i>0)

 {

 $thread=$thread." or ".$cbArray1[$i];

 }

  }

  }

 

if(empty($cbArray2)){

 

   $ram=all;

 

} else {

 

    $count2 = count($cbArray2);

 

    echo("You selected $count2 items: <br>");

 

    for($i=0; $i < $count2; $i++){

 if($i==0)

 {

     $ram=$cbArray2[$i];

}

if($i>0)

 {

  $ram=$ram." or ".$cbArray2[$i];

 }

 

    }

 

}

 

if(empty($cbArray3)){

 

   $hdd=all;

 

} else {

 

    $count3 = count($cbArray3);

 

    echo("You selected $count3 items: <br>");

 

    for($i=0; $i < $count3; $i++){

if($i==0)

 {

  $hdd="'$cbArray3[$i]'";

 }

 

 

      if($i>0)

 {

 

 $hdd="$hdd"." or "."'$cbArray3[$i]'";

   

}

    }

 

}

$sql ="select * from server where cpucore=".$core." and cputhread=".$thread." and cpuram=".$ram." and cpuhdd="."$hdd";

echo $sql;

 

 

 

?>

[multi checkbox based data filter]

Hello All,

 

I am a new member on this forum.

i am not a expert, but i want to design a product filter like this image. Please help me in this Issue.

better if available in client side scripting..

 

Thanks in Advance..