SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 98 of 98
  1. #76
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by wpsdupa View Post
    Success!
    Glad you got it working. Thanks for taking the time to report back.

  2. #77
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by Danian View Post
    So have played with this filter now for so many days, i have now almost got it working, i now just need to get the SQL working correctly, as i now have 2 table to query instead of 1.
    It's a while since I wrote that tutorial, so I'm having difficulty thinking my way back into this and understanding your problem.

    It would be great if you could post:
    - a dump of your two tables (including some sample data)
    - your HTML page (including JS)
    - your PHP script

    That way I will be able to recreate your problem on my machine and will be able to help you better.

    If this seems like too much work (and indeed it might be), then you might also consider starting a new thread in the database forum.

  3. #78
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ,

    Thanks for such a great code. I had tired searching this type of code, at last yours helped me a lot.
    I want to ask a question. will it not work without <script src="http://code.jquery.com/jquery-latest.js"></script> ? Because of this another code for "Auto complete" is not working
    ( i.e. <script src="http://code.jquery.com/jquery-latest.js"></script> and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> conflict ). Pleas help.

  4. #79
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pullo,

    Thanks for the reply, I have put together what you wanted below:

    Database Tabels
    Code:
    -- ----------------------------
    -- Table structure for `table_a`
    -- ----------------------------
    CREATE TABLE `table_a` (
      `ID` int(11) NOT NULL AUTO_INCREMENT,
      `Name` varchar(256) DEFAULT NULL,
      `CurrentLocation` varchar(256) DEFAULT NULL,
      `Locations` varchar(256) DEFAULT NULL,
      `Europe` tinyint(4) NOT NULL,
      `Asia` tinyint(4) DEFAULT NULL,
      `MiddleEast` tinyint(4) DEFAULT NULL,
      `NorthAmerica` tinyint(4) DEFAULT NULL,
      `FirstProduct` varchar(256) DEFAULT NULL,
      `SecondProduct` varchar(256) DEFAULT NULL,
      PRIMARY KEY (`ID`)
    ) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;
    
    -- ----------------------------
    -- Records of table_a
    -- ----------------------------
    INSERT INTO `table_a` VALUES ('1', 'Person A', 'Casablanca', 'Flexible ', '1', '1', '1', '1', 'FX IRD', 'Equities ');
    INSERT INTO `table_a` VALUES ('2', 'Person B', 'London', 'London Only', '0', '0', '0', '0', 'Risk', null);
    INSERT INTO `table_a` VALUES ('3', 'Person C', 'Spain', 'Flexible', '1', '1', '1', '1', 'FX EQD', null);
    INSERT INTO `table_a` VALUES ('7', 'Person D', 'Paris ', 'Flexible', '1', '0', '0', '0', 'Product2  IRD ', 'Product 2 Credit Derivatives ');
    INSERT INTO `table_a` VALUES ('8', 'Person E', 'London', 'London ', '1', '0', '0', '0', '', '');
    INSERT INTO `table_a` VALUES ('9', 'Person F', 'London', 'London only', '0', '0', '0', '0', '', '');
    
    
    -- ----------------------------
    -- Table structure for `table_a_tcategory`
    -- ----------------------------
    CREATE TABLE `table_a_tcategory` (
      `UserID` int(11) NOT NULL,
      `CategoryID` int(11) DEFAULT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    
    -- ----------------------------
    -- Records of table_a_tcategory
    -- ----------------------------
    INSERT INTO `table_a_tcategory` VALUES ('1', '4');
    INSERT INTO `table_a_tcategory` VALUES ('2', '4');
    INSERT INTO `table_a_tcategory` VALUES ('2', '5');
    INSERT INTO `table_a_tcategory` VALUES ('2', '6');
    INSERT INTO `table_a_tcategory` VALUES ('2', '7');
    INSERT INTO `table_a_tcategory` VALUES ('2', '8');
    INSERT INTO `table_a_tcategory` VALUES ('2', '9');
    INSERT INTO `table_a_tcategory` VALUES ('2', '10');
    INSERT INTO `table_a_tcategory` VALUES ('3', '14');
    INSERT INTO `table_a_tcategory` VALUES ('7', '1');
    INSERT INTO `table_a_tcategory` VALUES ('7', '3');
    INSERT INTO `table_a_tcategory` VALUES ('7', '4');
    INSERT INTO `table_a_tcategory` VALUES ('7', '7');
    INSERT INTO `table_a_tcategory` VALUES ('7', '11');
    INSERT INTO `table_a_tcategory` VALUES ('7', '39');
    INSERT INTO `table_a_tcategory` VALUES ('11', '43');
    INSERT INTO `table_a_tcategory` VALUES ('11', '44');
    INSERT INTO `table_a_tcategory` VALUES ('8', '14');
    INSERT INTO `table_a_tcategory` VALUES ('9', '14');

    The HTML:
    Code:
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' dir='ltr' lang='en-US'>
    
    <head>
    	<title>AJAX</title>
    	
    	<meta name='keywords' content='' /> 
    	<meta name='description' content='' />
    	
    	<link href='/css/style.css' rel='stylesheet' media='screen, print' type='text/css' title='Default Screen Style' />
    	<link rel='shortcut icon' href='/images/logo/favicon.ico' mce_href='/images/logo/favicon.ico'/>
    	<meta name='SKYPE_TOOLBAR' content='SKYPE_TOOLBAR_PARSER_COMPATIBLE' />
    	<script src='/javascript/jquery-1.5.1.min.js' type='text/javascript'></script>
    </head>
    
    <body>
    <div id='Wrapper'>
    <div id='Header'>
    	<div id='HeaderContainer'>
    		<div id='Logo'></div>
    
    		<div id='Navigation'>
    		
    		</div>
    		<div class='clearfloat'></div>
    	</div>
    </div>
    
    <div id='SingleContentFullFrame'>
    		<h1>List</h1>
    		
    		<a href='#' id='selecctall'>Clear Fliter</a>
    	
    	<div id='SingleContentFullFrameLeft'>
    		<div class='FilterDisplayBox'>
    			<header>Categories</header>
    			<fieldset class='checkboxes'>
    				<ul>
    					<li>
    						<input type='checkbox' name='CategoryID_4' id='CategoryID_4'>
    						<label for='CategoryID_1'>Accounting</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_5' id='CategoryID_5'>
    						<label for='CategoryID_2'>Architect</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_7' id='CategoryID_7'>
    						<label for='CategoryID_3'>BA</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_6' id='CategoryID_6'>
    						<label for='CategoryID_4'>Front Office</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_8' id='CategoryID_8'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>	
    					<li>
    						<input type='checkbox' name='CategoryID_9' id='CategoryID_9'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>	
    					<li>
    						<input type='checkbox' name='CategoryID_10' id='CategoryID_10'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>	
    					<li>
    						<input type='checkbox' name='CategoryID_14' id='CategoryID_14'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_1' id='CategoryID_1'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_3' id='CategoryID_3'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_11' id='CategoryID_11'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_39' id='CategoryID_39'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_43' id='CategoryID_43'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_44' id='CategoryID_44'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>
    					<li>
    						<input type='checkbox' name='CategoryID_14' id='CategoryID_14'>
    						<label for='CategoryID_4'>Test Category</label>
    					</li>	
    				</ul>
    			</fieldset>
    		</div>
    		
    		<div class='FilterDisplayBox'>
    			<header>Locations</header>
    			<fieldset class='checkboxes'>
    				<ul>
    					<li>
    						<input type='checkbox' name='Europe' id='Europe'>
    						<label for='Europe'>Europe</label>
    					</li>
    					<li>
    						<input type='checkbox' name='Asia' id='Asia'>
    						<label for='Asia'>Asia</label>
    					</li>
    					<li>
    						<input type='checkbox' name='MiddleEast' id='MiddleEast'>
    						<label for='MiddleEast'>Middle East</label>
    					</li>
    					<li>
    						<input type='checkbox' name='NorthAmerica' id='NorthAmerica'>
    						<label for='NorthAmerica'>North America</label>
    					</li>	
    				</ul>
    			</fieldset>
    		</div>
    	</div>
    	
    	<div id='SingleContentFullFrameRight'>
    	
    	<div id='Debug'></div>
    
    	<link href='/css/table.css' rel='stylesheet' media='screen, print' type='text/css' title='Default Screen Style' />
    	<table Width='1600' border='0' cellspacing='0' cellpadding='0' id='ImmediateList'>
    		<thead>
    			<tr>
    				<th width='350'><a href='/list//Name//1'>Name</a></th>
    				<th width='200'><a href='/list//CurrentLocation//1'>Current Location</a></th>
    				<th width='100' align='center'><a href='/list//Europe//1'>Europe</a></th>
    				<th width='100' align='center'><a href='/list//Asia//1'>Asia</a></th>
    				<th width='100' align='center'><a href='/list//MiddleEast//1'>M.East</a></th>
    				<th width='100' align='center'><a href='/list//NorthAmerica//1'>N.America</a></th>
    				<th width='250'><a href='/list//FirstProduct//1'>First Product</a></th>
    				<th width='250'><a href='/list//SecondProduct//1'>First Product</a></th>
    				<th width='24'>&nbsp;</th>
    				<th width='24'>&nbsp;</th>
    			</tr>
    		</thead>
    		
    		<tbody>
    		</tbody>
    	</table>
    	<br />
    	<a href='/trading/add-client'>New Candidate</a>
    
    	<div id='TEST'></div>
    	
    	<script src="http://code.jquery.com/jquery-latest.js"></script> 
    	<script language="javascript">
    	$(document).ready(function() {
    		//	RESET FILTER
    		$('#selecctall').click(function(event) {  //on click 
    			if(this.checked) { // check select status         
    			   $("input:checkbox").each(function() { //loop through each checkbox
    					this.checked = true;  //select all checkboxes with class "checkbox1"               
    				});
    			}else{
    				$("input:checkbox").each(function() { //loop through each checkbox
    					this.checked = false; //deselect all checkboxes with class "checkbox1"                       
    				});         
    			}
    		});
    		
    	});	
    	
    
    	//	BUILD TABLES
    	debug = true;
    
    	function GetFilterOptions(){
    		var opts = [];
    		$checkboxes.each(function(){
    			if(this.checked){
    				opts.push(this.id);
    			}
    		});
    
    		return opts;
    	}
    
    	function UpdateFilter(Options){
    		$.ajax({
    			type: "POST",
    			url: "report_proc.php",
    			dataType : 'html',
    			cache: false,
    			data: {filterOpts: Options},
    			success: function(data){
    				$('#ImmediateList tbody').html(data);
    			}
    		});
    	}
    
    
    	function handleDebug(debugInfo){
    		$("#Debug").html("<pre>" + debugInfo + "</pre>");
    	}
    
    	var $checkboxes = $("input:checkbox");
    	$checkboxes.on("change", function(){
    		var opts = GetFilterOptions();
    		UpdateFilter(opts);
    	});
    
    	$checkboxes.trigger("change");
    	</script>
    
    
    	</div>
    	
    	<div class='clearfloat'></div>
    </div>
    	<div id='PagePush'></div>
    </div>
    
    <div id='PageFooter'>
    	Footer
    </div>
    </div>
    
    </body>
    </html>
    And the PHP code:

    Code:
    $Select = "SELECT Name, CurrentLocation, Locations, Europe, Asia, MiddleEast, NorthAmerica, FirstProduct, SecondProduct, ID";
    $From = " FROM table_a";
    $Where = " WHERE TRUE";
    
    	$FilterOptions = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');
    	
    	//	LOCATIONS
    	if(in_array("Asia", $FilterOptions))		{$Where .= " AND Asia = 1";}
    	if(in_array("Europe", $FilterOptions))		{$Where .= " AND Europe = 1";}
    	if(in_array("MiddleEast", $FilterOptions))	{$Where .= " AND MiddleEast = 1";}
    	if(in_array("NorthAmerica", $FilterOptions)){$Where .= " AND NorthAmerica = 1";}
    
    $SQL = $Select . $From . $Where;
    $Result = mysql_query($SQL, $Link) or die('Error, query failed:<br>'.$SQL);
    $Row = mysql_fetch_array($Result);
    
    while($Row = mysql_fetch_array($Result)){
       $output_string .= "<tr>";
    		$output_string .= "<td>".$Row['Name']."</td>";
    		$output_string .= "<td>".$Row['CurrentLocation']."</td>";
    		$output_string .= "<td>".$Row['Europe']."</td>";
    		$output_string .= "<td>".$Row['Asia']."</td>";
    		$output_string .= "<td>".$Row['MiddleEast']."</td>";
    		$output_string .= "<td>".$Row['NorthAmerica']."</td>";
    		$output_string .= "<td>".$Row['FirstProduct']."</td>";
    		$output_string .= "<td>".$Row['SecondProduct']."</td>";
    		$output_string .= "<td><a href='/edit/".$Row['ID']."/".$Row['Name']."'><img src='/images/icon/application_edit.png'></a></td>";
    		$output_string .= "<td><a href='#' class='DeleteImmediateList'><img src='/images/icon/cross.png' alt='Delete ".$Row['Name']."' title='Delete ".$Row['Name']."'></a></td>";
        $output_string .= "</tr>";
    }
    
    echo($output_string);
    I need to also search table_a_tcategory to see if the user is in any of the categories and if so display that in the filter.

    The tables join on table_a.ID and table_a_tcategory.UserID

  5. #80
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Sorry for taking so long to get back to you - I was pretty busy.

    Anyway, thanks for the above. If we are both looking ta the same thing, it makes it easier to help.
    I have copied the code onto my machine and created the db tables, let me see if I have understood what you are trying to do:

    1. You want to display a list of users - these are contained in table a
    2. In addition to displaying the users, you want to be able to filter them by location.
      The location corresponds to one of four columns in table a: Europe, Asia, Middle East and North America.
    3. You also want to be able to filter the users by category id.
      CategoryID is held in a separate table - table_a_tcategory.
      You would therefore need to join the two tables (on usedID) when executing your query

    Is this correct?

    And, what is the output I am looking at beneath the filter?
    Currently it looks like this, regardless of what I chose:

    Code:
    '.$SQL); $Row = mysql_fetch_array($Result); while($Row = mysql_fetch_array($Result)){ $output_string .= "
    ".$Row['Name']."	".$Row['CurrentLocation']."	".$Row['Europe']."	".$Row['Asia']."	".$Row['MiddleEast']."	".$Row['NorthAmerica']."	".$Row['FirstProduct']."	".$Row['SecondProduct']."		Delete ".$Row[
    "; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; $output_string .= ""; } echo($output_string); ?>

  6. #81
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by sandeep2578 View Post
    Hi ,

    Thanks for such a great code. I had tired searching this type of code, at last yours helped me a lot.
    I want to ask a question. will it not work without <script src="http://code.jquery.com/jquery-latest.js"></script> ? Because of this another code for "Auto complete" is not working
    ( i.e. <script src="http://code.jquery.com/jquery-latest.js"></script> and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> conflict ). Pleas help.
    You only need to include jQuery once, if that is your question.

  7. #82
    SitePoint Member ulvetid's Avatar
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, I have been looking at the post but can't make it fit my page.

    I'm creating a website where the user is supposed to check a couple of checkboxes and then the site will present the data in a table.

    I get no results on my index.php, and the submit.php just shows "Array[]"

    This is what I have so far:

    Index.php holds the checkboxes and the jQuery script.

    Checkboxes is in a drop down menu, like this:

    HTML Code:
        <div id="menu">
          <div id="mainmenu"><a href="#" onclick="toggle('submenu1')">Gender</a></div>
          <div id="submenu1" style="display:none">
            <div id="submenu"><a href="#">
              <input type="checkbox" name="gender" value="male">Male</a></div>
            <div id="submenu"><a href="#">
              <input type="checkbox" name="gender" value="female">Female</a></div>
          </div>
          <div id="mainmenu"><a href="#" onclick="toggle('submenu2')">Price range</a></div>
          <div id="submenu2" style="display:none">
            <div id="submenu"><a href="#">
              <input type="checkbox" name="price_range" value="200">200-299$</a></div>
            <div id="submenu"><a href="#">
              <input type="checkbox" name="price_range" value="300">300-399$</a></div>
            <div id="submenu"><a href="#">
              <input type="checkbox" name="price_range" value="400">400-499$</a></div>
          </div>
    jQuery script:

    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script>
          function makeTable(data){
            console.log(data);
           var tbl_body = "";
              $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k , v) {
                  tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";
              })
    
            return tbl_body;
          }
    
          function getSnowboardFilterOptions(){
            var opts = [];
            $checkboxes.each(function(){
              if(this.checked){
                opts.push(this.id);
              }
            });
    
            return opts;
          }
    
          function updateSnowboards(opts){
            $.ajax({
              type: "POST",
              url: "submit.php",
              dataType : 'json',
              cache: false,
              data: {filterOpts: opts},
              success: function(records){
                $('#boards tbody').html(makeTable(records));
              }
            });
          }
    
          var $checkboxes = $("input:checkbox");
         $checkboxes.on("change", function(){
            var opts = getSnowboardFilterOptions();
            updateSnowboards(opts);
          });
    
          checkboxes.trigger("change");
    </script>
    At last I have submit.php, which holds the php code for selecting the right stuff.

    PHP Code:
    <?php 
      $pdo 
    = new PDO('mysql:host=localhost;dbname=...''...''...');
      
    $opts $_POST['filterOpts'];
      
    $qMarks str_repeat('?,'count($opts) - 1) . '?';
      
    $statement $pdo->prepare("SELECT gender, price_range, brand, model, rocker_type, flex, size_range, image FROM snowboards)");
      
    $statement -> execute($opts);
      
    $results $statement -> fetchAll(PDO::FETCH_ASSOC);
      
    $json json_encode($results);
      echo(
    $json);
    ?>
    Right now the SELECT query isn't specified, because I don't know how.

    If someone knows what I'm doing wrong, or have better suggestion to solve it, please tell.

  8. #83
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums.

    Quote Originally Posted by ulvetid View Post
    I'm creating a website where the user is supposed to check a couple of checkboxes and then the site will present the data in a table.
    The script was originally intended to fetch a load of records from the database and then allow the user to filter these records based on various choices he or she might make.

    Looking at your code, I am a bit confused as to what toggle('submenu1') and toggle('submenu2') should do.
    Are they anything to do with the filter?

    Maybe it would be better to approach this from another angle.
    Without providing any code, could you explain what it is you are trying to achieve.
    Once I have understood this, I can see if I can help you with the code.

  9. #84
    SitePoint Member ulvetid's Avatar
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying.
    The website I am making is for a school assigment, and the checkboxes is the main purpose of the site, which is not working. The assignment is due in 24 hours

    The toggle menu part is for a sidemenu that holds the checkboxes. Here is a screenshot.

    I am trying to make a page where the user can use the checkboxes to choose what board to find. For example a Burton(brand) female board which costs around 200$.

  10. #85
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ulvetid View Post
    I am trying to make a page where the user can use the checkboxes to choose what board to find. For example a Burton(brand) female board which costs around 200$.
    Ok, can you post a dump of your DB table, so I can get the structure and some sample data?

  11. #86
    SitePoint Member ulvetid's Avatar
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I can't find the "create table" code, but I have this:

    It's not pretty I know.

    "ID" is auto incremented and the primary key, and the rest is varchars.

  12. #87
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    An image is no good
    Can't you just do a dump of your table?

  13. #88
    SitePoint Member ulvetid's Avatar
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I figured it out:

    Code:
    CREATE TABLE IF NOT EXISTS `snowboards` (
      `id` int(8) NOT NULL AUTO_INCREMENT,
      `gender` varchar(10) NOT NULL,
      `price_range` varchar(10) NOT NULL,
      `brand` varchar(20) NOT NULL,
      `model` varchar(25) NOT NULL,
      `rocker_type` varchar(20) NOT NULL,
      `flex` varchar(15) NOT NULL,
      `size_range` varchar(10) NOT NULL,
      `image` varchar(200) NOT NULL,
      PRIMARY KEY (`id`),
      UNIQUE KEY `id` (`id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;

  14. #89
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Thanks for the dump.
    Now some data would be helpful.

    In the meantime I started having a look at this and came up with something.
    It's a bit rushed as this is my lunch hour, but as you said in post#84, your assignment is due in 24 hours.

    I recreated your db table and inserted the following three records.
    Note that I changed the type of the price_range column from VARCHAR to INT, so as to be able to find prices within a range.

    Code:
    CREATE TABLE IF NOT EXISTS snowboards (
      id int(8) NOT NULL AUTO_INCREMENT,
      gender varchar(10) NOT NULL,
      price_range int(10) NOT NULL,
      brand varchar(20) NOT NULL,
      model varchar(25) NOT NULL,
      rocker_type varchar(20) NOT NULL,
      flex varchar(15) NOT NULL,
      size_range varchar(10) NOT NULL,
      image varchar(200) NOT NULL,
      PRIMARY KEY (id),
      UNIQUE KEY id (id)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4;
    
    INSERT INTO snowboards (id, gender, price_range, brand, model, rocker_type, flex, size_range, image) VALUES
    (1, 'male', 200, 'burton', 'blunt', 'flat', 'soft', '150', '<img src=''images/Brands/Burtons/Mens/burton_blunt.jpg'' width=''100'' height=''100''>'),
    (2, 'male', 300, 'burton', 'super hero', 'flat', 'medium', '150', '<img src=''images/Brands/Burtons/Mens/burton_shero.jpg'' width=''100'' height=''100''>'),
    (3, 'female', 300, 'burton', 'lipstick', 'flat', 'medium', '140', '<img src=''images/Brands/Burtons/Womens/burton_lipstick.jpg'' width=''100'' height=''100''>');
    After that I set up the following HTML/CSS/JS:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Update query</title>
        <style>
          body{
            padding: 10px;
          }
    
          h1 {
              margin: 0 0 0.5em 0;
              color: #343434;
              font-weight: normal;
              font-family: 'Ultra', sans-serif;   
              font-size: 36px;
              line-height: 42px;
              text-transform: uppercase;
              text-shadow: 0 2px white, 0 3px #777;
          }
     
          h2 {
              margin: 1em 0 0.3em 0;
              color: #343434;
              font-weight: normal;
              font-size: 30px;
              line-height: 40px;
              font-family: 'Orienta', sans-serif;
          }
    
          #snowboards
          {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            background: #fff;
            margin: 15px 25px 0 0;
            border-collapse: collapse;
            text-align: center;
            float: left;
            width: 900px;
          }
    
          #snowboards th
          {
            font-size: 14px;
            font-weight: normal;
            color: #039;
            padding: 10px 8px;
            border-bottom: 2px solid #6678b1;
          }
    
          #snowboards td
          {
            border-bottom: 1px solid #ccc;
            color: #669;
            padding: 8px 10px;
          }
    
          #snowboards tbody tr:hover td
          {
            color: #009;
          }
    
          #filter{
            float:left;
          }
        </style>
      </head>
      <body> 
        <h1>Snowboards</h1>
    
        <table id="snowboards">
          <thead>
            <tr>
              <th>ID</th>
              <th>Gender</th>
              <th>Price Range</th>
              <th>Brand</th>
              <th>Model</th>
              <th>Rocker Type</th>
              <th>Flex</th>
              <th>Size Range</th>
              <th>Image Path</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
    
        <div id="filter">
          <h2>Filter options</h2>
          <h3>Gender</h3>
          <div>
            <input type="checkbox" id="male" name="male">
            <label for="male">Male</label>
          </div>
          <div>
            <input type="checkbox" id="female" name="female">
            <label for="female">Female</label>
          </div>
    
          <h3>Price Range</h3>
          <div>
            <input type="checkbox" id="cheap" name="cheap">
            <label for="cheap">$200 - $299</label>
          </div>
          <div>
            <input type="checkbox" id="medium-priced" name="medium-priced">
            <label for="medium-priced">$300 - $399</label>
          </div>
          <div>
            <input type="checkbox" id="expensive" name="expensive">
            <label for="expensive">$400 - $499</label>
          </div>
        </div>
    
        <script src="http://code.jquery.com/jquery-latest.js"></script> 
        <script>
          function makeTable(data){
           var tbl_body = "";
              $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k , v) {
                  tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";
              })
    
            return tbl_body;
          }
    
          function getSnowboardFilterOptions(){
            var opts = [];
            $checkboxes.each(function(){
              if(this.checked){
                opts.push(this.name);
              }
            });
    
            return opts;
          }
    
          function updateSnowboards(opts){
            $.ajax({
              type: "POST",
              url: "submit.php",
              dataType : 'json',
              cache: false,
              data: {filterOpts: opts},
              success: function(data){
                $('#snowboards tbody').html(makeTable(data));
              }
            });
          }
    
          var $checkboxes = $("input:checkbox");
          $checkboxes.on("change", function(){
            var opts = getSnowboardFilterOptions();
            updateSnowboards(opts);
          });
    
          updateSnowboards();
        </script> 
      </body> 
    </html>
    and structured the PHP like so:

    Code:
    <?php 
      // DB Connection
      $pdo = new PDO('mysql:host=localhost;dbname=sitepoint', '****', '****');
      
      $select = 'SELECT *';
      $from = ' FROM snowboards';
      $where = ' WHERE TRUE';
      $opts = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');
    
      if (in_array("male", $opts)){
        $where .= " AND gender = 'male'";
      }
    
      if (in_array("female", $opts)){
        $where .= " AND gender = 'female'";
      }
    
      if (in_array("cheap", $opts)){
        $where .= " AND price_range > 199 AND price_range < 300";
      }
    
      if (in_array("medium-priced", $opts)){
        $where .= " AND price_range > 299 AND price_range < 400";
      }
    
      if (in_array("expensive", $opts)){
        $where .= " AND price_range > 399 AND price_range < 500";
      }
      $sql = $select . $from . $where;
    
      $statement = $pdo->prepare($sql);
      $statement->execute();
      $results=$statement->fetchAll(PDO::FETCH_ASSOC);
      $json=json_encode($results);
      echo($json);
    ?>
    You can see the results here - demo.

    Like I said, it's not perfect.
    You really need to think about how you want the various filters to behave, for example what happens when a user clicks two options in the price range.

    Also, I am quite happy to help, but I won't do your assignment for you.

    Good luck!

  15. #90
    SitePoint Member ulvetid's Avatar
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow, I didn't expect such a detailed answer.
    I am at school right now, but I can definitely work further on this when at home.

    You are hands down the most helpfull and kind person I have met in a while.

    I will update you on how this goes! Thanks again!

    (Btw, the assignment was postponed 48 hours)

  16. #91
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)

  17. #92
    SitePoint Member ulvetid's Avatar
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  18. #93
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Nice one!
    Thanks for taking the time to report back - appreciate it.

  19. #94
    SitePoint Member
    Join Date
    Apr 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I just want to start of by saying great work with these script. I would like to implement this script but I am a complete noob when it comes to ajax or jquery. A lot of website use a product filter so I figure i would try website project to familiarize myself with the technique.

    I want to try and keep my layout the way it is if that is even possible. I have a screen shot below.
    website.jpg

    Does this technique have to use JSON data?

    Any help would be greatly greatly appreciated. I been trying to do this for a week with no luck at all.

    I have a database with 3 tables categories, pictures and products

    categories table
    Code:
    TABLE `categories` (
      `cat_id` int(11) NOT NULL AUTO_INCREMENT,
      `cat_name` varchar(50) NOT NULL DEFAULT '',
      PRIMARY KEY (`cat_id`)
    pictures table
    Code:
     TABLE `pictures` (
      `key_id` bigint(20) NOT NULL AUTO_INCREMENT,
      `product_id` bigint(20) NOT NULL DEFAULT '0',
      `pic_name` varchar(50) NOT NULL DEFAULT '',
      PRIMARY KEY (`key_id`)
    products table
    Code:
    TABLE `products` (
      `product_id` bigint(20) NOT NULL AUTO_INCREMENT,
      `cat_id` int(11) NOT NULL DEFAULT '0',
      `_title` varchar(100) DEFAULT NULL,
      `_manufacturer` varchar(50) DEFAULT NULL,
      `model_number` varchar(50) DEFAULT NULL,
      `sub_cat` varchar(50) DEFAULT NULL,
      `_Pcondition` enum('New','Used','Refurbished') NOT NULL DEFAULT 'New',
      `energy_star` enum('Yes','No') NOT NULL DEFAULT 'No',
      `_color` varchar(50) DEFAULT NULL,
      `_warranty` text,
      `_width` varchar(50) DEFAULT NULL,
      `_depth` varchar(50) DEFAULT NULL,
      `_height` varchar(50) DEFAULT NULL,
      `_weight` varchar(50) DEFAULT NULL,
      `cubic_feet` varchar(50) DEFAULT NULL,
      `_price` varchar(50) DEFAULT NULL,
      `product_desc` text,
      `_sold` enum('In Stock','On Hold','SOLD') NOT NULL DEFAULT 'In Stock',
      `_featured` enum('Yes','No') NOT NULL DEFAULT 'No',
      `_thumbnail` varchar(50) NOT NULL DEFAULT '',
      PRIMARY KEY (`product_id`),
      KEY `cat` (`cat_id`)

  20. #95
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums

    Quote Originally Posted by TwistedNy View Post
    I want to try and keep my layout the way it is if that is even possible.
    Absolutely.
    The styling is down to you.

    Quote Originally Posted by TwistedNy View Post
    Does this technique have to use JSON data?
    Well, you need some way of conveying the server's response to the webpage.
    It doesn't have to use JSON, but in my opinion JSON is the way to go.

    Quote Originally Posted by TwistedNy View Post
    Any help would be greatly greatly appreciated. I been trying to do this for a week with no luck at all.
    I would suggest setting up a basic test environment with your three tables, then use my example to try and filter them by just one category.
    Once you have that working, you can try adding more categories and styling and so on, until you build it up to how you want it to look.

    If you have a specific problem, let me know.

  21. #96
    SitePoint Member
    Join Date
    Apr 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo thank you for getting back to me. Is there a way i can receive the data from the json format separably?

    For example like in a php query where if i want to call for my product title i would just echo {$row['_title']} that why when I lay out the site I could do <div>$title</div>

  22. #97
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Quote Originally Posted by TwistedNy View Post
    Is there a way i can receive the data from the json format separably?
    I'm not sure I understand what you mean by that.
    JSON is a data format that the PHP script uses to send information back to the JavaScript running on the page.

    You will need JavaScript to parse it and inject it into the page.

  23. #98
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    So, it's great that my original blog post (Use AJAX to filter MySQL results set) generated so much enthusiasm, but this thread has got totally convoluted.

    If you are arriving here from my blog and have a question about what I wrote, please start a new thread in the JavaScript forum and feel free to mention me (here's how), so that I will see it.

    In the meantime, this thread is closed.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •