sanjeet087

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.

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

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..